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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值