草庐IT

javascript - 跨浏览器兼容音频有哪些选项？

coder 2024-12-16 原文

我正在使用这个函数:

function playSound(file) {

MyAudio = new Audio(file);
MyAudio.play();

}

不幸的是，我正在努力寻找一种适用于所有浏览器的文件类型。 Mp3 在 Chrome、Safari、IE 中有效，但在 FF 和 Opera 中无效，而 .ogg 文件似乎只在 FF 中有效。

关于解决此问题的任何建议？我想没有办法以编程方式检测正在使用哪个浏览器然后播放适当的文件类型？任何建议/想法表示赞赏。谢谢。

最佳答案

令人沮丧的是，没有普遍适用的类型。 WAV 最接近，但它相当大并且在 IE9 中不受支持。您需要有多种可用类型并选择浏览器可以播放的类型。

为此，请使用功能检测，而不是浏览器检测。每个浏览器支持的媒体类型会随着时间的推移而改变，因此假设 Firefox 不能播放 MP3 的代码可能会在几年后过时，当 Mozilla 采用它时(专利到期后)。使用 canPlayType , 指示是否支持给定格式:

var audio = new Audio();
if(audio.canPlayType("audio/mpeg") == "probably") {
    playSound("myMedia.mp3");
} else if(audio.canPlayType("audio/webm") == "probably") {
    playSound("myMedia.webm");
}
// do checks for other types...

此外，如果您将音频标签编写为 HTML，您可以使用多个 <source>标签，浏览器将播放它能播放的第一个:

<audio controls="controls">
    <source src="mymedia.ogg" type="audio/ogg" />
    <source src="mymedia.mp3" type="audio/mpeg" />
    Update your browser! This sentence is fallback content for browsers that do not support the audio element at all.
</audio>

如果您想测试 Ogg 音频支持，您可能想专门测试 Ogg Vorbis。 Ogg 是一种“容器”格式，可以 hypothetically use other codecs除了 Vorbis 和 Theora(例如 Opus format )。您可以像这样测试 Ogg Vorbis:

audio.canPlayType('audio/ogg; codecs="vorbis"') == "probably";

请注意 canPlayType具有三个可能的返回值:

  • “可能” - 媒体类型几乎肯定可以播放
  • “可能” - 媒体类型可能可以播放。这是当您在浏览器中询问一般 Ogg 支持时返回的内容，该浏览器具有对特定编解码器(即 Vorbis 和 Theora)的 Ogg 支持。 Ogg 文件可能使用浏览器不支持的编解码器，因此如果您不指定编解码器，浏览器只能猜测它可能能够播放它。
  • "" (空字符串) - 媒体类型肯定无法播放

如果您真的想测试 ogg 支持，那么您可以测试非空字符串而不是测试“可能”(即测试“可能”或“可能” "), 像这样:

// test for *any* Ogg codecs
if(audio.canPlayType("audio/ogg") != "") {  
    playSound("myMedia.ogg");
}

您应该测试您的媒体文件使用的任何特定编解码器，例如 'audio/ogg; codecs="vorbis"'对于 Vorbis。测试一般的 Ogg 支持不太可能有用。

关于javascript - 跨浏览器兼容音频有哪些选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13147951/

javascript浏览器audio34codecross-browsermp3ogg

有关javascript - 跨浏览器兼容音频有哪些选项？的更多相关文章

  1. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  2. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  3. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  4. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  5. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  6. ruby-on-rails - 您希望看到哪些 Rails 插件？ - 2

    您认为可以作为插件很好地存在于您的Rails应用程序中必须实现的哪些行为？您过去曾搜索过哪些插件功能但找不到？哪些现有的Rails插件可以改进或扩展，如何改进或扩展？ 最佳答案 我希望在管理界面中看到一个引擎插件，它提供了应用程序中所有模型的仪表板摘要，以及可配置的事件图表。 关于ruby-on-rails-您希望看到哪些Rails插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questio

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  9. ruby-on-rails - 不兼容的库版本 : nokogiri. bundle 需要 8.0.0 或更高版本，但 libiconv.2.dylib 提供 7.0.0 版本 - 2

    为了在我的mac上为一个rails项目安装mysql，我遵循了安装Homebrew软件和删除mac端口的在线建议。这是问题开始的地方。rails项目不会构建，我得到这个:[rake--prereqs]rakeaborted!dlopen(/Users/Parker/.rvm/gems/ruby-1.9.3-p448/gems/nokogiri-1.6.0/lib/nokogiri/nokogiri.bundle,9):Librarynotloaded:/opt/local/lib/libiconv.2.dylibReferencedfrom:/Users/Parker/.rvm/gem

  10. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？ 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

随机推荐