HTML 5 音频标记多个文件

2024-04-20

我正在尝试在一个 HTML 5 音频标签中放置两个文件,并依次播放。到目前为止我的代码是:

<audio id="ListenLive" controls autoplay>
<source src="advert.mp3" type="audio/mpeg">
<source src="stream.mp3" type="audio/mpeg">

</audio>

我目前遇到的问题是只有第一个文件会播放并结束,就像没有第二个文件一样。第一首歌结束后,就没有其他事情了。

有没有办法让第一首曲目结束时自动播放第二首曲目?我需要它采用 HTML 格式,因为它适用于移动网站,因此某些代码可能无法在某些设备上运行


在 javascript 中你可以这样做(这只是为了让你开始):

audio = new Audio("start url");

  audio.addEventListener('ended',function(){
        audio.src = "new url";
        audio.pause();
        audio.load();
        audio.play();
    });

如果你愿意,你也可以使用相同的播放器(jquery):

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

HTML 5 音频标记多个文件 的相关文章

  • 在 HTML 画布上绘制线宽连续变化的线条

    我试图画一条线 从一条细线开始 然后逐渐加宽直到结束 我需要绘制半平滑曲线 由几条直线合成 并且在寻找解决此任务的方法时遇到问题 这个小提琴显示了我的问题 http jsfiddle net ZvuQG 1 http jsfiddle ne
  • 在两个页面/选项卡之间进行通信

    我想要一个 JavaScript 文件来控制两个 HTML 文件同时地 div div 那是第一页 接下来是第二页 div div
  • 绝对位置在固定位置内不起作用

    div div div div Both main and inner集装箱取走position fixed 内胆的制作方法position absolute和主容器position fixed 你需要定义top right bottom
  • 解析 Angular2 中的 xml 以在视图中呈现

    我是否需要解析 xml 以从 xml 获取数据以在 html 中呈现 我目前正在使用获取本地 xml 文件http get请求并在控制台日志中显示 xml 文件中的所有信息 我认为它只是在读取它 问题是如何在angular2中将xml转换为
  • jquery $('id').text 带粗体

    我有一个 jquery 可以更改链接的文本 如下所示 if urlfind gt 0 linkurl text More info 和 HTML a href a 我试图为此链接添加粗体 但添加 b More Info b 让它们在文本本身
  • 在 div 内对齐 2 个图像,一张向右,另一张向左

    我的网页中有 2 张图片 我希望一张图像左对齐 另一张图像右端对齐 The JsFiddle http jsfiddle net NbekW 这是我的 HTML div class header img src Home files ima
  • 防止IndexedDB请求错误取消事务

    我的意图 循环localStorage并将数据放入IndexedDB 如果发生某些已知错误 例如当键已存在时出现 ConstraintError 我想忽略这些特定错误 以便事务不会中止 当请求触发错误时 中止事务是默认行为 问题 我以为使用
  • 定位分离的 DOM 树内存泄漏

    我在诊断主要使用 Knockout 构建的非常大的单页 Web 应用程序中的分离 DOM 树内存泄漏时遇到问题 我已经调整了应用程序以附加一个假人FooBar对象特定的 HTML 按钮元素 当用户移动到应用程序的不同 页面 时 该元素应该被
  • 在 HTML 页面中显示代码片段

    就像 stackoverflow 的 WYSIWYG 文本编辑器中有一个代码示例插入器一样 参见此处的图片 http img72 imageshack us img72 8241 codesample png 我想要这样的格式化程序在 ht
  • 是否可以将 contentEditable 与 jQuery DatePicker 一起使用?

    我正在寻找一种将 contentEditable 与 jQuery DatePicker 一起使用的方法 我如何在可编辑表格上使用它 我在这里找到了一个答案 http www sencha com forum showthread php
  • 媒体查询:根据屏幕尺寸限制一些CSS样式

    当我在layout css中编写一些样式时 它适用于每个屏幕尺寸和 Media Queries 部分 您有以下部分 Smaller than standard 960 devices and browsers Tablet Portrait
  • HTML/PHP if-else 语句

    我正在使用 Bootstrap 创建一个网站 我想输入 if else 语句 但我不知道该怎么做 让我解释 Here is an image of my current HTML snippet 现在我想要的是 如果我通过 An Aussc
  • 将图像从 JQuery 上传到 Node JS

    我需要从我的网站上传图像文件HTML页 但是 我不会使用form标签 因为还有其他form稍后将用于将数据传递到服务器的字段 文本字段 复选框等 我的后端在Node JS 我想要的只是从Node Js结尾 我怎样才能做到这一点 HTML d
  • 制作单行带有水平滚动条的 div

    好吧 我想我已经使用空白修复了这个问题 无换行 它在 Chrome 中工作 但在其他方面不起作用 我有这样的事情 div class outer ul li div class inner a href img src eg1 jpg a
  • 音频端播放新文件

    我有一个webapp https radio repjesus com当您使用 ajax jquery 单击链接时加载并播放音轨 一切正常 但当曲目结束时 曲目将设置为循环 并且这种情况可以永远持续下去 我希望播放器从数据库中自动加载随机曲
  • JS 中的触摸板滚动检测,无库

    我正在制作自己的小型 Javascript 库 可以轻松地将您网站 和我的网站 的默认滚动条替换为自定义滚动条 其中一部分意味着为 BODY 元素提供 overflow hidden 样式来隐藏正常的滚动条 但是 这会阻止除代码中完成的滚动
  • 如何只显示 HTML5 datalist 中的文本而不显示值?

    这是一个例子
  • -moz-background-clip:text 在 Firefox 中不起作用

    我正在尝试用图像填充 h1 标签中的文本内容 根据我的理解 我在 html 中执行以下操作 div class image clip h1 MY WONDERFULL TEXT h1 div 并在 css 文件中 image clip ba
  • 使用 php 将 HTML 输出转换为纯文本

    我正在尝试将示例 HTML 输出转换为纯文本 但我不知道如何操作 我使用 file get contents 但我尝试转换的页面返回的结果最相似 raw http localhost guestbook profiles php file
  • 使用 Azure Bot Framework Web 聊天无法单击电话号码

    Setup 我使用以下命令创建了一个 Azure QnA Web 聊天机器人QnAMaker https www qnamaker ai Azure 机器人服务 https azure microsoft com en us service

随机推荐

  • AngularJS - 外部模板

    我正在为 和 的每个内容制作一个模板 因为我有很多数据要显示 但都在相同的结构中 这里是index html div 这是 script js function Ctrl scope scope methods name method1 d
  • Windows 11 权限被拒绝(公钥)

    最近升级到 Windows 11 后 我无法通过 SSH 访问服务器 我不断收到permission denied publickey error 我尝试过重新生成新的公钥ed25519而不是已弃用的rsa我仍然遇到同样的错误 我已经看到了
  • 2D 弹跳公式无法正常工作

    我是 Unity 的新手 我正在尝试创建一个弹跳球 所以我做了很多关于弹跳相关物理的研究 我找到了一个公式 Formula 2 V dot N N V 其中 V 是速度矢量 N 是球弹跳表面的法线 这是我的脚本 using UnityEng
  • 主干表视图消耗行视图 - 如何构造?

    我有一组模型希望在表格视图中呈现 每个模型应由表中的一行表示 并且该行应使用模板生成 我应该能够将事件处理程序附加到该行 例如单击 在事件发生时发出有关与该行关联的模型的一些特定信息 我见过类似的事情的一种常见方法是将每一行分解到它自己的视
  • Java keytool / 使用 java 生成密钥的安全性(一般)

    我们使用与 java 安装捆绑在一起的 keytool 来生成密钥以进行非对称 RSA 加密 鉴于近期events https www schneier com blog archives 2013 09 the nsa is brea h
  • 如何为 Windows Phone 7 应用程序的 UI 编写自动化测试?

    驱动一个普通的应用程序 它的 UI 已经足够困难了 但是当应用程序没有在您的开发平台上运行时 这就更难了 那么哪些工具可以帮助我测试 Windows Phone 7 应用程序的 UI 也可以看看 对于 Windows 7 Phone 代码的
  • IntelliJ IDEA:为什么 readLine() 需要两个用户输入,而不是使用 Kotlin 的一个?

    我编写了一个简单的程序 它从控制台获取用户的输入 然后将其打印出来 但是当用户输入时 它会请求第二个用户输入 并且只读取第二个输入 Code fun main args Array
  • 如何在 Mathematica 8 中并行集成

    有人知道如何使用所有核心来计算积分吗 我需要使用并行化或并行表 但如何使用 f r Sum 1 n 2 r 2 n 7 2 n n r 2 n 1 x r 2 n 1 n 0 r 2 Nw Transpose Table f j i 1 j
  • Clojure:在特定命名空间中启动 repl

    我安装了 boot clj 并且希望能够在外部编辑器中编辑 clj 文件 并单独运行一个命令行 REPL 我可以从中调用我在 clj 文件中更改的函数 不需要特殊的重新加载命令 另一件事是我不想手动键入命令来包含命名空间 我只想运行一个将我
  • 无需打开/保存即可评估 Excel 文件

    有没有一种方法可以在不手动打开文件的情况下计算Excel公式 如果 openxlsx 不是最佳选择 请随时推荐其他软件包 谢谢 我的目标是将数据粘贴到 Excel 文件 已经存在 中 其中的公式引用我要粘贴数据的范围 并让 Excel 刷新
  • 播种数据透视表的更好方法

    我有以下表格users roles和数据透视表角色 用户具有以下表结构 users id username password roles id role 角色 用户 id role id user id
  • 配置 IIS 以接收电子邮件

    根据这个答案 https stackoverflow com a 929797 939213可以配置 IIS 来接收电子邮件 这就是我想做的 但答案说它是在下面完成的IIS SMTP under domains 我使用 IIS 管理器连接到
  • 更改自定义产品类型的 WooCommerce“库存”文本(预购)

    一点背景知识 我目前正在使用WooCommerce 插件的产品预订单 https wordpress org plugins product pre orders for woo 由别墅主题 总的来说 除了这一件事之外 它对于我的目的来说效
  • Python argparse 切换标志

    argparse 有什么方法可以解析类似的标志 a b c d foo py s b 应该将 True 存储在dest of s和 False 中dest of b 很像 Windows 所做的attrib或Linuxchmod 目前 我正
  • 在 Mac osx 中将 .a 转换为 .dylib

    是否可以在 Mac osx 中将 a 文件转换为 dylib 文件 我目前有libraryname a 它似乎无法将其包含在我的程序中 因为仅包含 dylib 库 还有一个命令可以通过 mac osx 终端显示程序中使用的静态库吗 是的 这
  • 如何从字符串列表中提取数字?

    我应该如何仅从中提取数字 a 1 2 3 4 5 6 invalid 我努力了 mynewlist s for s in a if s isdigit print mynewlist and for strn in a values map
  • python 中的 Selenium Webdriver:跨测试用例重复使用相同的 Web 浏览器

    Python 新手在这里 我试图在整个测试用例中重复使用相同的浏览器 但是 我不知道如何传递全局变量来完成这项工作 现在 我有一个 main py 看起来像这样 C Python27 python exe import unittest i
  • 您的目标项目“XXX”未引用EntityFramework。这个包是必需的

    谁能指出我出错的方向 我正在尝试使用 SQLite 进行迁移以在 EFCore 上工作 控制台应用程序 NET Core 3 1 运行任何命令 例如enable migrations或update database 都会出现错误 您的目标项
  • 核心动画“翻转”动画

    我希望使用 Core Animation 在 Mac 应用程序中模拟翻转时钟动画 目前我有三个 CALayer 代表数字的上半部分和下半部分 第三个用于代表翻转动画 在以下文章中找到了解决方案 使用 Core Animation 创建 iP
  • HTML 5 音频标记多个文件

    我正在尝试在一个 HTML 5 音频标签中放置两个文件 并依次播放 到目前为止我的代码是