阿江守候,高校文学爱好者的乐园……
首页 阿江动态 校园文学 阿江简历 阿江的家 阿江展台 联系阿江 留 言 本    

 有多少甜蜜的忧愁,有多少欢乐的苦涩,在你我心中,默默,不能说……

您的位置:阿江守候>>阿江动态>>好了,有midi背景音乐才有怀旧感

好了,有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 点击:2433

[返回上一页]返回

[回阿江守候首页] [回阿江动态栏目]