如何在 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 語句來增加剪輯的數量。