当前第2页返回上一页

1	`var percentLoaded = Math.floor(song.buffered.end(0)/song.duration*100)`

下面三个布尔属性表示媒体播放器的状态

paused 是否暂停
seeking 是否正调到一个新的播放点
ended 是否播放结束并停止

并不是所有浏览器都支持video和audio的所有编解码器
canPlayType()方法就是用来鉴定时候支持某一格式的媒体资源
返回字符串maybe、probably或空字符串
如果只传入MIME类型，则返回maybe
如果同时传入MIME类型和编解码器，则返回probably（可能性增加了）
只是因为媒体文件只不过是音/视频的容器
真正决定文件能否播放的还得是编码格式

console.log(a.canPlayType('audio/mp4')); 
//maybeconsole.log(a.canPlayType('audio/mp4;codecs="mp4a.40.2"')); 
//probably

下面的状态位属性也了解一下

readyState 就绪状态

0 = HAVE_NOTHING - 没有关于音/视频是否就绪的信息
1 = HAVE_METADATA - 关于音频/视频就绪的元数据
2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/ms
3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据可用
4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

netWorkState 网络状态

0 = NETWORK_EMPTY - 音/视频尚未初始化
1 = NETWORK_IDLE - 音/视频是活动的且已选取资源，但并未使用网络
2 = NETWORK_LOADING - 浏览器正在下载数据
3 = NETWORK_NO_SOURCE - 未找到音/视频来源

error.code 错误状态

1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
2 = MEDIA_ERR_NETWORK - 当下载时发生错误
3 = MEDIA_ERR_DECODE - 当解码时发生错误
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频

事件

除了接口属性方法以外
还有必不可少的事件模型
如果我们不想使用浏览器的控件而是定义自己的播放控制组件
就要使用这套事件了

play 播放时触发
pause 暂停时触发
loadedmetadata 浏览器获取完媒体元数据时触发
loadeddata 浏览器加载完当前帧媒体数据时触发
ended 播放结束后停止时触发

初次之外还有很多事件
很多不常用
在w3c截了一张图

通过接口与事件
也可以简单的实现自己简陋的音乐播放器

1	`<button` `id="btn">播放</button><span` `id="cur">0s</span>/<span` `id="dur">0s</span><br>音量：<input` `type="range"` `id="vol">`

var audio = new Audio('media/xi-Halcyon.mp3');
var btn = document.getElementById('btn');
var vol = document.getElementById('vol');
var cur = document.getElementById('cur');
var dur = document.getElementById('dur');var state = 'pause';
 
vol.value = 100;
audio.onloadeddata = function(){
  dur.textContent = Math.floor(audio.duration) + 's';
}
 
setInterval(function(){
  cur.textContent = Math.floor(audio.currentTime) + 's';
}, 200);
 
btn.onclick = function(){
  if(state === 'play'){
    state = 'pause';
    btn.textContent = '播放';
    audio.pause();
  }else{
    state = 'play';
    btn.textContent = '暂停';
    audio.play();
  }
}
 
 
vol.oninput = function(){
  audio.volume = vol.value/100;
}