Html5音乐播放器(一)
In JavaScript,Web开发 on 2011年10月31日 by view: 6,667
1

过去在网页上播放声音一般使用wmp(windows media player)控件,但是wmp控件提供的js接口非常有限,更致命的是IE only。如果不想接受wmp的界面,又或者想要跨平台,只能借助于flash了。现在html5标准已经原生支持音频播放,并且各大浏览器都不同程度地实现了。


要做一个最简单的播放器,我们首先需要一些可操作的元素,譬如:一个播放按钮、一个播放进度条、一个音量进度条

其中的input[type=range]是html5新增的表单控件,后续可以在自定义UI的时候替换掉,不在本文探讨之列。

回到正题,dom准备好了,可以初始化音频了。在html5里,音频资源可以用audio标签插入,这里没有直接写到html里,一则是因为需要判断浏览器是否支持,二则是写在html里的audio标签必须带有src属性,这样就不能达到先绑定事件,后加载的目的。要通过js创建audio对象,可以使用new Audio(),就像new Image()一样。判断浏览器是否支持播放mp3,可以使用以下条件:

“audio/mpeg”是mp3的MINE type,canPlayType有三个可能的返回值:probably、maybe、空字符串,代表的情况跟字母意思一样,空字符串对应不支持的格式。不过就我看来,浏览器还是相当谨慎,到目前为止,我还没见过它说“probably”,而总是羞涩地返回“maybe”。

对象创建好了就要绑定事件了,我们需要对以下事件进行侦听:

  • canplay —— 媒体文件加载到能够开始播放
  • play —— 将要开始播放
  • pause —— 媒体暂停播放
  • ended —— 播放到媒体末尾
  • error —— 在加载过程中发生错误
  • timeupdate —— 播放位置发生变化,包括正常播放和手动改变播放进度

绑定完事件,就可以加载mp3了,这里非常简单,直接对audio对象的src赋值就可以了。大部分浏览器在改变src之后会自动加载新的音频文件(标准也是这样规定的),但是如果你想兼容mobileSafari,你还需要手动调用audio对象的load方法。

说得差不多了,直接看代码和demo吧:

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2011/10/html5-player-part1/

  1. Johnny 2011 年 11 月 2 日

    很完整的demo啊, 连音乐都上传了, 赞!

发表评论