Audio标签常用属性

前景过程：

在经历了一个星期的小项目，在做网易云音乐的时候，补充了新的知识点：audio的属性的使用。

audio标签概述：

用来定义声音。下面看看属性们。测试的时候手上没有音乐的话src可以用我的

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

H5中操作

src属性

用来指定音乐的路径，但你会发现用了下面的代码，并不会显示。这是因为没有自定义界面，也没有加上controls属性。

 <audio src="https://tianyitimothy.github.io/resources/arcs.mp3">
</audio>

controls属性

给音乐添加控制功能按钮，这个控制面板是个默认的控制面板，当你打开音乐是可以直接点击播放的，并不是静音的。

 <audio src="https://tianyitimothy.github.io/resources/arcs.mp3" controls>
</audio>

muted属性

该属性只是让音频静音

 <audio src="https://tianyitimothy.github.io/resources/arcs.mp3" 
controls muted></audio>

loop属性

改属性时可以使音频播放完还可以继续播放，即循环播放

 <audio src="https://tianyitimothy.github.io/resources/arcs.mp3" 
controls muted loop></audio>

preload属性

设定音频的预加载方式。

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

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

=“none”:不自动加载

<audio src="https://tianyitimothy.github.io/resources/arcs.mp3" 
controls preload="auto"></audio>

JS操作

首先拿到audio标签

var audio  = document.getElementsByClassName(audio)[0]

音频的当前播放时间currentTime

currentTime属性可读可写。返回当前播放时长，单位是秒。可以通过修改它来实现倒退or前进x秒，倒退5秒:可以使用计时器显示当前播放的时间。

setInterval(function(){
    console.log(audio.currentTime);
  },1000)

音频总时长duration

duration属性是可读属性。返回音频总时长，单位是秒。要注意在load()方法之前，duration的值为NaN。用法伪代码:同样可以使用计时器把总时间打印出来。

setInterval(function(){
    console.log(audio.duration);
  },1000)

播放play()

使用播放方法让暂停了的音频播放：

btn_play.onclick = function(){
    audio.play()
  }

暂停pause（）

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

  btn_pause.onclick = function(){
    audio.pause()
  }

是否暂停paused

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

btn.onclick = function(){
    console.log(12346);
    if(audio.paused == true){
      audio.play()
    }else{
      audio.pause()
    }
  }

这些audio属性很好的解决了做网易云中结论控制音乐播放条来控制音乐的进程，通过设定的按钮控制音频的播放。