栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

哪种方法?

您可以使用

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/442230.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号