5

this does not work for me! anyone having the same issue? my code seems straightforward but it only plays once I need to be able to play over and over. see as follows:

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 is started programmatically in the 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 gentleman's code and his DOES seem to work: http://html5.komplett.cc/code/chap_video/js_audioPlayer_en.html

But setting "currentTime = 0" is not doing anything for me.

I can't figure it out. I tested with Chrome, Firefox and Safari. Firefox does not 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 same behavior.

Please shed some light. Thank you!

here is 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 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 the sounds programmatically on the expiration. this works as long it is private. I did not understand why it has to be private.

4

2 回答 2

0

之前的所有解决方案都是不可接受的，因为它们每次播放声音时都会下载相同的声音文件！为了简单和高效，请改为这样做：

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

这就是我专门解决 chrome 问题的方法。

于 2014-07-16T01:11:58.737 回答
0

它是否通过 if 语句？

您可以使用 ontimeupdate 将 document.getElementById('siren').currentTime 的值放入变量中。如果设置为大于 0，那么您可以在 if 条件中更新它。

于 2013-07-15T22:53:05.937 回答