使用 jQuery 控制 HTML5 <audio> 元素答案

【问题标题】：Using jQuery to control HTML5 <audio> element使用 jQuery 控制 HTML5 <audio> 元素
【发布时间】：2012-03-23 17:01:32
【问题描述】：

我正在尝试使用 jQuery 来控制 HTML5 音频元素，但我不是 JS 天才。我想要的是让播放器在页面加载时开始，我已经完成了，但是当点击播放按钮时，我想检查音频是否正在播放。如果单击时正在播放：停止音频。如果点击时没有播放：播放音频。

如果您能提供帮助，我们将不胜感激。

来源：http://www.julake.co.uk/media/loader.php?page=contact

非常感谢，

【问题讨论】：

标签： javascript jquery html audio

【解决方案1】：

您应该使用一个播放/暂停切换按钮，您需要在其中检查您的音频是否暂停

var audioplayer = document.getElementById("audio-player");
$("#play-bt").click(function(){
    if (audioplayer.paused) {
       audioplayer.play();
    }   
    else {
       audioplayer.pause();
    }
    $(this).toggleClass('pause');  /* style your toggle button according to 
                                      the current state */
})

【讨论】：

如何使用 jQuery 懒惰？有用的，人怎么用不了？

【解决方案2】：

var audio = new Audio("http://www.w3schools.com/html5/song.ogg"); //or you can get it with getelementbyid

audio.addEventListener('canplay', function() {
//code, when audio can play
audio.play(); //this function will start the music
})

使用 audio.play() 函数，您可以启动它。你不需要 JQuery

【讨论】：

你知道结束后如何播放另一首歌曲吗？

【解决方案3】：

如果您希望使用 jquery 选择器或已有 jquery 选择器，您可以添加 [0] 以获取原生 dom 元素。

所以一个实际使用 jquery 的例子是。

$('audio')[0].pause()

【讨论】：