哪种方法?
您可以使用< audio>播放音频。标签或< object>或< embed>。
延迟加载(当你需要它的负载)的声音是最好的方法,如果它的大小很小。您可以动态创建音频元素,当它加载时,您可以用.play()启动它,并用.pause()暂停它。
我们使用的东西
我们将使用canplay事件来检测我们的文件是否可以播放。
音频元素没有.stop()函数。我们只能暂停他们。当我们想从音频文件的开头开始,我们改变它的.currentTime。我们将在我们的示例audioElement.currentTime = 0;中使用此行。要实现.stop()函数,我们首先暂停文件,然后重置其时间。
我们可能想知道音频文件的长度和当前播放时间。我们已经学习了.currentTime above,以了解它的长度,我们使用.duration。
示例指南
>当文档准备就绪时,我们动态创建一个音频元素
>我们用我们想播放的音频设置其源。
>我们使用“已结束”事件再次启动文件。
When the currentTime is equal to its duration audio file will stop
playing. Whenever you use play(), it will start from the beginning.
>我们使用timeupdate事件更新当前时间每当音频.currentTime更改。
>我们使用canplay事件来更新信息,当文件准备播放。
>我们创建了按钮来播放,暂停,重新启动。
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', '/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;
});
});
Sound Information
Duration:Source:Status: LoadingControl Buttons
Play
Pause
Restart