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")

在这里试试：

＆＃13;

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

＆＃13;

<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>

＆＃13;

可以在此处找到更多信息：Play/pause HTML 5 video using 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（）播放随机音频片段

2 个答案: