如何以编程方式将多个源添加到 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 音频标记? 的相关文章

  • 使用 Charts.js 禁用动画

    我在使用 Charts js 关闭动画时遇到一些问题 这是我的代码 var pieData value 30 color F38630 value 50 color E0E4CC value 100 color 69D2E7 var myP
  • 为什么我的箭头函数有原型属性?

    正如文档中提到的https developer mozilla org en docs Web JavaScript Reference Functions Arrow functions https developer mozilla o
  • 将其作为参数传递给 addEventListener()

    我想添加change一组复选框的事件 我如何访问this在我的事件函数中 这样当我执行事件时我可以访问复选框的值 这是我当前的代码 var checkboxes document getElementsByClassName cb Arra
  • 强制执行 show.bind

    我有一个包含数据的表 当从另一个视图触发事件时 我希望视图检查 show bind 语句 问题是该事件没有更改当前视图中的任何数据 foo html tr p canBeRemoved p tr 我正在使用 EventAggregator
  • 尝试使用 CasperJS 跟踪 iframe 中的链接

    我正在尝试使用CasperJS http casperjs org index html跟踪 iframe 中的链接 但我似乎无法获取 iframe 的文档 这是使用我找到的 iframe 示例页面进行的测试 第三个 iframe 有一个名
  • 按日期对 JSON 进行排序

    我知道这一定相对简单 但我有一个 JSON 数据集 我想按日期排序 到目前为止 我每次都会遇到问题 现在我将日期存储为this lastUpdated 如果有帮助的话 我可以访问 jquery 但我意识到 sort 是本机 JS 提前致谢
  • toJSON() 和 JSON.Stringify() 之间的区别

    如果您需要读取或克隆模型的所有数据属性 请使用其 toJSON 方法 此方法返回属性的副本作为 对象 尽管有其名称 但不是 JSON 字符串 当 JSON stringify 为 使用 toJSON 方法传递一个对象 它将返回的字符串化 t
  • Backbone.js 应用程序可以逐步增强并可供搜索引擎抓取吗?

    我需要为我的下一个项目实现一个 MVC JavaScript 框架 但它既是一个网站 又是一个 Web 应用程序 是否可以公开数据服务器端 然后解析 URL 以显示 JS 版本 我计划使用 Rails 作为服务器端代码 我写了一个关于这个主
  • 如何从Web JavaScript应用程序获取桌面C#程序中的变量

    我遇到一个问题 有两个应用程序 一种是 C 中的桌面应用程序 另一种是 javascript 中的 Web 应用程序 运行桌面应用程序中的一些变量或信息需要传输到Web应用程序 有谁知道如何解决这个问题 有人愿意提供更多细节来解决这个问题吗
  • 如何使用javascript从特定标签获取HTML文档中的所有textNode?

    如何在不使用xpath或treewalker的情况下从单个数组中的一组特定标签中获取所有textNodes blockquote em h4 h6 p IE不允许您使用xpath和treewalker 请帮助我 如果脚本仅适用于 IE 那就
  • javascript 中一次仅选中一个复选框

    I have 3复选框 我只想1一次选中的复选框 下面是我的 html 小提琴 JS小提琴 https jsfiddle net n03jLhqa 我想要这个工作在IE8还请建议如何做 这个怎么样 fiddle http jsfiddle
  • Bootstrap 3 - 模态背景不会根据模态对话框的高度调整大小?

    我将一个表单放入模式中 并尝试在用户触发单选按钮时显示表单的一些隐藏字段 显示隐藏字段后 模态自动重新缩放的高度 但模态背景的高度不能用作模态对话框 我该如何解决它 div class modal fade div class modal
  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s
  • 加载 angularjs 路由后运行 javascript 代码

    我需要在 angularjs 加载路线后显示警报 显示警报的代码位于 angularjs 异步加载的视图中 视图加载后 我希望它能够运行 但它没有 我知道我可以广播并告诉它稍后运行等 但我需要一个更通用的解决方案 假设您正在谈论基于以下内容
  • jQuery 单击附加元素不起作用

    我有一个数组 我正在从 Array 获取数据并在 jQuery Append to list 中使用它 但是当我单击列表项时 它只显示最后一个元素 var array 1 2 7 3 4 8 5 6 9 for var i 0 i lt a
  • .parents() 没有 jquery - 或 querySelectorAll 为父母[重复]

    这个问题在这里已经有答案了 可能的重复 使用 matchesSelector js 检查 event target parentElement https stackoverflow com questions 12977658 check
  • Antd select 元素:如何禁用输入?

    我正在尝试使用模式 multiple 的选择元素 我希望禁用输入 这意味着用户只能在现有选项之间进行选择 而不能输入文本 我该怎么做呢 我的元素 import Select from antd import antd dist antd c
  • 使用 BASH 和 AWK 创建 HTML 表

    我在创建 html 表来显示文本文件中的统计信息时遇到问题 我确信有 100 种方法可以做得更好 但这里是 以下脚本中的注释显示了输出 bin bash function getapistats curl s http api exampl
  • Chrome 中的 addEventListener

    我正在关注 Lynda com 上有关新 DOM 事件模型的教程 这是我正在使用的代码 function addEventHandler oNode sEvt fFunc bCapture if typeof window event un
  • 使用 Three.js 中的设备方向控件进行对象旋转

    我正在迈出使用 JavaScript 进行编码并使用 Three js 的第一步 我正在尝试 Threejs org 的这个例子 http trijs org examples misc controls deviceorientation

随机推荐

  • 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 音频标记?

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