当前位置: 代码迷 >> Web前端 >> tip:怎么原生播放声音
  详细解决方案

tip:怎么原生播放声音

热度:97   发布时间:2012-09-04 14:19:30.0
tip:如何原生播放声音

如果不想考虑浏览器间的兼容性就用 flash ?, 但如果考虑普适性,还是使用浏览器提供的原生功能比较好,这时就要对各个浏览器的特性特别区分下:

?

1. html5 compatible

?

audio 使用起来挺简单,但要注意是的:

?

1.需要真正生成 audio 标签并插入 dom 而不是 直接 new Audio().src 就可以的。

?

2.需要调用 canPlayType 来检测浏览器是否支持指定的声音格式( 比如 ie9 不支持 wav:new Audio()).canPlayType('audio/x-wav;') == false )

?

获取播放器对象:

?

?

create('<audio preload="auto" autoplay="autoplay"></audio>');

2. old ie

?

ie 有自己的专有标签 bgsound ,直接使用即可:

?

?

create('<bgsound></bgsound>')

?

3. others

?

这时一般就是老版本的 firefox opera 等,可以采用很早就有的 embed 标签(依赖系统的音频播放器插件,并隐藏系统播放器界面),可在 windows下使用 window media player ,其他系统下使用 quicktime ,在 windows 下由于默认都安装了 windows media player 一般没问题,其他系统可能需要用户自行安装 quicktime

?

获取播放器对象:

?

?

create('<embed '+(isWin()?'type="application/x-mplayer2"':'')+' autostart="true" hidden="true"></embed>');
?

最终得到播放器对象后,则可以通过一致的

?

?

player.src=audioUrl;
?

来播放指定地址的声音文件了.(注意 ie 的一点怪癖:每次更改 src 前需要将 bgsound 元素重新插入到 body 下才行)

?

?

demo

?

wav 声音播放

?

Refer:

?

?

http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements

http://kathymarks.com/archives/2005/09/embedding_windows_media_and_quicktime_video_on_a_web_page.html

?

  相关解决方案