HTML5 Audio制作简单的自定义音乐播放器

2013-10-14 10:35| 发布者: admin| 查看: 17663| 评论: 0

摘要: HTML5中的audio元素用于播放网页中的音频文件，它提供了很多简单的属性和方法，我们可以用这些属性、方法、事件来制作自己的自定义网页音乐播放器。要自定义音乐播放器，就得将浏览器自带的audio播放器样式去掉， ...

HTML5中的audio元素用于播放网页中的音频文件，它提供了很多简单的属性和方法，我们可以用这些属性、方法、事件来制作自己的自定义网页音乐播放器。

要自定义音乐播放器，就得将浏览器自带的audio播放器样式去掉，我们可以通过不指定audio元素的controls属性来隐藏浏览器自己提供的播放控件。播放进度条我们使用HTML5中的progress元素，可以达到同样效果。在进度跳下面我们添加几个按钮，播放、暂停、后退、静音等。

我们先看一下效果图（本例使用chrome浏览器）：

在线演示

下面先介绍一下本例中使用的audio属性、方法与事件：

src属性：指定播放的音频文件的地址。

played属性：可以用audio的played属性返回一个TimeRanges对象，从该对象可以得到音频的已播放部分的时间段。

paused属性：可以用audio的paused属性返回一个布尔值，表示该音频是否处于暂停状态。true表示暂停状态，false表示正在播放。

ended属性：可以用audio的ended属性返回一个布尔值，表示是否播放完毕。true表示播放完毕，false表示没有播放完毕。

以上三个属性均为只读属性。

volume属性：读取或修改视频的播放音量，范围是0到1，0为静音，1为最大音量。

muted属性：读取或修改视频的静音状态，true表示处于静音状态，false表示非静音状态。

play方法：用于播放音频。

pause方法：暂停播放。

ended事件：当音频播放结束或停止播放时将触发该事件。

play事件：使用audio元素的play方法播放音频时将触发该事件，或者音频数据下载完毕且audio元素被设为自动播放(autoplay)后，自动播放音频时将触发该事件。

pause事件：当执行了audio元素的pause方法而暂停播放时，将触发该事件。

timeupdate事件：当前播放位置被改变时处罚该事件。我们要注意的是，播放位置的改变可能是音频播放过程中的自然改变也可能是人物手动改变，也可能是由于播放不能连续而发生的跳变。

上一篇：使用用HTML5 新标签Audio制作音乐特效下一篇：HTML5 audio 标签和video 标签

设为首页