跨浏览器兼容音频有哪些选项?

2024-05-25

我正在使用这个功能:

function playSound(file) {

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

}

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

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


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

为此,请使用特征检测,不是浏览器检测。每个浏览器支持的媒体类型会随着时间的推移而改变,因此假设 Firefox 无法播放 MP3 的代码可能会在几年后 Mozilla 采用它时(专利到期后)就过时了。使用可以播放类型 http://developer.mozilla.org/en-US/docs/DOM/HTMLMediaElement#Methods,指示是否支持给定格式:

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 是一种“容器”格式,可以假设使用其他编解码器 https://en.wikipedia.org/wiki/Ogg#Ogg_codecs除了 Vorbis 和 Theora(例如,作品格式 http://en.wikipedia.org/wiki/Opus_(audio_format))。您可以像这样测试 Ogg Vorbis:

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

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

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

如果您确实想测试 ogg 支持,那么不要测试“大概”,您可以测试非空字符串(即测试“可能”或“也许”),如下所示:

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

跨浏览器兼容音频有哪些选项? 的相关文章

  • ReferenceError:regeneratorRuntime未定义(但在范围内工作)

    我遇到过这种奇怪的情况 ReferenceError regeneratorRuntime is not defined 我已经设法在一个非常小的设置中重现 与同一问题上的类似问题相比 并且还注意到一些奇怪的行为 具体取决于是否使用范围 以
  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记
  • JavaScript 中的埃拉托斯特尼筛法对大量数据无限运行

    我一直在尝试写埃拉托斯特尼筛法 http en wikipedia org wiki Sieve of EratosthenesJavaScript 中的算法 基本上我只是按照以下步骤操作 创建从 2 到 n 1 的连续整数列表 令第一个素
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0

随机推荐

  • 如何配置 StrongLoop LoopBack MongoDB 数据源以部署到 Heroku

    我正在使用 LoopBack 版本 1 6 并使用以下数据源配置运行本地 mongoDB 服务器进行开发 mongodb defaultForType mongodb connector loopback connector mongodb
  • 为什么将域连接到“Shopify”需要 CNAME 和 A 记录?

    为什么将域连接到 Shopify 需要CNAME and ARecord ref https help shopify com en manual domains add a domain using existing domains co
  • 在 Slime 中复制/猛拉整个 Lisp 表单

    有没有办法在 Slime Emacs 中复制 猛拉整个表单 例如 如果我有以下功能 myfunc lst myotherfunc lst 我想复制 复制 myotherfunc lst 当我的光标位于该表单的左括号或右括号时 在 Slime
  • 需要澄清 NSAutoreleasePool

    每当我们打电话时autorelease方法 它的对象将是NSAutoreleasePool 当池耗尽时 它会向池中的所有对象发送释放消息 我的问题是 main函数中有一个NSAutoreleasePool 我想知道 当我们调用autorel
  • 如何在 Zend 中使用 cookie?

    如何使用 Zend Http Cookie 来设置和读取 cookie 我尝试像这样设置cookie cookie new Zend Http Cookie TestCookie TestValue localhost com 但没有生成c
  • 使用 django-profiles 以配置文件形式编辑相关模型

    我在用着Django 配置文件 http bitbucket org ubernostrum django profiles wiki Home在我的应用程序中 因为它为我提供了一些简单的视图 可以帮助我更快地到达我想去的地方 但是 我有一
  • Flex HTTPservice 和 POST,发送文件?

    我使用基本的 Post 将数据发送到 Django 服务器 数据由flex动态创建的base64编码的640 380 PNG图像组成 成分
  • 哪些具体用例需要通过 WebSockets 和长轮询使用 BOSH? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 公共领域有哪些替代方案?

    我正在用 java 编写一个游戏 正如问题标题建议的那样 我在类中使用公共字段 暂且 据我所知 公共领域很糟糕 我有一些理解其中的原因 但如果有人能澄清为什么你不应该使用它们 那将不胜感激 问题是 从我所看到的来看 这似乎是合乎逻辑的 是使
  • 你能在 Clojure 中获取加载函数的“代码即数据”吗?

    换一种方式 好吧 代码就是数据 http groups google com group clojure browse thread thread 554cdc59d8a46f01 该线程解决了如何从源文件中读取的问题 但我想知道如何将已加
  • 析构函数、dispose 和 Finalize 方法之间的区别

    我正在研究垃圾收集器在 C 中的工作原理 我对使用感到困惑Destructor Dispose and Finalize方法 根据我的研究和理解 在我的类中拥有析构函数方法将告诉垃圾收集器以析构函数方法中提到的方式执行垃圾收集 该方法不能在
  • 如何使用 C# 调用 REST API?

    这是我到目前为止的代码 public class Class1 private const string URL https sub domain com objects json api key 123 private const str
  • Facebook 帐户工具包已弃用 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 I just saw https developers facebook com blog post
  • sed/awk/bash 用外部文件内容替换两个字符串之间的文本

    我正在编写一个脚本 命令 它将采用 inputFile1 在其中查找特定的开始和结束字符串 并替换它们之间的所有文本 包含 inputFile2 的完整内容 理想情况下 但不是强制性的 这应该不需要转义特殊字符即可工作 因此我可以将字符串放
  • HYBRIS - 组件和插槽如何在 JSP 文件中工作?

    最近我正在使用 Hybris 我无法理解这些组件是如何工作的 我知道如何创建和定义一个 如何将它们添加到我想要的页面等 但我不明白如何使用该标签
  • 服务器端包含与 ASP.NET 技术之间是否存在性能差异?

    我最近受聘更新 ASP NET 1 0 站点 该站点是在母版页可用之前创建的 因此 这些页面有服务器端包含 ssi 例如 我打算使用包含先前在 ssi 中的标记的母版页来更新 aspx 页面 我相信这是正确的做法 特别是从可维护性的角度来看
  • AWS SimpleDB 上属性的最大大小

    我正在构建一个移动应用程序 iPhone Android 并希望将应用程序数据存储到亚马逊的 SimpleDB 上 因为我们不想托管自己的服务器来提供这些服务 我已经浏览了所有文档 元素值的最大存储大小是 1024 字节 就我而言 我们需要
  • 最有用的 jQuery 原生 API 函数

    前 5 10 个最常用的 jQuery 本机 API 函数是什么 请不要建议 jQuery 函数本身 因为毫无疑问这是最常用的函数 如果可能的话 还请提供它们所涵盖的场景 提出这个问题的原因是我尝试创建一个类似 jQuery 的 API充足
  • 如何在 WordPress 中按标题获取帖子?

    Wordpress 3 0 我想通过使用将特定帖子的内容放入页面中title帖子的 据我所知 我不能直接使用get post 我可以假设暴力方式可能是什么 但我怀疑还有更优雅的方式吗 get page by title id OBJECT
  • 跨浏览器兼容音频有哪些选项?

    我正在使用这个功能 function playSound file MyAudio new Audio file MyAudio play 不幸的是 我正在努力寻找一种适用于所有浏览器的文件类型 Mp3 适用于 Chrome Safari