插件窝 干货文章 html5 audio音频播放全解析

html5 audio音频播放全解析

html5 audio 音频 996    来源:插件窝    2019-10-26

html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash,意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关。

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

2.audio的一些事件


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()重新加载歌曲


2、html5 audio的一些事件

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

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

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

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