HTML5 audio 标签播放事件流程

此代码包括了html5 audio 标签整个播放流程。你可以暂停，调整音量，拖动进度条观察一下

var audio = new Audio();
document.body.appendChild(audio);if (!!audio){audio.src = "allofMe.mp3";// audio.autoplay = true;audio.controls = true;setTimeout(function () {console.log("media duration: " + audio.duration);console.log("media currentTime: " + audio.currentTime);console.log("media playbackrate: " + audio.playbackRate);console.log("media isAutoplay: " + audio.autoplay);console.log("media volume: " + audio.volume);console.log("media muted: " + audio.muted);console.log("media readystate: " + audio.readyState);  //0 = HAVE_NOTHING - 没有关于音频是否就绪的信息//1 = HAVE_METADATA - 关于音频就绪的元数据//2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒//3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的//4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放// audio.muted = true;// audio.currentTime = 5;  //从5秒开始播放audio.play();}, 5000);audio.addEventListener("loadstart", function () {     //当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时console.log("event loadstart: " + (new Date()).getTime());});audio.addEventListener("durationchange", function () {   //当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。console.log("event durationchange: " + (new Date()).getTime());});audio.addEventListener("loadedmetadata", function () {   //当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。console.log("event loadedmetadata: " + (new Date()).getTime());});audio.addEventListener("progress", function () {   //当浏览器正在下载指定的音频/视频时，会发生 progress 事件。console.log("event progress: " + (new Date()).getTime());});audio.addEventListener("suspend", function () {    //该事件在媒体数据被阻止加载时触发。 可以是完成加载后触发，或者因为被暂停的原因。console.log("event suspend: " + (new Date()).getTime());});audio.addEventListener("loadeddata", function () {   //当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件console.log("event loadeddata: " + (new Date()).getTime());});audio.addEventListener("canplay", function () {   //当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。console.log("event canplay: " + (new Date()).getTime());});audio.addEventListener("canplaythrough", function () {   //当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。console.log("event canplaythrough: " + (new Date()).getTime());});audio.addEventListener("play", function () {   //开始播放时触发console.log("event play: " + (new Date()).getTime());});audio.addEventListener("playing", function () {   // 开始回放console.log("event playing: " + (new Date()).getTime());});audio.addEventListener("timeupdate", function () { //播放时间改变   这个会一直打印// console.log("event timeupdate: " + (new Date()).getTime());});audio.addEventListener("pause", function () {   // 暂停时会触发，当播放完一首歌曲时也会触发console.log("event pause: " + (new Date()).getTime());});audio.addEventListener("ended", function () {   //当播放完一首歌曲时也会触发console.log("event ended: " + (new Date()).getTime());});audio.addEventListener("abort", function () {     //客户端主动终止下载（不是因为错误引起）console.log("event abort: " + (new Date()).getTime()) ;});audio.addEventListener("error", function () {   //请求数据时遇到错误console.log("event error: " + (new Date()).getTime());});audio.addEventListener("stalled", function () {   //网速失速console.log("event stalled: " + (new Date()).getTime());});audio.addEventListener("waiting", function () {   //等待数据，并非错误console.log("event waiting: " + (new Date()).getTime());});audio.addEventListener("seeking", function () {  //寻找中console.log("event seeking: " + (new Date()).getTime());});audio.addEventListener("seeked", function () { //寻找完毕console.log("event seeked: " + (new Date()).getTime());});audio.addEventListener("ratechange", function () {  //播放速率改变console.log("event ratechange: " + (new Date()).getTime());});audio.addEventListener("volumechange", function () {    //音量改变console.log("event volumechange: " + (new Date()).getTime());});
}

HTML5 audio 标签播放事件流程相关推荐

HTML5 VIDEO标签播放事件流水
HTML5 的 <video>标签有许多默认的事件,如果我们通过这个播放器加载一段视频文件,从开始加载到播放结束,都经历了哪些事件呢?这些事件的触发顺序如何? [1]HTML5:onpla ...
HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函 ...
HTML5 audio 标签-在html中定义声音的标签
2019独角兽企业重金招聘Python工程师标准>>> 本文来源 169it HTML 5 <audio> 标签定义和用法 <audio> 标签定义声音,比如 ...
HTML5 Audio/标签Api整理（二）
1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...
html5 audio音频播放全解析
html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash 意思是当你没有给浏 ...
html5 audio音频播放器
html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash 意思是当你没有给浏 ...
html5 audio样式修改,html5audio美化 html5 audio 顺序播放
如何修改HTML5 audio 的样式写的时候不要用controls, 然后自己写div或者a标签,定义样式. 再用js捕获audio事件就可以了. 基本就是src pause暂停 load加载 p ...
Javascript控制html5 Audio标签
Javascript控制html5 Audio标签 9 Replies 在上一篇文章:Html5 audio标签(属性)的使用详解中已经把关于audio标签的如何使用以及支持属性说清楚了.这里写篇文章 ...
html5比html4的音频使用方法,HTML5 audio标签的用法示例
您的位置:首页 - 教程 - HTML5 - 正文 HTML5 audio标签的用法示例标签定义声音,比如音乐或其他音频流.html5 audio可以不用Flash插件就可以听音乐看视频,并不是全部 ...

HTML5 audio 标签播放事件流程

HTML5 audio 标签播放事件流程相关推荐

最新文章

热门文章

HTML5 audio 标签 播放事件流程

HTML5 audio 标签 播放事件流程相关推荐

最新文章

热门文章

HTML5 audio 标签播放事件流程

HTML5 audio 标签播放事件流程相关推荐