Question

<audio id="playmysong" src="/media/click.wav" />
<input type="button" onclick="playMe();"/>
<script type="text/javascript">
    function playMe(){
        var obj = $("playmysong");
        obj.play();
    }
</script>

此代码在我第一次点击时有效。如果我从下一次点击到另一次点击等待大约4-5秒后再次点击此代码仍然有效。但是当我先点击然后在1秒内再次点击它然后它不播放声音。此代码适用于Google Chrome只有Firefox问题。

Answer 1

如果您使用的是jQuery：变化

var obj = $("playmysong");

到

var obj = $("#playmysong").get(0);

更进一步，尝试使用play（）和pause（）：

function audioToggle(){
    var obj = $("#playmysong").get(0);
    if(obj.paused) obj.play() else obj.pause();
}

Answer 2

一旦我克隆了DOM对象，它对我来说很好用

var obj = $("playmysong").cloneNode(true);

现在它在FF和Chrome中都能正常工作

Answer 3

<!DOCTYPE html>

    <html>
  <head>
<style>

</head>
  <body>
<audio id="audio_with_controls" controls autobuffer >
  <source src="http://www.wav-sounds.com/various/beep.wav" type="audio/wav" />
      Audio tag not supported
</audio>
<!-- some actions from Javascript -->
<button id="play">Play</button>
<button id="play2">Play2</button>
<button id="pause">Pause</button>
<button id="duration">Show duration</button>
<div id="duration-log"></div>
<script>
  var song = document.getElementById('audio_with_controls');
  document.getElementById('play').addEventListener('click', function() { song.play(); }, false);
  document.getElementById('play2').addEventListener('click', function() { song.play(); }, false);
  document.getElementById('pause').addEventListener('click', function() { song.pause(); }, false);
  document.getElementById('duration').addEventListener('click', function() { document.querySelector('#duration-log').textContent = song.duration; }, false);
</script>

您可以在浏览器中看到此代码并运行。您可以看到它与FF和Chrome有何不同。特别是在声音播放完成后看滑块。在FF中，它会卡在中间，几秒后它就会结束。这是我在申请中遇到的问题。

HTML5的音频标签在firefox中不能一致地工作

3 个答案: