|
好了，有midi背景音乐才有怀旧感
这两天看HTML5教程，当看到HTML5如此容易的播放音乐的时候，忽然想到可以拿来解决阿江守候只有IE浏览器能听到背景音乐的问题。
想当年，midi背景音乐几乎是个人主页的标配，一个一两K甚至几百字节的mid文件就可以让网页长时间播放背景音乐，还是很有气氛的。但后来IE逐渐没有了浏览器霸主地位，尤其是360、QQ等第三方浏览器开始使用chrome内核之后，越来越多的人听不到背景音乐了。既然到阿江守候来的人多半是来怀旧的，少了这个背景音乐怎么行呢。
IE的背景音乐代码实在是太简单，只一个bgsound标签即可解决。
<bgsound src="mus006.mid" loop="-1">
但这个bgsound标签只有IE可以识别，而且其它浏览器不论用什么方法都无法播放midi格式的音乐。
那么首先就必须准备一个同样内容的mp3格式文件了，1k的midi文件，用格式工厂转成128K比特率MP3就要1M多大小，打开阿江的主页不一定喜不喜欢先耗费1M流量太残忍了一些，于是又转了个33K比特率的，文件变成300多K了，也就是一张图片的大小，这还行。
然后考虑怎么让别的浏览器播放起来，这个一开始感觉不用考虑，因为支持HTML5的浏览器正好大多都不支持MIDI，直接放HTML5代码就好嘛。
HTML5的<audio>和</audio>之间说可以放不支持HTML5时的内容，我于是把bgsound代码放在了这里。
<audio src="mus006.mp3" loop="loop">
<bgsound src="mus006.mid" loop="-1">
</audio>
谷歌浏览器打开，成功听到背景音乐了。IE6打开……悲剧了，同时听到MP3和MIDI两种背景音乐，混杂在一起了。于是明白<audio>和</audio>之间的内容并不是不加载，而只是当支持AUDIO标签的时候那些文字不显示罢了。
那就继续改进，经过查找资料和参考别人的JS，通过bgsound是只有IE才支持的标签这一特征加以区分，用JS判断，当支持这个标签的时候就用MIDI背景音乐，否则就让audio对象开始播放。
<bgsound src="mus006.mid" loop="-1" id="bgsound">
<audio id="bgsoundhtml5" src="mus006.mp3" loop="loop"></audio>
<script>
if (!document.getElementById("bgsound").src) {
document.getElementById("bgsoundhtml5").play();
}
</script>
这次终于成功了。IE浏览器和谷歌浏览器都能正确的听到背景音乐，且不会混杂在一起。因为audio标签并没有使用autoplay属性，所以MP3文件默认是没加载的，IE浏览器访问的时候是不会增加流量的。
试验了WIN10的edge浏览器，也正常播放了MP3。又试验了IE8/IE11，都正常。有些成就感了。
但当拿起手机试验的时候，奇怪了，没有背景音乐。试显示audio对象的控制对象，手工点播放，可以播放了。看样子是自动播放出了问题，于是上搜索引擎查了下，确认确实是safari浏览器会对媒体的自动播放进行拦截，必须用户确认才能播放。无奈，又给网页上暂时加上了播放和暂停的链接，暂时没想到放哪里，就随便放了个位置。先这样吧，至少差不多在PC上（除了苹果）是大多数浏览器都可以直接听到背景音乐了。
发表时间：2016-5-27 16:40:27 点击：7357
[返回上一页]返回
[回阿江守候首页]
[回阿江动态栏目]
| 
