HTML5 check if audio is playing?

JavascriptHtmlAudio

Javascript Problem Overview


What's the javascript api for checking if an html5 audio element is currently playing?

Javascript Solutions


Solution 1 - Javascript

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

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

Solution 2 - Javascript

You can check the duration. It is playing if the duration is more than 0 seconds and it is not paused.

var myAudio = document.getElementById('myAudioID');

if (myAudio.duration > 0 && !myAudio.paused) {

    //Its playing...do your job

} else {

    //Not playing...maybe paused, stopped or never played.

}

Solution 3 - Javascript

While I am really late to this thread, I use this implementation to figure out if the sound is playing:

service.currentAudio = new Audio();

var isPlaying = function () {
    return service.currentAudio
        && service.currentAudio.currentTime > 0
        && !service.currentAudio.paused
        && !service.currentAudio.ended
        && service.currentAudio.readyState > 2;
}

I think most of the flags on the audio element are obvious apart from the ready state which you can read about here: MDN HTMLMediaElement.readyState.

Solution 4 - Javascript

document.getElementsByTagName('audio').addEventListener('playing',function() { myfunction(); },false); 

Should do the trick.

Solution 5 - Javascript

Try this function! Audio playing would not be executed if the position is the beginning or ending

function togglePause() {
     if (myAudio.paused && myAudio.currentTime > 0 && !myAudio.ended) {
         myAudio.play();
     } else {
         myAudio.pause();
     }
}

Solution 6 - Javascript

I wondered if this code would work, and it amazingly did:

if (a.paused == false) {
/*do something*/
}

or you could write it as:

if (!a.paused == true) {
/*do something*/
}

if you want your IDE annoying you in JSfiddle.

Solution 7 - Javascript

you can to use the onplay event.

var audio = document.querySelector('audio');
audio.onplay = function() { /* do something */};

or

var audio = document.querySelector('audio');
audio.addEventListener('play', function() { /* do something */ };

Solution 8 - Javascript

Try Out This Code:

	var myAudio = document.getElementById("audioFile"); 

	function playAudio() { 
		  //audio.play(); 
		  //console.log(audio.play())
		   if (myAudio.paused && myAudio.currentTime >= 0 && !myAudio.started) {
         myAudio.play();
         console.log("started");
     } else {
         myAudio.pause();
     }
}

Solution 9 - Javascript

To check if audio is really start playing, especially if you have a stream, need to check audio.played.length to 1. It will be 1 only if audio is really start sounds. Otherwise will be 0. It's more like a hack, but that still works even in mobile browsers, like Safari and Chrome.

Solution 10 - Javascript

I do this way

	<button id="play">Play Sound</button>
<script>
	var sound = new Audio("path_to_sound.mp3")
	sound.loop = false;
	var play = document.getElementById("play")
	play.addEventListener("click", () => {
		if (!isPlaying()) {
			sound.play()
		} else {
			//sound.pause()  
		}
	})

	function isPlaying() {
		var infoPlaying = false
		var currentTime = sound.currentTime == 0 ? true : false
		var paused = sound.paused ? true : false
		var ended = !sound.ended ? true : false
		var readyState = sound.readyState == 0 ? true : false
		if (currentTime && paused && ended && readyState) {
			infoPlaying = true
		} else if (!currentTime && !paused && ended && !readyState) {
			infoPlaying = true
		}
	  return infoPlaying
	}
</script>

Solution 11 - Javascript

am using this jquery code withe tow button play and stop, play button is a play and pouse button

const help_p = new Audio("audio/help.mp3");//Set Help Audio Name
$('#help_play').click(function() {//pause-Play
if (help_p.paused == false) {
  help_p.pause();//pause if playing
} else {
  help_p.play();//Play If Pausing
}
});

$('#help_stop').click(function() {//Stop Button
  help_p.pause();//pause
  help_p.currentTime = 0; //Set Time 0
});

Solution 12 - Javascript

While there is no method called isPlaying or something similar, there are a few ways to accomplish this.

This method gets the % of progress as audio is playing:

function getPercentProg() {
    var myVideo = document.getElementById('myVideo');
    var endBuf = myVideo.buffered.end(0);
    var soFar = parseInt((endBuf / myVideo.duration) * 100);
    document.getElementById('loadStatus').innerHTML =  soFar + '%';
}

If percent is greater than 0 and less than 100, it is playing, else it is stopped.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHarryView Question on Stackoverflow
Solution 1 - JavascriptNiet the Dark AbsolView Answer on Stackoverflow
Solution 2 - JavascriptMaxaliView Answer on Stackoverflow
Solution 3 - JavascriptHassan MahmudView Answer on Stackoverflow
Solution 4 - JavascriptprojectxmattView Answer on Stackoverflow
Solution 5 - JavascriptNidlol MasyhudView Answer on Stackoverflow
Solution 6 - Javascriptuser14631264View Answer on Stackoverflow
Solution 7 - JavascriptRicardo FerreiraView Answer on Stackoverflow
Solution 8 - JavascriptRahul PaithaneView Answer on Stackoverflow
Solution 9 - JavascriptAlex IvasyuvView Answer on Stackoverflow
Solution 10 - JavascriptAllanRibasView Answer on Stackoverflow
Solution 11 - JavascriptMohamed SlimaneView Answer on Stackoverflow
Solution 12 - JavascriptTodd MosesView Answer on Stackoverflow