过程总结这篇文章是昨天写的，但是师父的文本编辑器太反人类了，昨天懒得改了，所以今天才贴出来。没打断我连续流水的博文计划~这两天做了一个基于vue的音乐播放器，因为最近很多人都在做，所以我也跟着做了。它还不完美，我已经玩了很长时间的音频。以前从未使用过音频标签。重点前言audio标签是HTML5中的新标签之一。您可以看到如何在HTML5之前导入音频。网页中的播放可以通过embed导入，但是embed标签无法通过HTML4验证。下面这个是用vue绑定src的。audio标签轮廓用于定义声音。让我们看看属性。如果测试时手头没有音乐，src可以使用我的https://tianyitimothy.github.io/resources/arcs.mp3属性src来指定音乐的路径。Demo:可以看到不支持但是你会发现用了上面的代码，并不会显示。这是因为没有自定义界面，也没有添加控件属性。控件用于指定是否显示默认音乐面板。演示：这样浏览器就会显示audio标签的默认播放面板。也可以写成：controls默认没有，取值只有一个“controls”。如果不添加，面板将不会显示。但是现在autoplay属性已经被禁止了，只有自己自定义才不需要控件。loop如果此属性存在，则启用循环。该值只是“循环”。Demo:muted如果该属性存在，音频将被静音。该值只是“静音”。Demo:preload设置音频预加载方式。="auto":自动加载，页面加载后加载全部音频="metadata":自动加载，页面加载后仅加载元数据="none":不自动加载PS移动端预加载terminal会被忽略，具体默认值什么没测试过~瞎猜所有内核都是none~Demo:JS操作获取音频标签是获取DOM。演示：constaudioDOM=document.getElementById("audio");当前播放时间currentTimecurrentTime属性可读可写。以秒为单位返回当前播放持续时间。它可以修改为后退或前进x秒，后退5秒。演示：constaudioDOM=document.getElementById("audio");如果(audioDOM.currentTime>5){audioDOM.currentTime-=5;}else{audioDOM.当前时间=0；总音频持续时间durationduration属性是一个可读属性。返回音频的总持续时间，以秒为单位。请注意，在load()方法之前，持续时间为NaN。使用伪代码：constaudioDOM=document.getElementById("audio");if(isNaN(audioDOM.duration)){//未加载时的操作}else{//加载时的操作}volumevolumevolume属性可读Write.返回当前音量，最小为0（静音），最大为1。可以修改实现音量加减按钮。添加10%音量演示：constaudioDOM=document.getElementById("audio");如果(audioDOM.volume<0.9){audioDOM.volume+=0.1;}else{audioDOM.volume=1;}音量有时会变成7。像99999999这样奇怪的数字。。。很奇怪，但是对用户没有影响。播放速率playbackRateplaybackRate为播放速率，可读可写，返回播放速度。该值是速度的倍数。最大播放速度因内核而异，但通常2倍就足够了。选择速度Demo://getdomconstaudioDOM=document.getElementById("audio");//不是数字if(isNaN(rate)){return;}rate=parseInt(rate);constminRate=0.5;constmaxRate=2;if(rate<=maxRate&&rate>=minRate){audioDOM.playbackRate=rate;}elseif(rate
