javascript - 如何在 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("播放")

在这里尝试一下:

$( 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 video using JQuery