Html5 Check If Audio Is Playing

HTML5 check if audio is playing?

function isPlaying(audelem) { return !audelem.paused; }

The Audio tag has a paused property. If it is not paused, then it's playing.

Web: How to check if audio is playing?

Audio has paused propriety in javascript.

So if the audio is not paused, then it's playing.

Example:

audio = new Audio('music.mp3');
audio.play();

if(!audio.paused){ //check audio is playing
 audio.pause();
}

Check if audio is playing without HTML5 tag

This should work:

var sound = new Audio('https://mfaucet.com/images/notification2.mp3');
function play(sound) {  if(!sound.paused) sound.pause();  sound.currentTime = 0;  sound.play();}

<button onclick="play(sound)">Play</button>Press two times

How to determine if playing HTML5 audio is actually making sound?

To check if an HTMLMediaElement (either video or audio) has ever been played on the page, the best solution is to check for its played attribute.

This will return a TimeRanges object that you can as well use to get how much of the media has been played.

If it has never been played, then the length property of this TimeRanges object will be set to 0 :

if(audioElement.played.length){
  // This media has already been played
}else{
  // Never
}

How can I tell if an HTML5 Audio element is playing with Javascript

function isPlaying(playerId) {
    var player = document.getElementById(playerId);
    return !player.paused && !player.ended && 0 < player.currentTime;
}

How do you detect when HTML5 audio has finished playing (more than once)?

The ended event is created based on .currentTime attribute.
http://w3c.github.io/html/semantics-embedded-content.html#eventdef-media-ended

So, all you have to do is set the .currentTime to zero again.

myAudio.addEventListener("ended", function(){
     myAudio.currentTime = 0;
     console.log("ended");
});

How can I tell when an HTML5 audio element has finished playing?

According to W3Schools, you can use the onended event to detect if the audio has finished playing.

In jQuery:

$("#player").bind('ended', function(){
    // done playing
    alert("Player stopped");
});

For a demonstration see: http://jsfiddle.net/9PCEf/2/

How do you check if a HTML5 audio element is loaded?

To find out when the audio is ready to start playing, add listeners for the oncanplay or oncanplaythrough events. To find out when the audio has loaded at all, listen to the onloadeddata event:

<audio oncanplay="myOnCanPlayFunction()"
       oncanplaythrough="myOnCanPlayThroughFunction()"
       onloadeddata="myOnLoadedData()"
       src="myaudio.ogg"
       controls>
    <a href="myaudio.ogg">Download</a>
</audio>

<script>
function myOnCanPlayFunction() { console.log('Can play'); }
function myOnCanPlayThroughFunction() { console.log('Can play through'); }
function myOnLoadedData() { console.log('Loaded data'); }
</script>

Audio HTML5 check if all audio elements have fully loaded

Here's a jQuery version:

function audioReady(){
  return $.when.apply($, $('audio').map(function(){
    var ready = new $.Deferred();
    $(this).one('canplay', ready.resolve);
    return ready.promise();
  }));
}

If you don't have jQuery and/or don't care about older browsers:

function audioReady(){
  var audio = [].slice.call(document.getElementsByTagName('audio'));
  return Promise.all(audio.map(function(el){
    return new Promise(function(resolve, reject){
      el.addEventListener('canplay', resolve);
    });
  }));
}

Either way, you'll be able to use the function as such:

audioReady().then(function(){
  // do something
});

---

Related Topics