Javascript HTML只播放一次声音，但更奇怪的事情发生了

Question

我在 codepen 中尝试了这个简单的片段。和函数 once1 可以播放任意多次，而 once2 只能播放一次声音。有人知道有什么区别吗？

var  simple = new 
Audio("http://s3.amazonaws.com/freecodecamp/simonSound1.mp3" );
var birdSound = new 
Audio('http://www.noiseaddicts.com/samples_1w72b820/4929.mp3');

birdSound.loop = false;
simple.loop = false;
function once1(){
  birdSound.play(); 
};
function once2(){
  simple.play(); 
};

Answer 1

更新：使用load()方法，按照其他发帖者的建议，我可以得到下面的代码来重复播放Chrome中的第二个声音，但听起来还是不一样在火狐中。在 Firefox 中，声音播放流畅，但在 Chrome 中，声音结束得更突然，有一点噼啪声或咔哒声。我怀疑这个特定的声音文件与 Chrome.

不完全兼容

我可以使用这里的 Plunker 在 Firefox 中让两种声音播放任意次数，但在 Chrome 中不行：http://plnkr.co/edit/gM8lobVoQoAtVSlwVZNC?p=preview

function init() {
  var simple = new Audio("http://s3.amazonaws.com/freecodecamp/simonSound1.mp3" );
  var birdSound = new Audio('http://www.noiseaddicts.com/samples_1w72b820/4929.mp3');

  birdSound.loop = false;
  simple.loop = false;

  function once1() {
    birdSound.play(); 
  }

  function once2() {
    simple.load();
    simple.play(); 
  }

  var btn1 = document.getElementById("one");
  btn1.addEventListener('click', once1);

  var btn2 = document.getElementById("two");
  btn2.addEventListener('click', once2);
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body onload="init()">
    <button id="one">Sound 1</button><br>
    <button id="two">Sound 2</button>
  </body>

</html>

您使用的是哪个网络浏览器？

Answer 2

给你，我看到另一个答案在 jsfiddle 或 codepen 上仍然不起作用，所以试试这个！

var  simple = new 
Audio("http://s3.amazonaws.com/freecodecamp/simonSound1.mp3" );
var birdSound = new 
Audio('http://www.noiseaddicts.com/samples_1w72b820/4929.mp3');

birdSound.loop = false;
simple.loop = false;
function once1(){
    birdSound.load();
  birdSound.play(); 
};
function once2(){
    simple.load();
  simple.play(); 
};

只需使用 .load :D

Javascript HTML只播放一次声音，但更奇怪的事情发生了

Javascript HTML play sound only once, but more strange thing happened

javascript

audio

codepen