如何以编程方式将多个源添加到 HTML5 音频标记?

2024-01-07

许多示例演示了嵌套在音频标签中的多个源标签,作为克服不同浏览器之间编解码器兼容性的方法。像这样的东西 -

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

使用 JavaScript 时,我还可以创建这样的音频元素 -

var new_audio = document.createElement("audio");

我可以在哪里设置它的来源.src财产 -new_audio.src="....";

我未能找到如何通过 JavaScript 在音频元素中添加多个源,类似于 HTML 片段中显示的源标签。

我是否操纵new_audio并添加<source...它里面的标签,就像操作任何其他 DOM 元素一样?我现在正在这样做并且它有效,那就是 -

new_audio.innerHTML = "<source src='audio/song.ogg' type='audio/ogg' />";
new_audio.play();

我想知道有没有更合适的方法呢?


当您可以检测到支持的类型时,为什么要使用 JavaScript 添加多个文件呢?我建议改为检测最佳类型,然后设置src.

var source= document.createElement('source');
if (audio.canPlayType('audio/mpeg;')) {
    source.type= 'audio/mpeg';
    source.src= 'audio/song.mp3';
} else {
    source.type= 'audio/ogg';
    source.src= 'audio/song.ogg';
}
audio.appendChild(source);

添加与文件类型一样多的检查。

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

如何以编程方式将多个源添加到 HTML5 音频标记? 的相关文章

随机推荐

  • iOS 推送通知优先级

    我已设置推送通知并正常工作 但是 有时我会在终端设备上遇到传输延迟 有没有办法可以将推送的 优先级 键设置为 10 以便立即发送推送 我不相信我可以将它与其他键 例如 alert 一起放入字典中 因为苹果的文档说它应该与有效负载分开 你应该
  • 使用 dd/mm/yyyy 访问日期查询返回零

    我的 Access 数据库显示日期DD MM YYYY格式 一行包含日期为07 06 2014 但我的查询显示 未找到 这是我的选择查询 strSql SELECT FROM Tbl WHERE MyDate Me fldFindWhat
  • 采用什么策略来监控后台用户位置?

    我想要在后台跟踪用户位置 目的是当他靠近他的一位朋友时向他发出警报 所以我从CLLocationManager 据我所知 即使用户重新启动 Iphone 或终止应用程序 这也是让应用程序了解位置更新的唯一可靠方法 startMonitori
  • 确定 swf 是否处于“调试”播放器或模式

    有没有办法使用 Flash CS3 AS3 来确定发布的 swf 是在调试播放器中运行还是在 Flash 的调试模式下运行 我知道 Flex 提供了设置不同构建目标 发布 调试 的能力 并且您可以使用类似的东西CONFIG debug fo
  • setApplicationContext(ApplicationContext applicationContext) 从未调用过

    我试图获取 Spring 应用程序上下文 然后调用其方法 getBean beanName 来获取特定的 bean 但出现空指针异常 表明上下文为空 当我在 setApplicationContext 方法中放置一个断点时 我发现这个方法永
  • webpack 和 django 找不到静态文件

    问题是我可以在浏览器上访问应用程序 但不能访问静态资产 js jsx 和图像 我正在使用的技术 django webpack loader 0 2 4 React 0 14 Django 1 8 5 Python 2 7 Django 静态
  • 在无选项卡模式下将一个选项卡打开为浮动窗口

    我看过03 无鼠标驱动开发 作者 Hadi Hariri http vimeo com 98922030并关闭选项卡 总的来说 它工作得很好 但我发现了一个问题 我正在使用 2 个外部显示器 我想在 IntelliJ 中打开一个类进行编辑
  • Microsoft ReportViewer 2012 参考

    我在 WINDIR Assembly 中有 Microsoft ReportViewer WinForms 版本 11 0 0 0 publickeytoken 89845dcd8080cc91 实际文件版本是11 0 3412 0 我安装
  • 是否有一个*非常*轻量级的 .net IDE? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 有谁知道 net 有一个好的轻量级 IDE 吗 很多时候 我打开 VS 并创建一个新项目 只是为了看看某行代码是否可以编译 测试一个快速方
  • 为什么 myInstance = nil 而不是 self.myInstance = nil?

    我为什么要使用 在我的 dealloc 方法中 myInstance release 代替 self myInstance release myInstance nil代替self myInstance nil 虽然我们使用self myI
  • 在 Java 中执行简单异步任务的最佳方法?

    我想异步调用一个与主线程分开执行某些操作的函数 我是 Java 并发方面的新手 所以我问执行这样的操作的最佳方法是什么 for File myFile files MyFileService resize myfile lt this sh
  • 使用 Cache.Add 时,如果键已存在,是否会引发异常,还是会静默失败?

    我到处都读到 如果 Add 方法已经存在 它就会失败 但它会抛出异常还是会默默失败 我正在编写一个多线程 Web 应用程序 它不应该存在 如果我覆盖缓存 将会导致问题 因此我无法使用 Insert 方法 这是我可以做的事情吗 try Htt
  • 使用 Java 的 HttpUrlConnection PATCH 请求

    我正在尝试执行 http PATCH 请求 但总是收到 404 错误 所以可能我的连接设置不正确 URL url new URL MyPath HttpURLConnection conn HttpURLConnection url ope
  • NASM x86 16 位寻址模式[重复]

    这个问题在这里已经有答案了 我在指向地址并在我的情况下写入字节大小的变量时遇到问题 这给了我错误 错误 无效的有效地址 mov byte AX byte 0x0 经过一番尝试和错误后 我测试了相同的结果 但使用的是 EAX 这编译得很好 m
  • Phonegap Facebook 连接插件设置

    我正在使用phonegap插件连接到facebook 这个 https github com phonegap build FacebookConnect https github com phonegap build FacebookCo
  • Vitamio 示例错误 - java.lang.UnsatisfiedLinkError:无法加载 vinit findLibrary 返回 null

    我在运行 vitamio sample 时遇到问题https github com yixia VitamioBundle https github com yixia VitamioBundle 我正在使用 Android Studio
  • 单一来源文档工具[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 What OSS http en wikipedia org wiki Open source sof
  • 从向量中提取连续序列

    我有一个名为 v 的向量 其中包含正值 负值以及零 问题是 如何提取 在列表中 所有连续的正数序列 即用零分隔的正数序列 这是v v lt c 75 09619 38 31229 0 57 17792 65 55923 108 52735
  • 如何在 Keycloak 身份验证之前调用 javax.servlet.Filter

    我们使用resteasy开发了一个REST API 部署在 Wildfly 10 中 基本上 这些 REST API 是从另一个应用程序内部调用的 并且端点使用 keycloak 进行保护 但一个端点暴露给外部各方 该端点也使用 keycl
  • 如何以编程方式将多个源添加到 HTML5 音频标记?

    许多示例演示了嵌套在音频标签中的多个源标签 作为克服不同浏览器之间编解码器兼容性的方法 像这样的东西