HTML5 Audio does not play more than once

this does not work for me! who has the same problem? my code seems simple, but it only plays once when I need to play again and again. see below:

My Html:

<audio id="siren" src="sounds/400.ogg" preload="auto"> 

and my JS:

 function play_siren() { log("play sound"); if(document.getElementById('siren').paused == true){ document.getElementById('siren').play(); } } function pause_siren() { try{ if(document.getElementById('siren').paused == false){ document.getElementById('siren').pause(); } log("paused siren"); }catch(err){ log(err.message); } try{ if(document.getElementById('siren').currentTime > 0.0){ document.getElementById('siren').currentTime = 0.0; } log("reset siren"); }catch(err){ log(err.message); } } 

It runs programmatically in JS code as follows:

 if(Obj[3].siren == true && isPlayingSiren == false){ play_siren(); isPlayingSiren = true; }else if(Obj[3].siren == false && isPlayingSiren == true){ pause_siren(); isPlayingSiren = false; } 

I found this gentlemanly code, and its DOES seem to work: http://html5.komplett.cc/code/chap_video/js_audioPlayer_en.html

But setting "currentTime = 0" does nothing for me.

I can not understand. I tested Chrome, Firefox and Safari. Firefox doesn't work at all so far Chrome seems to be the best for HTML5, but still I can only play once.

I even tried mp3 and ogg the same behavior.

Enlighten the light. Thanks!

here is the full HTML:

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" media="all" href="js_audioPlayer.css"> <title>HTMLMediaElement example - Audio Player</title> <script src="../js/audioPlayer.js"></script> </head> <body> <fieldset> <audio src="sounds/400.ogg" preload="auto"></audio> <legend>Audio Player (400)</legend> </fieldset> <script> function loadXMLDoc(){ _pause(); updateProgress(0); playPause(); } var loadXmlTimer = setInterval(loadXMLDoc, 2000); </script> </body> </html> 

and here is the full javascript:

 // global callback functions var playPause, updateProgress, _play, _pause; /* initialize audio player */ window.onload = function() { // keep track of playback status var AudioStatus = { isPlaying : false }; // define references to audio, pulldown menu, play-button, slider and time display var audio = document.querySelector("AUDIO"); /* load track by menu-index */ var loadTrack = function(idx) { audio.src = '../sounds/400.ogg'; audio.load(); }; /* callback to play or pause */ _play = function() { audio.play(); log("play"); AudioStatus.isPlaying = true; }; _pause = function() { audio.pause(); log("pause"); AudioStatus.isPlaying = false; }; playPause = function() { if (audio.paused) { _play(); } else { _pause(); } }; /* callback to set or update playback position */ updateProgress = function(value) { audio.currentTime = value; log("updateProgress"); }; }; 

the timer plays sounds programmatically after the expiration date. this works as long as it is private. I did not understand why it should be private.

+4
source share
2 answers

Does this go through an if statement?

You can use ontimeupdate to place the value of document.getElementById ('siren'). currentTime in the variable. If set to more than 0, you can update it in conditionnal condition.

0
source

All previous solutions are unacceptable because they download the same sound file for each sound playback! Do this instead, for the sake of simplicity and efficiency:

 var sound = document.getElementById("mySound") if(window.chrome){ sound = sound.cloneNode() } sound.play() 

Here's how I fixed the problem with chrome specifically.

0
source

Source: https://habr.com/ru/post/1491525/


All Articles