个人博客，佛系更新

前言

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();  
}

加载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音量改变

音量改变时触发。

分类：

代码

标签：

html