如何使用 javascript 随机播放 audio 标签中的多个音频文件？

Question

我试图在单击 link 时随机播放文件声音。我有多个 link，点击时每个 link 播放一种声音。

<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();
});

我的问题是如何在单击 link 时随机播放音频标签中的文件源。

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();

如果您认为其他解决方案更好，请随时使用 post。我只需要快速修复。

Answer 2

出于此目的，您不能让一个音频标签包含多个不同的源标签，因为浏览器首先播放支持的文件。

因此您需要将音频源存储在数组中，并在单击事件时生成介于 0 和数组长度之间的随机数，并通过生成的索引找到目标源。最后在source标签的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

中创建了演示

如何使用 javascript 随机播放 audio 标签中的多个音频文件？

How to randomly play multiple audio files in audio tag using javascript?

html

javascript

jquery

html5-audio