跨浏览器和跨设备音频 [英] Cross-browser and cross-device audio

问题描述

问题

有什么方法可以在Web应用程序中使用音频，以便在大多数浏览器（Chrome，FF， Safari和IE9 +）和设备（Android / IOS的​​移动会做）？

我的要求

我需要基本预加载，一次播放多个声音，在点击时将它们静音并可能循环（可能不是无缝对吧？;））。

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

Web Audio API不适用于IE和任何Android。 （链接）带有音频标签的

我变得不同在Safari和Chrome浏览器上播放相同音频的时间...

我检查了 SoundManager2 ，但它不会工作（为我提供HTML5错误代码4）

SoundJS 似乎可以跨浏览器和设备工作，只要我检查过，但有限制的课程：

• 无法循环或在Android上使用延迟


• Safari要求安装Quicktime以进行音频播放


• IE9一次播放多个声音的限制


• 尝试这个，它不会在我的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）

后续问题

您对这些或其他任何工具有什么经验，并且可以提供我需要的任何工具跨浏览器，跨设备）？

对于我提到的每个工具，都有评论或站点注释，说在这种情况下某些东西不起作用或者是...我们还没有在网页浏览器中使用音频？

任何帮助表示感谢，谢谢！

解决方案

我深入研究，给您留下深刻印象。我在SoundJS上工作，并使用您提到的移动安全方法在任何地方工作来构建解决方案。已经在Android Native和Chrome浏览器上成功通过测试，可能会查看此示例在github上，看看它是否适合你。这种方法也应该让你循环使用Android的延迟。

不幸的是，当你正在学习时，有各种设备和浏览器问题需要解决。我们已经记录了我们在文档中可能已经发现的已知问题中发现的一切。

一个小小的更正，IE9限制了多少音频标签可以存在于一个页面上，对我们来说总是高于30。如果您需要超过30种声音并且希望确保它可以正常工作，您可以随时使用新实现的 。 =nofollow>音频精灵。您还可以浏览器嗅探和强制闪回。

我们已经做了大量工作以确保最平稳的声音循环。 Web音频应该完美循环，因为我们采用了前瞻性方法（此处讨论） ）提前插入下一个游戏。人们遇到的一个挑战是mp3将片段沉默嵌入剪辑中（这里讨论）。 Html音频循环与浏览器允许使用标签循环属性一样顺畅。

希望有帮助，并且欢迎您提出有关 soundjs论坛。

Question

Is there any way to use audio in a web app so that it will work on most browsers (Chrome,FF,Safari and IE9+) and devices (Android/IOS for mobile would do) ?

My requirements

I would need basic preloading, playing multiple sounds at once, muting them on click and perhaps looping (probably not seamlessly right? ;) ).

What I learned so far:

• Web Audio API wont work on IE and any Android. (link)
• with audio tag I get different durations for the same audio on Safari and Chrome ...
• I checked SoundManager2 but it won't work somewhere (throws HTML5 error code 4 for me)
• SoundJS seems to work cross-browser and device so far as I checked but there are limits ofcourse:
  • cannot loop or use delay on Android
  • Safari requires Quicktime to be installed for audio playback
  • IE9 has limits with playing multiple sounds at once
  • tried this and it wont play on my Android (v4.1.2 Samsung 3 mini)
• Howler.js seems to work on Android for instance as well, didn't make extensive testing yet
  • when playing multiple sounds at once and turning volume for one of them up/down or muting it wont respond until you stop() and start playing all of them again
• Most tools use Flash as a fallback which might be useful in some cases
• It seems like it's not possible to seamlessly loop sounds with any of these approaches
• You have to provide different formats/codecs to be able to play sound in various browsers (mp3 and ogg would be sufficient I reckon?)
  • Chrome (ogg,mp3,wav)
  • FF (ogg, wav)
  • IE9+ (mp3,aac)
  • Safari (mp3,aac,wav)

A follow up question

What are your experiences with these and perhaps any other tools and do any of these provide what I need (cross-browser,cross-device)?

For each tool I mentioned there are comments or site-notes that say something didn't work in this case or that … Are we still 'not there yet' with audio in web browsers?

Any help appreciated, thank you!

解决方案

I'm impressed with your thorough research. I work on SoundJS and build solutions with it that work everywhere using the mobile safe approach you mention. It has been successfully tested on Android Native and Chrome Browsers, maybe check out this example on github and see if it works for you. This approach should also let you loop and use delay on Android.

Unfortunately as you are learning there are various device and browser issues to work around. We've documented everything we've found in the known issues you likely have seen in the documentation.

One small correction, IE9 has a limit on how many audio tags can exist on a page, which was always higher than 30 for us. If you need more than 30 sounds and want to be sure it will work, you can always use the newly implemented audio sprites. You could also browser sniff and force flash fallback.

We've done a lot of work to ensure the smoothest possible looping of sound. Web Audio should loop perfectly, as we use a look ahead approach (discussed here) that inserts the next play ahead of time. One challenge that people have run into is that mp3 inserts silence into clips (discussed here). Html audio loops as smoothly as the browser will allow using the tag loop property.

Hope that helps, and feel welcome to reach out with any questions or issues on the soundjs forums.

这篇关于跨浏览器和跨设备音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！