html5 音乐播放器 audio 标签使用概述

dacldeya101411

dacldeya101411

2016-02-19 10:37

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

代码如下:

audio 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条
audioid="media"src="http://www.abc.com/test.mp3"controls/audio
video 标签属性:src:视频的URLposter:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高度
videoid="media"src="http://www.abc.com/test.mp4"controls width="400px"heigt="400px"/video

获取HTMLVideoElement和HTMLAudioElement对象

代码如下:

//audio可以直接通过new创建对象
Media = newAudio("http://www.abc.com/test.mp3");
//audio和video都可以通过标签获取对象
Media = document.getElementById("media");

Media方法和属性:
HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

代码如下:

//错误状态
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
Media.currentSrc; //返回当前资源的URL
Media.src = value; //返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放某种格式的资源
Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
Media.load(); //重新加载src指定的资源
Media.buffered; //返回已缓冲区域,TimeRanges
Media.preload; //none:不预载 metadata:预载资源信息 auto:
//准备状态
Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //是否正在seeking
//回放状态
Media.currentTime = value; //当前播放的位置,赋值可改变位置
Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
Media.playbackRate = value;//当前播放速度,设置后马上改变
Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
//TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
事件:
eventTester = function(e){
Media.addEventListener(e,function(){
console.log((newDate()).getTime(),e);
});
}
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据,并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变

自己写的一段js:

代码如下:

$(function() {
var p = new Player();
p.read("play");
$("#stop").click(function() {
p.pause();
});
$("#start").click(function() {
p.play();
});
$("#show").click(function() {
alert(p.duration());
});
setInterval(function() {
$("#currentTime").text(p.currentTime());
},1000);
});
function Player() {};
Player.prototype = {
box : new Object(),
read : function(id) {
this.box = document.getElementById(id);
},
play : function() {
this.box.play();
},
pause : function() {
this.box.pause();
},
src:function(url){
this.box.src=url;
},
currentTime:function(){
return (this.box.currentTime/60).toFixed(2);
}
};
Player.prototype.duration=function(){
return (this.box.duration/60).toFixed(2);
};
展开更多 50%)
分享

猜你喜欢

html5 音乐播放器 audio 标签使用概述

Web开发
html5 音乐播放器 audio 标签使用概述

HTML5 MiranaVideo播放器 (代码开源)

Web开发
HTML5 MiranaVideo播放器 (代码开源)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

7款很棒的 HTML5 视频播放器

Web开发
7款很棒的 HTML5 视频播放器

html5 标签

Web开发
html5 标签

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML5 Canvas标签使用收录

Web开发
HTML5 Canvas标签使用收录

仿酷狗html5手机音乐播放器主要部分代码

Web开发
仿酷狗html5手机音乐播放器主要部分代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jps是什么文件格式

jps是什么文件格式

Javascript中暂停功能的实现代码

Javascript中暂停功能的实现代码
下拉加载更多内容 ↓