跨浏览器和跨设备音频

时间:2014-04-11 07:57:20

标签: javascript html html5 audio html5-audio

问题

有没有办法在网络应用中使用音频,以便它可以在大多数浏览器(Chrome,FF,Safari和IE9 +)和设备(Android / IOS移动设备)上运行?

我的要求

我需要基本的预加载,一次播放多个声音,点击静音,也许循环播放(可能不是无缝正确?;))。

到目前为止我学到了什么:

  • Web Audio API无法在IE和任何Android上运行。 (link
  • 带有音频标签的
  • 我在Safari和Chrome上获得相同音频的持续时间不同......
  • 我检查了SoundManager2但它无法正常工作(为我抛出HTML5错误代码4)
  • 就我检查而言,
  • SoundJS似乎可以跨浏览器和设备工作但是有限制的课程:
    • 无法在Android上循环或使用延迟
    • Safari需要安装Quicktime才能播放音频
    • IE9限制一次播放多个声音
    • 尝试this并且它不会在我的Android上播放(v4.1.2 Samsung 3 mini)
  • Howler.js似乎也适用于Android,但尚未进行大量测试
    • 当一次播放多个声音并为其中一个音量调高音量或静音时它不会响应,直到你停止()并再次开始播放所有这些声音
  • 大多数工具使用Flash作为后备,在某些情况下可能会有用
  • 似乎无法用这些方法中的任何一种无缝循环声音
  • 你必须提供不同的格式/编解码器才能在各种浏览器中播放声音(我认为mp3和ogg足够了吗?)
    • Chrome(ogg,mp3,wav)
    • FF(ogg,wav)
    • IE9 +(mp3,aac)
    • Safari(mp3,aac,wav)

跟进问题

您对这些以及其他任何工具的体验是什么,并提供我需要的任何内容(跨浏览器,跨设备)?

对于我提到的每个工具,都有评论或网站注释,说明在这种情况下某些东西不起作用或者......我们还在网络浏览器中“还没有”音频吗?

感谢任何帮助,谢谢!

2 个答案:

答案 0 :(得分:2)

我对你的深入研究印象深刻。我使用SoundJS并使用您提到的移动安全方法随处可用的解决方案。它已经在Android Native和Chrome浏览器上成功测试过,可以查看this example on github并查看它是否适合您。这种方法也应该让你在Android上循环和使用延迟。

不幸的是,当您正在学习时,有各种设备和浏览器问题需要解决。我们已经记录了您在文档中可能已经发现的已知问题中找到的所有内容。

一个小的修正,IE9限制页面上可以存在多少个音频标签,对我们来说总是高于30。如果您需要超过30种声音并且想要确保它能够正常工作,您可以随时使用新实现的audio sprites。您还可以浏览器嗅探并强制闪回后退。

我们已经做了很多工作来确保尽可能顺畅的声音循环。 Web Audio应该完美地循环,因为我们使用提前插入下一个游戏的前瞻方法(discussed here)。人们遇到的一个挑战是mp3将静音插入剪辑(discussed here)。 Html音频循环与浏览器允许使用标记循环属性一样流畅。

希望有帮助,并欢迎与soundjs forums上的任何问题或问题联系。

答案 1 :(得分:0)

Firefox现在支持MP3。

<audio src="sound.mp3" type="audio/mpeg" controls></audio>

我不确定移动设备兼容性,但一般来说,如果您使用的是声音,那么您应该拥有应用而不是网站。