php单击在本页播放音频,单击按钮时，使用jQuery播放音频文件

幕布斯7119047

哪种方法？您可以使用或或标签播放音频。延迟加载(需要时加载)如果声音很小，则声音是最好的方法。您可以动态创建音频元素，在加载音频元素时可以使用来启动.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;    });});   

Sound Information

   

Duration:

   

Source:

   

Status: Loading

   

---

   

Control Buttons

    Play    Pause    Restart   

---

   

Playing Information

   

0