HTML5 音频播放列表 - 如何在第一个音频文件结束后播放第二个音频文件?

2024-04-05

我们怎样才能让html5中的一些音频在另一个音频播放完后播放呢?

我尝试过使用jquerydelay()功能,但它根本不起作用,是否可以使用pause()在 html5 音频中用定时器代替?例如,pause('500',function(){});?


这是一个 JSLinted、不引人注目的 Javascriptexample演示如何处理和使用ended 媒体活动 https://developer.mozilla.org/en/DOM/Media_events。在您的特定情况下,您将触发播放中的第二个音频文件ended事件处理程序。

您可以使用下面的代码或运行测试小提琴 http://jsfiddle.net/75lb/jwyMH/.

单击播放列表中的项目即可开始播放。一个音频结束后,下一个音频将开始。

标记:(注意故意避免之间的空格<li>elements - 这是为了简化 DOM 的遍历nextSibling.)

<audio id="player"></audio>

<ul id="playlist"><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%201%20by%20Lionel%20Allorge.ogg">Space 1</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%202%20by%20Lionel%20Allorge.ogg">Space 2</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%203%20by%20Lionel%20Allorge.ogg">Space Lab</li></ul>

<button id="stop">Stop</button>

script:

// globals
var _player = document.getElementById("player"),
    _playlist = document.getElementById("playlist"),
    _stop = document.getElementById("stop");

// functions
function playlistItemClick(clickedElement) {
    var selected = _playlist.querySelector(".selected");
    if (selected) {
        selected.classList.remove("selected");
    }
    clickedElement.classList.add("selected");

    _player.src = clickedElement.getAttribute("data-ogg");
    _player.play();
}

function playNext() {
    var selected = _playlist.querySelector("li.selected");
    if (selected && selected.nextSibling) {
        playlistItemClick(selected.nextSibling);
    }
}

// event listeners
_stop.addEventListener("click", function () {
    _player.pause();
});
_player.addEventListener("ended", playNext);
_playlist.addEventListener("click", function (e) {
    if (e.target && e.target.nodeName === "LI") {
        playlistItemClick(e.target);
    }
});​


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

