JS 音/视频

HTML5 DOM为<audio>和<video>元素提供了方法、属性和事件。

[ 方法 ]

01. canPlayType() 检测浏览器是否能播放指定的音频或视频类型，返回值为下列之一：

'probable':浏览器最可能支持该类型
'maybe':浏览器也许支持该类型
'':浏览器不支持该类型

常用值
video/ogg
video/mp4
video/webm
audio/mpeg
audio/ogg
audio/mp4
video/ogg;codecs="theora,vorbis"
video/mp4;codecs="avc1.4D401E,mp4a.40.2"
video/webm;codecs="vp8.0,vorbis"
audio/ogg;codecs="vorbis"
audio/mp4;codecs="mp4a.40.5"

<audio id="audio" src="song.mp3"></audio>    
<script>
var audio = document.getElementById('audio');
//probably
console.log(audio.canPlayType('video/ogg;codecs="theora,vorbis"'));
</script>

02. load()  重新加载音频或视频元素，用于在更改src来源或其他设置后对音频或视频元素进行更新。

<audio id="audio" src="song.mp3" autoplay controls></audio>    
<script>
    var audio = document.getElementById('audio');
    audio.src = 'myocean.mp3';
    audio.load();
</script>

03. play()  开始播放音频或视频。

04. pause()  暂停当前播放的音频或视频。

<button onclick = 'audio.play();'>播放</button>
<button onclick = 'audio.pause();'>暂停</button>
<audio id="audio" src="myocean.mp3" controls></audio>

[ 属性 ]

所有属性中，只有videoWidth和videoHeight是立即可用的，在音视频的元数据加载后，其他属性才可用。

[1] 只读

01. buffered

buffered.length        获取已缓冲范围的数量
buffered.start(index)  获取某个已缓冲范围的开始位置
buffered.end(index)    获取某个已缓冲范围的结束位置
buffered.end(0)        获取当前已缓冲的秒数

<button>获取缓冲时间</button>
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
    alert(audio.buffered.end(0));
}
</script>

02. currentSrc  返回当前音频或视频的URL。

<audio id="audio" src="https://demo.xiaohuochai.site/myocean.mp3" controls></audio>
<script>
var audio = document.getElementById('audio');
//https://demo.xiaohuochai.site/myocean.mp3
setInterval(function(){
    console.log(audio.currentSrc);    
},1000); 
</script>

03. ended  返回音频或视频是否已结束。

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.ended);
}    
</script>

04. duration  返回当前音频或视频的长度(以秒计)，如果未设置则返回NaN。

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
//NaN
console.log(audio.duration);
//317.022041
setTimeout(function(){
    console.log(audio.duration);
},1000);

05. networkState  返回音频或视频当前网络状态。

networkState:0(尚未初始化)
networkState:1(已选取资源，但并未使用网络)
networkState:2(正在下载数据)
networkState:3(未找到资源来源)

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
//3
console.log(audio.networkState)
//1
document.onclick = function(){
    console.log(audio.networkState);
}
</script>

06. paused  返回音频或视频是否已暂停。

paused:true;(已暂停)
paused:false;(未暂停)

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
console.log(audio.paused)
document.onclick = function(){
    console.log(audio.paused);
}
</script>

07. played  已播范围是指音频或视频的时间范围。如果用户在音频或视频中跳跃，会获得多个播放范围。

played.length(获得音频或视频已播放范围的数量)
played.start(index)(获得某个已播范围的开始位置)
played.end(index)(获得某个已播范围的结束位置)

// 首段已播范围的下标是0

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.played.end(0));
}
</script>

08. readyState  返回音频或视频的当前就绪状态。

readyState:0(没有关于音频或视频是否就绪的信息)
readyState:1(关于音频或视频就绪的元数据)
readyState:2(关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧)
readyState:3(当前及至少下一帧的数据是可用的)
readyState:4(可用数据足以开始播放)

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
//0
console.log(audio.readyState);
//4
document.onclick = function(){
    console.log(audio.readyState);
}
</script>

09. seekable  返回可寻址范围，可寻址范围是指用户在视频或音频中可寻址(移动播放位置)的时间范围。

对于流视频，通常可以寻址到视频中的任何位置，即使其尚未完成缓冲。

seekable.length(获得音频或视频中可寻址范围的数量)
seekable.start(index)(获得可寻址范围的开始位置)
seekable.end(index)(获得可寻址范围的结束位置)

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.seekable.end(0));
}
</script>

10. seeking

seeking:true(用户正在寻址)
seeking:false(用户没有在寻址)

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
audio.onseeking = function(){
    console.log(audio.seeking);    
}    
</script>

[2] 可读写

01. autoplay

autoplay:false(默认，不自动播放)
autoplay:true(自动播放)

02. controls

controls:false(默认，不显示控件)
controls:true(显示控件)

03. crossOrigin  设置或返回CORS设置。

04. currentTime  设置或返回音频或视频的当前位置(以秒计)。

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
var audio = document.getElementById('audio');
document.onclick = function(){
    console.log(audio.currentTime);    
    audio.currentTime = 5;
    console.log(audio.currentTime);
}; 
</script>

05. defaultMuted（只有chrome支持）

defaultMuted:true(初始静音)
defaultMuted:false(默认，初始不静音)

audio.defaultMuted = true;

06. muted

muted:true(静音)
muted:false(不静音)

<button onclick="audio.muted = !audio.muted">音量开关</button>
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>

07. defaultPlaybackRate

