哪种方法?
您可以使用
<audio>或
<object>或标签播放音频
<embed>。延迟加载(需要时加载)如果声音很小,则声音是最好的方法。您可以动态创建音频元素,在加载音频元素时可以使用来启动
.play()和暂停
.pause()。
我们使用的东西
我们将使用
canplay事件来检测我们的文件已准备好播放。
.stop()音频元素没有任何功能。我们只能暂停它们。而且,当我们要从音频文件的开头开始时,请更改其
.currentTime。我们将在示例中使用此行
audioElement.currentTime= 0;。要实现此
.stop()功能,我们首先暂停文件,然后重置其时间。
我们可能想知道音频文件的长度和当前播放时间。我们已经在
.currentTime上面学到了,要了解使用的长度
.duration。
范例指南
- 准备好文档后,我们会动态创建一个音频元素
- 我们将其源设置为要播放的音频。
- 我们使用了’ended’事件来再次启动文件。
当currentTime等于其持续时间时,音频文件将停止播放。每当您使用时
play(),它将从头开始。
timeupdate
每当音频.currentTime
发生更改时,我们都使用事件来更新当前时间。canplay
当文件准备播放时,我们使用事件来更新信息。- 我们创建了播放,暂停,重启按钮。
$(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3'); audioElement.addEventListener('ended', function() { this.play(); }, false); audioElement.addEventListener("canplay",function(){ $("#length").text("Duration:" + audioElement.duration + " seconds"); $("#source").text("Source:" + audioElement.src); $("#status").text("Status: Ready to play").css("color","green"); }); audioElement.addEventListener("timeupdate",function(){ $("#currentTime").text("Current second:" + audioElement.currentTime); }); $('#play').click(function() { audioElement.play(); $("#status").text("Status: Playing"); }); $('#pause').click(function() { audioElement.pause(); $("#status").text("Status: Paused"); }); $('#restart').click(function() { audioElement.currentTime = 0; });});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>$(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3'); audioElement.addEventListener('ended', function() { this.play(); }, false); audioElement.addEventListener("canplay",function(){ $("#length").text("Duration:" + audioElement.duration + " seconds"); $("#source").text("Source:" + audioElement.src); $("#status").text("Status: Ready to play").css("color","green"); }); audioElement.addEventListener("timeupdate",function(){ $("#currentTime").text("Current second:" + audioElement.currentTime); }); $('#play').click(function() { audioElement.play(); $("#status").text("Status: Playing"); }); $('#pause').click(function() { audioElement.pause(); $("#status").text("Status: Paused"); }); $('#restart').click(function() { audioElement.currentTime = 0; });});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


