html页面点击按钮播放语音,javascript – 当点击按钮时使用jQuery播放音频文件

ゝ一世哀愁。 2022-10-06 00:44 260阅读 0赞

哪种方法？

您可以使用< 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', '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

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关 html 按钮点击倒计时，限制不可点击

html 按钮点击倒计时，限制不可点击 ![format_png][] e94cbabd25cfc7f3f53a50a235734c22.jpg <!DOCTYP

小鱼儿/ 2024年03月27日 18:44/ 0 赞/ 63 阅读

相关按钮—按钮点击特效

按钮—按钮点击特效 ![在这里插入图片描述][2021041819283044.gif_pic_center] <!DOCTYPE html> <htm

谁借莪１个温暖的怀抱￠/ 2023年01月13日 10:54/ 0 赞/ 270 阅读

相关点击按钮js页面添加html,怎么样获得点击网页某按钮时触发JavaScript的代码?(有实例)...

!DOCTYPE htmlhtml head meta http-equiv=Content-Type content=text/html; charset=UTF-8 tit

以你之姓@/ 2022年10月06日 03:59/ 0 赞/ 159 阅读

相关 html页面点击按钮播放语音,javascript – 当点击按钮时使用jQuery播放音频文件

哪种方法？您可以使用< audio>播放音频。标签或< object>或< embed>。延迟加载(当你需要它的负载)的声音是最好的方法，如果它的大小很小。您可以动态创

ゝ一世哀愁。/ 2022年10月06日 00:44/ 0 赞/ 261 阅读

相关 HTML中jquery控制button按钮可点击、不可点击

HTML中jquery控制button按钮可点击、不可点击 1.首先来说button按钮不可点击 1.1第一种（html代码中控制） \[cpp\] [view pla

小灰灰/ 2022年05月27日 06:56/ 0 赞/ 434 阅读

相关 javascript点击按钮循序和循环播放轮播图片

循序和循环播放轮播图片 <style> { padding: 0; ma

爱被打了一巴掌/ 2022年02月02日 11:29/ 0 赞/ 232 阅读

相关 ng 点击按钮下载文件

const a = document.createElement('a'); // 创建a标签 document.body.appendChild(a); //

淩亂°似流年/ 2022年01月07日 10:41/ 0 赞/ 264 阅读

相关 HTML中jquery控制button按钮可点击、不可点击

HTML中jquery控制button按钮可点击、不可点击 1.首先来说button按钮不可点击 1.1第一种（html代码中控制） <button id="button

朴灿烈づ我的快乐病毒、/ 2021年11月26日 07:50/ 0 赞/ 1059 阅读

相关 Html点击按钮时修改某个标签的 click点击事件

解决的问题：当图片点击时给另外一个div里面的li标签赋予点击事件主要核心代码 $(".delMember").attr('onclick', '').un

谁践踏了优雅/ 2021年11月22日 23:06/ 0 赞/ 682 阅读

相关 jquery自动点击按钮

jquery自动点击按钮 $(document).ready(function()\{ $("\imgcode\_img").tr

系统管理员/ 2021年09月12日 07:34/ 0 赞/ 553 阅读