如何在 JavaScript/jQuery 中使用 .play() 播放随机音频剪辑

Question

我想要做的只是随机选择一个音频文件并播放它。 我正在尝试使用内置的 .play() 函数。

我定义了四个音频剪辑，sound0 - sound3，例如：

<audio id="sound0" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>

在 JS 中，我可以像这样存储指向该对象的指针：

$sound0 = $("#sound0")[0];

我可以直接玩

$sound0.play();

但是，如果我尝试执行以下操作，

var pattern = [],
    tone;
pattern.push(Math.floor(Math.random() * 4));
tone = "#sound" + pattern[0];
$(tone).play();

我收到错误，Uncaught TypeError: $(...).play is not a function。

解决这个问题的最佳方法是什么？ 谢谢！

Answer 1

不幸的是，我相信.play()方法是 DOM 的一部分，而不是 jQuery 函数。 您可以通过以下几种方式完成它：

1. $(tone)[0].play(); - 正如jremi所回答的那样。 唯一的警告是您必须使用索引为零。 我不知道这会起作用： $(tone)[1].play();

2. $(tone).get(0).play();

3. $(tone).trigger("play")

在这里试试：

 $( document ).ready(function() { function playSound(){ var pattern = [], tone; pattern.push(Math.floor(Math.random() * 4)); tone = "#sound" + pattern[0]; //$(tone).trigger('play'); //uncomment to play //$(tone).get(0).play(); //uncomment to play $(tone)[0].play(); //comment to turn off } $("#button").click(playSound); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <audio id="sound0" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio> <audio id="sound1" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio> <audio id="sound2" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio> <audio id="sound3" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio> <button id="button">Click To Play</button>

可以在此处找到更多信息： 使用 JQuery 播放/暂停 HTML 5 视频

Answer 2

我参加聚会有点晚了，但我现在刚刚尝试过这种方法，对我来说效果很好，但如果您有很多剪辑，它可能会变得有点复杂。 我也不确定浏览器的兼容性。

var c = document.getElementById('playSound');
c.onclick = function() {
    var number = Math.floor(Math.random() * 2);

    if (number == 0) {
        var audio = new Audio("beep.mp3");
    } else if (number = 1) {
        var audio = new Audio("bloop.mp3");
    }
    
    audio.play();
}

基本上，每次单击按钮时它都会生成一个随机数，并且每个数字都有一个附加的音频剪辑。 然后播放与该编号对应的剪辑。 您可以通过增加第 3 行的数量并添加新的 else if 语句来增加剪辑的数量。