序

html5开启了一个新时代，因为它让浏览器本身变得不那么被动，audio api就是一个典型的列子，在html5还没确定之前，如果想要在网页上听音乐看视频唯一的办法就是用flash

意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈，html5 audio的出现改变了这一格局，因为你可以不用Flash插件就可以听音乐看视频，当然这些能否实现

还跟你用的浏览器有关。

这是demo地址 （IE8以下不支持）

在手机上浏览效果会更好

 

文章结构

1.audio的概念以及属性和方法

2.audio的一些事件

3.完整的音频播放页面代码

详

1.html5 audio的语法以及属性和方法

使用语法

<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>

属性

src  是歌曲的路径

controls  播放控制 如果给标签里写了 controls="controls" 那么网页会显示audio自带的播放控件，如果没写就不会显示.

loop 歌曲循环 在标签里添加该属性歌曲循环 如果你的歌曲是从后台调取的的 也可以在ajax里设置 loop=true/false来控制;

autoplay 当歌曲加载后自动播放，但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)

以上是标签内的属性 当然也可以作为对象属性来调取控制auido.*

audio不单单是个标签 他也是window下的一个对象，对象就有属性和方法，作为对象他有哪些常用的方法呢

对象属性：

currentTime 获取当前播放时间

duration 获取歌曲的总时间

play 是否在播放 返回true/false

pause 是否暂停 返回true/false

对象方法：

play() 播放歌曲

pause() 暂停歌曲

load()重新加载歌曲

以上这些属性和方法只是audio最常用的一部分，也是今天的demo里面要用到的，如果想了解更多关于audio的属性和方法可以去w3shool看下 http://www.w3school.com.cn/jsref/dom_obj_audio.asp

2.html5 audio的一些事件

play 播放事件 可判断歌曲是否正在播放中

pause 暂停事件 判断歌曲是否暂停

loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（这些事件在加载过程中是按以上顺序触发的）

以上这些事件可以通过事件监听对其做相应处理

3.完整的html5 audio音频播放页面

        
html5 audio 音频播放demo
     
     
     
     loading
     
     
     
    
      
    
      
    
      
     
     
     
     
      
       00:00/
       00:00
      
     
     
     
     
      没时间-Leinov
      
       
      
     
     

好了 一个完整的html5 audio播放器完成啦！