AUDIO标签详细解读

过程

前情提要

这篇是昨天写的，可是思否的文本编辑器太反人类了，昨天懒得改，因此今天才发。我没有中断个人连续水博客计划哦~

这两天弄了个基于Vue的音乐播放器，由于最近好多人作我也就跟着学了学。尚未很完善，在audio这里玩了好久。之前都没用过audio标签。

重点

前言

audio标签是HTML5中新增的标签之一。能够看看HTML5以前怎么导入音频。

网页内播放能够用embed导入，可是embed标签过不了HTML4的validation。下面这个用了vue绑定src。

<embed height="50" width="100" :src="songUrl"\>

audio标签概述

用来定义声音。

下面看看属性们。测试的时候手上没有音乐的话src能够用个人

https://tianyitimothy.github.io/resources/arcs.mp3

属性

src

用来指定音乐的路径。Demo:

<audio src="song.mp3">  
 能看到说明不支持  
</audio>

但你会发现用了上面的代码，并不会显示。这是由于没有自定义界面，也没有加上controls属性。

controls

用来指定是否显示默认的音乐面板。Demo:

<audio src="song.mp3" controls></audio>

这样浏览器会显示audio标签的默认播放面板。也能够写做:

<audio src="song.mp3" controls="controls"></audio>

controls默认是没有的，而后值又只有一个"controls"，不加他就不会显示面板。可是如今autoplay属性都已经禁止使用了，只有本身自定义的话才会不须要controls。

loop

存在此属性则开启循环。值只有"loop"。Demo:

<audio src="song.mp3" controls loop></audio>

muted

存在此属性则静音。值只有"muted"。Demo:

<audio src="song.mp3" controls muted></audio>

preload

设定音频的预加载方式。

="auto":自动加载，页面加载后载入整个音频

="metadata":自动加载，页面加载后只载入元数据

="none":不自动加载

PS 手机端的preload会被无视，具体默认值是什么没测试~盲猜全部内核都是none吧~

Demo:

<audio src="song.mp3" controls preload="none"></audio>

JS操做

拿到audio标签

就是得到DOM。Demo:

const audioDOM = document.getElementById("audio");

当前播放时间currentTime

currentTime属性可读可写。返回当前播放时长，单位是秒。能够经过修改它来实现倒退or前进x秒，倒退5秒Demo:

const audioDOM = document.getElementById("audio");  
if (audioDOM.currentTime > 5) {  
 audioDOM.currentTime -= 5;  
} else {  
 audioDOM.currentTime = 0;  
}

音频总时长duration

duration属性是可读属性。返回音频总时长，单位是秒。要注意在load()方法以前，duration的值为NaN。用法伪代码:

const audioDOM = document.getElementById("audio");  
if (isNaN(audioDOM.duration)) {  
 // 未加载时的操做  
} else {  
 // 已加载时的操做  
}

音量volume

volume属性可读可写。返回当前音量，最小是0（静音），最大音量是1。能够经过修改它来实现音量增长or减小的按钮。加10%音量Demo:

const audioDOM = document.getElementById("audio");  
if (audioDOM.volume < 0.9) {  
 audioDOM.volume += 0.1;  
} else {  
 audioDOM.volume = 1;  
}

音量有时候会变成7.99999999这样的奇葩数字...很奇葩，可是用户来讲没有任何影响。

播放速率playbackRate

playbackRate就是播放速率，可读可写，返回播放速度，值是速度的倍率，最大播放速度根据内核的不一样而有所不一样，可是正常来讲2倍已经够用了。选择速度Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
// 不是数字  
if(isNaN(rate)){  
 return;  
}  
rate = parseInt(rate);  
const minRate = 0.5;  
const maxRate = 2;  
if (rate <= maxRate && rate >= minRate) {  
 audioDOM.playbackRate = rate;  
} else if (rate < minRate) {  
 audioDOM.playbackRate = minRate;  
} else {  
 audioDOM.playbackRate = maxRate;  
}

播放play()

使用播放方法让暂停了的音频播放。Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
audioDOM.play();

诶看到这个是否是很心动，autoplay属性被取缔了，那我直接在window.onload里面用play()开始播放不就行了吗？不。若是用户没有“跟页面互动”就会报错！

"Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first."

暂停pause()

使用暂停方法让正在播放的音频暂停。Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
audioDOM.pause();

是否暂停paused

paused属性是可读属性，返回boolean值：若音频是暂停状态，返回true；反之返回false。经过paused实现播放/暂停Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
if (audioDOM.paused === true) {  
 audioDOM.play();  
} else {  
 audioDOM.pause();  
}

暂停pause()

使用播放方法让暂停了的音频播放。Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
audioDOM.play();

加载load()

若是前面没设置preload或者设置了preload为none，能够用这个方法来触发加载。

加载的生命周期（按前后顺序排序）

实际上是能够被监听的事件们，监听伪代码:

myAudio.addEventListener("loadstart", function() {  
 // 当这个事件触发的时候干吗呢~  
});

loadstart开始加载

开始加载音频了。

durationchange时长改变

音频的时长改变了。

loadedmetadata元数据加载完毕

能够用做判断“音频初始化”的方法。固然初始化也能够用duration属性是否为NaN或者durationchange来判断，看需求了。

loadeddata数据开始加载

"The loadeddata event is fired when the first bit of media arrives."在加载了第一位(bit)的文件时触发。我感受这个名字取得很差，loadeddata更像是数据已经加载完了。然而加载完了的事件是canplaythrough`。

progress加载中

音频还在加载中。loader能够在这里部署。

canplay能够播放

音频能够播放了。能够在这个事件触发以后再把controls设置为能够操做的。

canplaythrough能够播放整个音频

音频加载彻底完成了！

播放事件

timeupdate时间更新

这个time指的是currentTime ，最频繁是“每250毫秒触发一次”。

waiting等待中

因为没有数据而致使暂停时触发。

playing播放中

从waiting状态转换到能够播放的状态时触发。

play播放

play()方法被调用时触发。

pause暂停

pause()方法被调用时触发。

ended结束

音频播放完毕后触发。

volumechange音量改变

音量改变时触发。

尾巴

1. 什么？？！你要找的这里没有？那来读读文档吧！我略过了一些~
2. 好比有一个canplaytype我就没写，由于我本身只在用mp3格式，也就懒得一个个type去测试了~
3. 个人自定义界面要留到之后水博客的时候再写~
4. 我又又又又又又又通宵了。