单击按钮时，使用jQuery播放音频文件

  • Z时代
  • 2024-01-10
  • 分类：问答

单击按钮时，我尝试播放音频文件，但它不起作用，我的html代码为：

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

我的JavaScript是：

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});

回答：

哪种方法？

您可以使用<audio>或<object>或标签播放音频<embed>。延迟加载（需要时加载）如果声音很小，则声音是最好的方法。您可以动态创建音频元素，在加载音频元素时可以使用来启动.play()和暂停.pause()。

我们使用的东西

我们将使用canplay事件来检测我们的文件已准备好播放。

.stop()音频元素没有任何功能。我们只能暂停它们。而且，当我们要从音频文件的开头开始时，请更改其.currentTime。我们将在示例中使用此行audioElement.currentTime

= 0;。要实现此.stop()功能，我们首先暂停文件，然后重置其时间。

我们可能想知道音频文件的长度和当前播放时间。我们已经在.currentTime上面学到了，要了解使用的长度.duration。

范例指南

  1. 准备好文档后，我们会动态创建一个音频元素

  2. 我们将其源设置为要播放的音频。

  3. 我们使用了’ended’事件来再次启动文件。

当currentTime等于其持续时间时，音频文件将停止播放。每当您使用时play()，它将从头开始。

  1. timeupdate每当音频.currentTime发生更改时，我们都使用事件来更新当前时间。

  2. canplay当文件准备播放时，我们使用事件来更新信息。

  3. 我们创建了播放，暂停，重启按钮。 

$(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>

以上是 单击按钮时，使用jQuery播放音频文件 的全部内容， 来源链接： utcz.com/qa/428017.html

回到顶部