个人中心
gpt4 book ai didi

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

转载 作者：IT王子 更新时间：2023-10-29 02:45:49 26 4
gpt4 key购买 nike

我试图在单击按钮时播放音频文件，但它不起作用，我的 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();
        });
    });
});

我创建了一个 Fiddle也是为了那个。

最佳答案

哪种方法？

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

我们用过的东西

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

没有.stop()音频元素的功能。我们只能暂停他们。当我们想从音频文件的开头开始时，我们更改其 .currentTime .我们将在示例中使用此行 audioElement.currentTime = 0; .实现.stop()函数我们首先暂停文件然后重置它的时间。

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

示例指南

  1. 当文档准备好后，我们动态创建了一个音频元素
  2. 我们将其源设置为我们要播放的音频。
  3. 我们使用“结束”事件再次启动文件。

When the currentTime is equal to its duration audio file will stop playing. Whenever you use play(), it will start from the beginning.

  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>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
</body>

关于javascript - 单击按钮时使用 jQuery 播放音频文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8489710/

26 4 0
文章推荐： javascript - 检查 TypeScript 的枚举中是否存在值
文章推荐： php - 当其中已经有内容时，如何获取 xml 标签的内部文本？
文章推荐： c# - 从 xml 中获取值(4 级)
文章推荐： javascript - 使用 Javascript 创建表
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com