如何在 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 不是一个函数。

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

Answer 1

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

$(tone)[0].play();——正如 jremi 所回答的。唯一的警告是您必须使用零索引。我不知道这行得通：$(tone)[1].play();
$(tone).get(0).play();
$(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>

可在此处找到更多信息：Play/pause HTML 5 个视频使用 JQuery

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 语句来增加剪辑的数量。

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

How to play a random audio clip using .play() in JavaScript/jQuery

javascript

arrays

playback