HTML5 音频播放列表 - 如何在第一个音频文件结束后播放第二个音频文件? 的相关文章

  • jQuery Mobile 表单验证

    我有一个移动网站 除了验证之外一切都工作正常 基本上我希望从用户那里获取值 然后在单独的页面 process php 上处理它们 但是 在这样做之前 我需要检查以确保字段已填充 我已经研究了几种方法来做到这一点 但似乎没有一种有效 我现在有
  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 动态地将工具提示文本设置为 div 元素

    我正在尝试动态地将工具提示文本设置为容器 div 并对我刚刚添加到有序列表的每个 div 元素 elem Alias Status 使用 jQuery function addNewElement elem var li li li li
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 使用 JQuery 更改元素的顺序

    有人知道我做错了什么吗 我正在尝试更改某些图像的显示顺序 我希望每次按下按钮时图像都会向右 向左移动一个位置 这是我尝试过的 但没有运气 任何帮助或见解将不胜感激 rightShift click function img hide var
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • Jquery 验证不能正确验证数字?

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是
  • 如何在jquery中以相反的顺序迭代元素? [复制]

    这个问题在这里已经有答案了 我是jquery的新手 我想知道如何使用each 在jquery中以相反的顺序迭代表单元素 任何帮助 将不胜感激 尝试这个 input get reverse each function
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

  • 如何在 C# 应用程序中使用代理

    我正在使用 Microsoft Visual Studio 2010 C net 4 0 我有一个网络浏览器元素 我想做的是使用代理通过 Webbrowser 元素进行导航 我怎样才能做到这一点 谢谢 浏览器控件只是 IE 的一个实例 它将
  • 刷新页面会导致 404 错误 - Angular 6

    我正在构建一个应用程序的帮助Angular6并面临路由问题 一切routes当我单击特定选项卡时正在工作 但每当我refresh当前页面 它正在抛出404错误 我在堆栈溢出上看到了很多关于这个问题的帖子 但未能克服这个问题 下面是我的 ap
  • Regionprops 与 PodczeckShapes/DIPimage 圆度问题 - Matlab

    有人可以解释一下为什么Matlab中的 圆度 是通过 4 Area pi 周长 2 计算的 而在Podczeck Shape中它是Area Pi 4 sp 2 https qiftp tudelft nl dipref FeatureSha
  • 我应该默认推荐密封等级吗?

    在我工作的一个大项目中 我正在考虑建议其他程序员如果没有考虑如何对他们的类进行子类化 则始终密封他们的类 很多时候 经验不足的程序员从来不会考虑这一点 我觉得奇怪的是 在 Java 和 C 中 类默认是非密封 非最终的 我认为将类密封可以大
  • 登录后直接从 Websecurity 获取 CurrentUserID (C#/ASP.NET)

    我有这个网站 C ASP NET 其中有一个表单 用户可以在其中注册帐户 这是 VS11 的默认模板 填写完所有内容并且用户单击注册后 它会创建帐户并登录在用户中 效果很好 在此步骤之后 我想获取他分配的 UserID 但它不起作用 我在那
  • 如何为 git 正确设置 credential-osxkeychain

    我已按照以下说明进行操作如何设置git https help github com articles set up git将 OS X 钥匙串集成到 git 命令中 说明说密码提示应该再次出现 并且钥匙串访问窗口将会出现 密码提示出现 但钥
  • 即时加载 jQuery

    我无法弄清楚我的代码有什么问题 如果页面上不存在 jQuery 我会尝试动态加载它
  • spring hibernate异步任务问题未找到当前线程的会话

    这是我保存数据的方法 工作正常 public Future
  • 用户评级架构 - 键/值数据库

    我们正在使用 MongoDB 我正在研究一个用于存储评级的模式 评级的值为 1 5 我想存储其他值 例如fromUser 这很好 但我的主要问题是对其进行设置 以便重新计算平均值尽可能有效 解决方案 1 单独的额定值等级 第一个想法是创建一
  • 如何找出哪些组件发生冲突?

    我正在使用 Angular 2 的 ES5 风格 我遇到了这个错误 Unhandled Promise rejection Template parse errors More than one component matched on t
  • HTML 复选框可以设置为只读吗?

    我认为它们可以 但由于我没有把钱放在我的嘴上 可以这么说 设置只读属性实际上似乎没有做任何事情 我不想使用 禁用 因为我希望选中的复选框与表单的其余部分一起提交 我只是不希望客户端能够在某些情况下更改它们 你可以使用这个
  • Visual Studio 2012 中是否删除了“工具”>“创建 GUID”?

    在 Visual Studio 2010 中 工具 菜单中有一个 创建 GUID 条目 我一直用它来进行 SharePoint 开发 Visual Studio 2012 中是否删除了 工具 gt 创建 GUID 我没有看到它并求助于 Po
  • 如何覆盖CSS首选颜色方案设置

    我正在实现深色模式 因为 macOS Windows 和 iOS 都引入了深色模式 Safari Chrome 和 Firefox 有一个本机选项 使用以下 CSS 媒体规则 media prefers color scheme dark
  • 从 Android 4.2 更新到 Android 4.3 后,使用蓝牙 SPP 配置文件的应用程序无法运行

    我写了一个基于bluetoothChat的简单应用程序 我使用 SPP 配置文件在手机和蓝牙模块之间进行通信 电话始终发起通信 该应用程序在 Android 4 2 Nexus 3 和 Samsung Galaxy 3 上完美运行 更新到A
  • 使用 AutoIT 编写 GAE 启动器脚本?

    AutoIT 能否编写 GAE 启动程序脚本 以便我无需在每次部署时输入密码 AutoIt 可以自动化 GUI 没问题 有2个编辑框 Edit1 and Edit2 因此您实际上可以采用记事本示例并对其进行一些更改 如果您想要在后台运行某些
  • 我的复选框没有出现在我的 CheckedTextView 中

    这是我设置检查文本视图的方法 为什么没有出现复选框 我也添加了这个 但没有效果 listView setChoiceMode ListView CHOICE MODE SINGLE
  • 如何将 WM_INPUTLANGCHANGEREQUEST 发送到具有模态窗口的应用程序?

    我编写了一个键盘切换器 它运行良好 但如果当前应用程序打开了模式窗口 则会失败 在键盘开关上我执行以下操作 hwnd GetForegroundWindow PostMessage hwnd WM INPUTLANGCHANGEREQUES
  • Java REST 客户端的 swagger-codegen 标头参数

    我正在使用 swagger codegen 为我的 REST API 之一生成 Java REST 客户端 REST API 采用可选的标头参数 客户端中生成的方法有一个采用标头的附加参数 我希望生成的方法在方法签名中没有标头参数 我已阅读
  • Bootstrap .dropdown li背景颜色

    这是我的网站 http defend foreclosure com index html http defend foreclosure com index html 当我将鼠标悬停在 法律 上方时 我无法更改 法律 下拉列表中的任何颜色
  • HTML5 音频播放列表 - 如何在第一个音频文件结束后播放第二个音频文件?

    我们怎样才能让html5中的一些音频在另一个音频播放完后播放呢 我尝试过使用jquerydelay 功能 但它根本不起作用 是否可以使用pause 在 html5 音频中用定时器代替 例如 pause 500 function 这是一个 J