html5 audio总结

前言

　　html5中对音频,视频播放原生支持.最近做了一个音乐播放器,得益于快过年了,才能抽出一点时间来总结一下.总的来说,html5对audio的支持非常强大, 难怪flash要死.浏览器上装播放插件的时代已经接近尾声了.目前大多数浏览器都支持了大部分常用的api,ie8及其以前除外(万恶的ie啊).

　　HTML5 音频虽然很健壮，但有其局限性，这主要取决于它的实现。对于音乐播放器（点唱机播放器）或简单的声音效果，它很有效，但是对于声音密集的应用程序如游戏，它的表现不是很理想。所以有了Web Audio API (Chrome) 和 Audio Data API (Firefox) 无需任何浏览器插件即可进行合成和动态处理音频的能力来帮助人们解决特性缺失的问题.Web Audio与audio标签不同,它给了开发者对音频数据进行处理、分析的能力，例如混音、过滤等，类似于对音频数据进行PS。一般的网站应用应该是用不倒这些API中的，但是一些游戏引擎或者在线音乐编辑等类型的网站应该用得到。请参考文章最后的参考资料.

兼容情况

if(navigator.userAgent.indexOf("Chrome") > -1){
如果是Chrome：
<audio src="" type="audio/mp3" autoplay=”autoplay” hidden="true"></audio>
}else if（navigator.userAgent.indexOf("Firefox")!=-1）{
如果是Firefox：
<embed src="" type="audio/mp3" hidden="true" loop="false" mastersound></embed>
}else if（navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all）{
如果是IE(6,7,8):
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="AutoStart" value="1" /><param name="Src" value="" /></object>
}else if（navigator.appName.indexOf("Opera")!=-1）{
如果是Oprea：
<embed src="" type="audio/mpeg"   loop="false"></embed>
}else{
<embed src="" type="audio/mp3" hidden="true" loop="false" mastersound></embed>
}

View Code
window.HTMLAudioElement 可以通过这个属性来判断是否支持audio

另外一个解决方案就是使用第三方库了,这里推荐一个库jplayer,据说是支持ie7+和其他的浏览器

jplayer中文文档

总结

过年啦,祝大家新年快乐!　　2016年希望我能成长得更多.

参考资料

web audio 介绍

不止是chrome,Firefox也支持web audio 了

克服ios音频局限

浏览器中播放音频文件兼容性

跨浏览器音频视频播放插件jplayer