audio API 事件
play() 视频播放
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>audio</style> audio{ wIDth:500px; } body> input type="button" value="播放" ID="ipt"> script> var myaudio=new Audio(); myaudio.src"data/imooc.mp3; ipt.onclickfunction(){ myaudio.play(); } HTML>
pause() 暂停
="暂停"="pau"(){ myaudio.play(); } pau.onclick(){ myaudio.pause(); } >
duration 返回音频总长度
canplay 音频加载完毕，可以播放
br> 时长：p ID="dura"></p(){ myaudio.pause(); } myaudio.addEventListener(canplay,(){ dura.INNERHTMLmyaudio.duration; }) >
currentTime 设置和获取音频的当前播放长度
当前时长：="curT"(){ myaudio.pause(); } myaudio.addEventListener(myaudio.duration; }) // 设置或返回音频长度 myaudio.currentTime20; setInterval((){ curT.INNERHTMLmyaudio.currentTime; },1)">100) >
volume 设置声音
; 设置声音 加不加引号都可以，范围在0-1 myaudio.volume0.5; myaudio.volume'; >
audio API事件2
currentSrc 返回当前地址
不能设置，只能获取
; myaudio.addEventListener((){ console.log(myaudio.currentSrc); }) >
ended 音频是否结束，返回布尔值
一般用于状态监听
ended(){ console.log(音频播放结束); console.log(myaudio.ended); }) >
loop 设置音频循环
true表示循环，false表示不循环
; myaudio.looptrue; >
playbackRate 音频倍速
默认为1
; console.log(myaudio.playbackRate); myaudio.playbackRate10>
timeupdate 音频播放状态
我测试的时候发现点击了暂停，依然会执行一次音频播放中
音频刚开始还没播放的时候不会执行
timeupdate音频播放中...); }) >
controls 默认控件显示
audio src="data/imooc.mp3" controlsaudio>
不同浏览器效果有区别
seeked 音频拖动完成
seeking 音频正在拖动
补充：在谷歌浏览器下拖动时，seeking触发次数会远远高于seeked
但在360或者火狐浏览器测试时，显示是一样的
controls ID="myaudio">seeked:span ="seekednum"span>seeking:="seekingNum"> seekednseekingN0; myaudio.addEventListener(seeked); seekedn++; seekednum.INNERHTMLseekedn; }) myaudio.addEventListener(seeking); seekingN; seekingNum.INNERHTMLseekingN; }) >
volumechange 声音改变事件
myaudio.addEventListener(volumechange声音改变了); }) >
audio API事件4
requestFullScreen 全屏
有浏览器前缀
注意只有在HTML里创建的audio标签才可以全屏
自己在Js里创建的audio对象不可以全屏
话说回来audio的全屏是 requestFullScreen
vIDeo的全屏是 requestFullscreen
两个大小写居然不是一致的，很迷……
button ="btn">全屏button btn.onclick(){ myaudio.webkitRequestFullScreen();可以全屏 } >
<!-- <audio src="data/imooc.mp3" controls ID="myaudio"></audio> --> audio Audio(); btn.onclick(){ audio.webkitRequestFullScreen();>
不过想想也是，控件都没有，还扯什么全不全屏……
load 音频重新加载，页面不刷新
>重新加载 btn.onclick(){ myaudio.load(); } >
另外，替换src属性也能起到重新加载的效果
(){ myaudio.src; myaudio.load();>
因此，想要实现重新加载的效果，有两种方法：
一种是load
一种是替换src属性
总结
以上是内存溢出为你收集整理的HTML5 audio API事件全部内容，希望文章能够帮你解决HTML5 audio API事件所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）