CODEWITHSUNDEEP
javascripthtml
user2287658
user2287658

Reputation: 31

Javascript HTML5 audio - Dont play sound if already playing?

I have set up some HTML audio on my site and I have set an autoplay function after a couple of seconds, however the sound seems to be loading twice? one starts playing straight after the other although, one is a ghost and cannot see a player for it.

How could I go about telling javascript not to start playing sounds if there are already sounds playing? 

<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 2000)" }>
    <source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
    <source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>

The above issue has been solved however I wanted to add a flash fallback for this audio for internet explorer and so added:

<div id ="audio">

<script>var readingMusic = false; </script>
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
    <source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
    <source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
    <embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>

<div id="audiohide">
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
    <source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
    <source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
    <embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>

</div>

But now the flash audio is behaving how the previous audio did obviously the javascript is not affecting the flash embed?

Upvotes: 3

Views: 1639

Answers (2)

icanhazbroccoli
icanhazbroccoli

Reputation: 1035

Well, that's a part of your jScript.js.

It seems that problem is in this line:

location = base + "/#" + current.replace(base, "");

You navigating to the new url without leaving current page(if origins are the same and the only difference is in hashes). I recommend you to start playing audio after changing location origin.

So you might place your autoplay logick right after this location changes.

Upvotes: 0

Julien Greard
Julien Greard

Reputation: 999

Can't you have a boolean telling the browser if there is already some music playing ?

Example with 2 tags:

<script>var readingMusic = false; </script>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
    <source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
    <source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>

<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
    <source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
    <source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>

Upvotes: 1

Related Questions