HTML5音频不会播放多次

时间:2013-07-15 21:21:54

标签: javascript html5-audio

这对我不起作用!谁有同样的问题?我的代码看起来很简单,但只有在我需要能够一遍又一遍地播放时它才会播放。见如下:

我的Html:

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

和我的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);
    }
}

它在JS代码中以编程方式启动,如下所示:

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

我发现这位绅士的代码和他的DOES似乎有效:http://html5.komplett.cc/code/chap_video/js_audioPlayer_en.html

但设置“currentTime = 0”对我没有任何作用。

我无法理解。我测试了Chrome,Firefox和Safari。到目前为止Firefox根本不起作用Chrome似乎是HTML5的最佳选择,但我只能玩一次。

我甚至尝试过mp3和ogg相同的行为。

请说清楚。谢谢!

这里是完整的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>

这里是完整的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");
};

};

计时器在到期时以编程方式播放声音。这是私有的。我不明白为什么它必须是私人的。

2 个答案:

答案 0 :(得分:0)

是否通过if语句?

您可以使用ontimeupdate将document.getElementById('siren')。currentTime的值放在变量中。 如果设置为大于0,则可以在if conditionnal中更新它。

答案 1 :(得分:0)

所有以前的解决方案都是不可接受的,因为每次播放声音时都会下载相同的声音文件!为了简单和高效,请这样做:

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

这是我专门用chrome修复问题的方法。