defaultPlaybackRate:1(正常速度)
defaultPlaybackRate:0.5(半速)
defaultPlaybackRate:2(倍速)
defaultPlaybackRate:-1(向后正常速度)
defaultPlaybackRate:-0.5(向后半速)

var audio = document.getElementById('audio');
setTimeout(function(){
    audio.defaultPlaybackRate = 0.5;
    audio.load();    
},1000);

08. playbackRate

playbackRate:1(正常速度)
playbackRate:0.5(半速)
playbackRate:2(倍速)
playbackRate:-1(向后正常速度)
playbackRate:-0.5(向后半速)

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
var array = [-1,-0.5,0.5,1,2];
var i = 0;
var audio = document.getElementById('audio');
document.onclick = function(){
    audio.playbackRate = array[i];
    console.log(audio.playbackRate);
    i++;
    i=i%5;
}

09. loop

loop:true(循环播放)
loop:false(默认，不循环播放)

10. preload  设置或返回是否在页面加载后立即加载音频或视频。  // 另，当设置autoplay时，该属性无效。

preload:auto;(一旦页面加载，则开始加载音频或视频)
preload:metadata;(当页面加载后仅加载音频或视频的元数据)
preload:none;(页面加载后不加载音频或视频)

11. src  设置或返回音频或视频的当前来源。

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>
console.log(audio.src);
document.onclick = function(){
    console.log(audio.src);
    audio.src = 'https://demo.xiaohuochai.site/song.mp3';
    audio.load();
    console.log(audio.src);
}    
</script>

12. volume  设置或返回音频或视频的当前音量。

volume(取得为0-1，0为静音，1为最大，默认为1)

<button onclick = "if(audio.volume<=0.9)audio.volume+=0.1;">增大音量</button>
<button onclick = "if(audio.volume>=0.1)audio.volume-=0.1;">减小音量</button>
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>

[ 事件 ]

当音频或视频正在加载过程中，会依次发生以下事件：

loadstart:提示浏览器开始寻找指定的音频或视频
progress:提示浏览器正在下载指定的音频或视频
durationchange:提示音频或视频的时长已改变
loadedmetadata:提示音频或视频的元数据已加载
loadeddata:提示音频或视频的当前帧已加载，但没有足够数据播放下一帧
canplay:提示浏览器能够开始播放指定的音频或视频
canplaythrough:提示音频或视频能够不停顿地一直播放
progress:提示浏览器正在下载指定的音频或视频

<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio>
<script>    
audio.onloadstart = function(){
    console.log('loadstart');
}
audio.ondurationchange = function(){
    console.log('durationchange');
}    
audio.onloadedmetadata = function(){
    console.log('loadedmetadata');
}    
audio.onloadeddata = function(){
    console.log('loadeddata');
}    
audio.onprogress = function(){
    console.log('progress');
}    
audio.oncanplay = function(){
    console.log('canplay');
}    
audio.oncanplaythrough = function(){
    console.log('canplaythrough');
}    
</script>

影响音频或视频数据加载的事件有以下几个：

abort:在音频或视频终止加载时触发
error:在音频或视频加载发生错误时触发
stalled:在浏览器尝试获取媒体数据，但数据不可用时触发
suspend:在音频或视频数据被阻止加载时触发(可以是完成加载后触发，或者因为被暂停)
empted:在发生故障并且文件突然不可用时触发

<video id="video" src="https://webpiece.cn/movie.mp4" controls></video>
<script>
setTimeout(function(){
    video.src='';
},2000);    
video.onabort = function(){
    console.log('abort');
}
video.onerror = function(){
    console.log('error');
}    
video.onstalled = function(){
    console.log('stalled');
}    
video.onsuspend = function(){
    console.log('suspend');
}    
video.onemptied = function(){
    console.log('emptied');
}
</script>

音频或视频控制按钮发生改变时触发以下事件:

play:音频或视频文件已经就绪可以开始播放时触发
playing:音频或视频已开始播放时触发
ended:音频或视频文件播放完毕后触发
pause:音频或视频文件暂停时触发
ratechange:播放速度改变进触发
seeked:指示定位已结束时触发
seeking:正在进行指示定位时触发
timeupdate:播放位置改变时触发[注意:播放和调整指示定位时都会触发]
volumechange:音量改变时触发
waiting:需要缓冲下一帧而停止时触发

<audio id="audio" src="/honey.mp3" controls></audio>
<script>    
var i = 1;
document.onclick = function(){
    i+=0.1;
    audio.playbackRate = i;
}
audio.onended = function(){
    console.log('ended');
}
audio.onpause = function(){
    console.log('pause');
}    
audio.onplay = function(){
    console.log('play');
}    
audio.onplaying = function(){
    console.log('playing');
}    
audio.onratechange = function(){
    console.log('ratechange');
}    
audio.onseeked = function(){
    console.log('seeked');
}    
audio.onseeking = function(){
    console.log('seeking');
}    
audio.ontimeupdate = function(){
    console.log('timeupdate');
}    
audio.onvolumechange = function(){
    console.log('volumechange');
}    
audio.onwaiting = function(){
    console.log('waiting');
}    
</script>

[ audio专有 ]

audio元素在一个原生的JavaScript构造函数Audio，可以在任何时候播放音频。audio和img很像，但audio不用像img那样必须插入到文档中，只要创建一个新实例，并传入音频源文件即可。

var audio = new Audio('test.mp3');

<script>
var audio = new Audio('https://webpiece.cn/honey.mp3');
audio.oncanplaythrough = function(){
    audio.controls = true;
    document.body.appendChild(audio);
}
</script>