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中创建了演示

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

2 个答案: