如何使用javascript隨機播放音頻標簽中的多個音頻文件？

Question

單擊鏈接時，我試圖隨機播放文件聲音。 我有多個鏈接，當單擊這些鏈接時，它們當前在每個鏈接上播放一種聲音。

<audio id="audio-fail">
  <!--<source src="" type="audio/mpeg"> -->
  <source src="/application/sounds/other/fail_1.mp3" type="audio/mpeg">
</audio>

我添加了另一個來源：

<audio id="audio-fail">
  <!--<source src="" type="audio/mpeg"> -->
  <source src="/application/sounds/other/fail_1.mp3" type="audio/mpeg">
  <source src="/application/sounds/other/fail_2.mp3" type="audio/mpeg">
</audio>

在jQuery中，我讀取文件是這樣的：

const failSound = $('#audio-fail')[0];
$('.js-clickable-object').on('click', function (e) {
   ailSound.play();
});

我的問題是單擊鏈接時如何從音頻標簽隨機播放文件源。

Answer 1

我對任務的解決方案如下。 我相信有更好的解決方案。

<audio id="audio-fail">
        <source src="/application/sounds/other/fail_1.mp3" type="audio/mpeg">
</audio>

<audio id="audio-fail_again">
        <source src="/application/sounds/other/fail_2.mp3" type="audio/mpeg">
</audio>

以下的JavaScript：

const multipleFailSounds = [$('#audio-fail')[0],$('#audio-fail-again')[0] ];

var randomSelection = Math.floor(Math.random() * (multipleFailSounds.length));                
multipleFailSounds[randomSelection].play();

如果您認為更好，請隨時發布其他解決方案。 我只需要快速解決。

Answer 2

為此，您不能讓一個音頻標簽包含多個不同的源標簽，因為瀏覽器會播放支持的第一個文件。

因此，您需要將音頻源存儲在數組中，並在單擊事件時生成介於0和數組長度之間的隨機數，並根據生成的索引查找目標源。 最后在源標簽的src屬性中設置文件地址。

var src = [
  "http://free-mobi.org/files/ringtones/1/by_richy.mp3",
  "http://free-mobi.org/files/4/sleepy.mp3",
  "http://free-mobi.org/files/4/good_morning_alarm.mp3",
  "http://free-mobi.org/files/ringtones/1/otis_redding.mp3"
];

$('button').on('click', function (e) {
  var rand = Math.floor(Math.random() * src.length);
  $('#audio-fail source').attr("src", src[rand])  
  $('#audio-fail')[0].load();
  $('#audio-fail')[0].play();
});

<audio id="audio-fail">
  <source src="" type="audio/mpeg">
</audio>
<button>Play</button>

因為代碼段不播放音頻，所以我在jsfiddle中創建了演示