audio元素和video元素

audio:

autoplay

audio	含义
autoplay	自动播放（chrom 66 已禁止）
loop	是否循环播放
controls	是否显示控件
preload	预加载（auto metadata none）
volume	音量（0~1之间）
playbackRate	快放慢放（大于1快进，小于1慢进）
currentTime	当前时间（可用于时间跳转比如快进多少多少）
duration	持续时间当前进度条时长
played	返回已经播放(看过)的时间段
buffered	返回当前已经缓冲的时间段
seekable	则返回用户可以跳转的时间段
paused	paused为true表示播放器暂停
seeking	seeking为true表示播放器正在调到一个新的播放点
ended	ended为true表示播放器播放完媒体并且停下来

使用方式：

<audio src="music1.mp3" contrls autoplay preload="auto"></audio>

1、autoplay 自动播放

<audio src="成都.mp3" autoplay></audio>

2、controls 设置控件

<audio src="成都.mp3" autoplay controls></audio>

3、preload(none/metadata/auto)

预加载，规定是否在页面加载后载入视频

none 不需要加载数据
metadata 元数据诸如时长、比特率、帧大小这样的原数据，而不是媒体内容需要加载的

比如当前媒体时长比特率帧大小

auto 浏览器应当加载它认为适量的媒体内容

<audio src="成都.mp3" autoplay controls preload="auto"></audio>

4、loop 是否循环播放音/视频

<audio src="成都.mp3" autoplay controls loop preload="auto"></audio>

5、poster (video 独有) 封面

当视频不可用时，使用一张图片替代，否则是空白如果不设置poster ，会默认黑屏或是截取中间或是开头的画面。建议设置

audio video 通用的属性

contrls（是否显示控件）
autoplay（是否自动播放）
loop（是否循环播放）
preload（是否预加载默认自动加载 preload=”auto”）

脚本化实现

脚本化音频：

方式：

var audio = document.getElementById(‘audio’);

获取元素节点
var audio = new Audio(‘./laojie.mp3’);

new一个audio对象。但是不能new Video(“./video.mp4”)
var audio = document.createElement(‘video’);

创建一个audio节点

demo:

<button id="but1">暂停</button>
<button id="but2">播放</button>

var audio = new Audio();

audio.src = "1.mp3"

audio.autoplay = "true";
console.log(audio.autoplay)
audio.controls = true;
audio.loop = 'loop';
audio.preload = 'auto';

window.onload = function(){
    console.log(audio.currentSrc)
}
but1.onclick = function(){
    audio.pause()
}
but2.onclick=function(){
    console.log("播放")
    audio.play()
}

document.body.appendChild(audio)

注意 chrom 66更新后禁止了网页音频视频自动播放的效果，如果要引导用户使用默认的控件播放，可以使用meted属性。（muted 静音引导用户自己点击播放）

另外，audio没有onload事件，可以用window.onload实现

音量操控 audio.volume 属性

表示播放音量，介于0(静音)~1(最大音量)之间，默认1。将muted属性设置为true则会进入静音模式，设置为false则会恢复之前指定的音量继续播放。

超过范围会报错[0, 1]

demo：

var audio = new Audio();

audio.src = "1.mp3"

audio.autoplay = "true";
console.log(audio.autoplay)
audio.controls = true;
audio.loop = 'loop';
audio.preload = 'auto';

window.onload = function(){
    // audio.currentSrc 当前音频的src地址 
    console.log(audio.currentSrc)
}
but1.onclick = function(){
    audio.pause()
}
but2.onclick=function(){
    console.log("播放")
    audio.play()
}

document.body.appendChild(audio)

将音量设为最小：无限接近 0

 audio.volume = 0.000000001  // 无限接近 0

播放速度 playbackRate

用于指定媒体播放的速度。该属性值为1.0表示正常速度，大于1则表示”快进”，0~1之间表示”慢放”，负值表示回放。

每个浏览器实现的会有差别，具体看浏览器实现

小总结：

快进：速度 > 1
慢放： 1 > 速度 > 0

currentTime/duration属性

currentTime：当前时间 duration：持续时间，视频/音频时长

currentTime 设置或返回音频/视频播放的当前位置
duration 返回当前音频/视频的时长(window.onload)
单位秒

played/buffered/seekable

played属性返回已经播放(看过)的时间段
buffered属性返回当前已经缓冲的时间段
seekable属性则返回用户可以跳转的时间段

这三个属性都是TimeRanges对象，每个对象都有一个length属性以及start()和end()方法，length属性表示当前的一个时间段，start()与end()分别返回当前时间段的起始时间点和结束时间点(单位是秒，起始参数是0)

下面代码确定当前缓存内容的百分比：

paused/seeking/ended

这三个属性用来查询媒体播放状态

paused为true表示播放器暂停。

可以利用这个把播放和暂停结合到一起
seeking为true表示播放器正在调到一个新的播放点

表示播放进度有改动
如果播放器播放完媒体并且停下来，则ended属性为true。

利用这个可以实现播放下一曲

Kam on iBlog

脚本化音乐播放器视频播放器