html怎么播放下一首,javascript – HTML5音频播放列表 – 第一个结束后如何播放第二个音频文件?...

这是一个JSLinted,不引人注目的

Javascript示例,演示如何处理和使用结束的

mediaevent.在您的特定情况下,您将触发在您的结束事件处理程序中播放第二个音频文件.

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

标记:(注意,有意避免< li>元素之间的空格 – 这是为了简化使用nextSibling遍历DOM.)

  • Space 1
  • Space 2
  • Space Lab

Stop

脚本:

// 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);

}

});​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/529927.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

排球制作html,MAYA打造排球建模教程

这篇教程向悠悠之家的朋友们介绍用MAYA打造排球模型的过程&#xff0c;制作很简单&#xff0c;希望对刚学习MAYA建模的朋友们有所帮助&#xff0c;我们先看看最终的效果图&#xff1a;你们一定学过很多创建一个球的技巧&#xff0c;但在这个入门教学里面&#xff0c;我们将要学…

北大计算机系统结构学硕,转自包云刚,希望的原野 最近几个月参加了计算所、北大、上海交大多位计算机系统结构硕士与博士的答辩,说几点体会: ① 高水平国际论文越来越多。简单... - 雪球...

来源&#xff1a;雪球App&#xff0c;作者&#xff1a; 逍遥剑99&#xff0c;(https://xueqiu.com/1732900127/153778925)最近几个月参加了计算所、北大、上海交大多位计算机系统结构硕士与博士的答辩&#xff0c;说几点体会&#xff1a;① 高水平国际论文越来越多。简单统计了…

计算机主机箱前后都有什么,目前四种热门的主机机箱设计都有哪些优缺点?

在DIY里面机箱算是最没技术含量的产品之一&#xff0c;不过它却是与DIYer接触时间最长的东西。气味大师每天都会按下机箱开机键&#xff0c;也会空余时间瞄上几眼。机箱确实是对DIY影响最大的产品之一&#xff0c;今天我来盘点一下2018年见过的几个主流机箱设计方案。说是机箱设…

微型计算机硬盘接口主要分为,北京交通大学微机原理与接口技术_期末复习题_图文...

北京交通大学微机原理与接口技术_期末复习题_图文更新时间&#xff1a;2017/1/26 18:34:00 浏览量&#xff1a;1285 手机版“微机原理与接口技术”2008年期末考试复习题1. 微机系统的硬件由哪几部分组成&#xff1f;答&#xff1a;三部分&#xff1a;微型计算机(微处理器&…

计算机自然语言的中国科学家,中科院教授王斌加入小米 任自然语言处理首席科学家...

王斌新浪科技讯 8月28日上午消息&#xff0c;小米新经济研究中心发布微信文章称&#xff0c;中国科学院信息工程研究所研究员、博士生导师王斌已于8月20日正式加入小米集团&#xff0c;任AI实验室自然语言处理(Natural Language Processing&#xff0c;NLP)首席科学家&#xff…

springcloud 相同服务名_浅谈分布式与微服务

分布式和微服务是什么关系&#xff1f;简单来说&#xff0c;分布式和微服务的概念比较相似&#xff0c;分布式属于微服务。但是分布式和微服务在架构、作用和粒度上有所区别。因此&#xff0c;两者的关系是既相互联系又相互区别。本文主要带大家认识分布式和微服务&#xff0c;…

html div 子元素 过多 卡顿,CSS不定高元素transition动画的解决方案

CSS不定高元素transition动画的解决方案类别&#xff1a; 技术CSS时间&#xff1a;2019-07-27 23:41:35字数&#xff1a;3297版权所有&#xff0c;未经允许&#xff0c;请勿转载&#xff0c;谢谢合作~### 前言CSS中transition可以方便的实现我们的过渡动画效果&#xff0c;但并…

bat 变量 文件内容第一行_VBA基础入门(38)FSO生成bat文件后执行的实例

1.首先&#xff0c;我们回顾下FSO是什么&#xff1f;文件系统对象FSO的英文全称是File System Object &#xff0c;这种对象模型提出了有别于传统的文件操作语句处理文件和文件夹的方法。通过采用object.method这种在面向对象编程中广泛使用的语法&#xff0c;将一系列操作文件…

HTML5废除元素,HTML5 与 HTML4 的区别(2) - 新增的元素和废除的元素

新增的结构元素在 HTML5 中&#xff0c;新增了以下与结构相关的元素&#xff1a;section元素section 元素表示页面中的一个内容区块&#xff0c;比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用&#xff0c;标识文档结构。HTML5 中…

ps怎么更改背景图层大小_PhotoShop处理图层的一些技巧方法、PS图层处理教程

一、了解图层以及为什么它们如此有用。1.在“图层”面板中查看和选择图层2.层包含组成分层文件的图像&#xff0c;文本或对象。它们使您可以在一层上移动&#xff0c;编辑和使用内容&#xff0c;而不会影响其他层上的内容。3.图层在“ 图层”面板中按堆栈排列&#xff0c;该面板…

zabbix计算型监控项函数last_zabbix 自定义key类型之计算(Calculated items)-阿里云开发者社区...

计算类型的key定义主要是根据已定义过的key值来计算的。例如创建一个计算linux服务器内存实际使用大小的监控项(计算方法为&#xff1a;vm.memory.size[total]-vm.memory.size[cached]-vm.memory.size[free])&#xff0c;方法如下&#xff1a;1、在模板中或是主机中选择监控项-…

使用计算机画画需要什么软件,专业电脑绘画用的是什么工具?

满意答案srCDG3SL62013.11.13采纳率&#xff1a;57% 等级&#xff1a;12已帮助&#xff1a;11125人电脑硬件配置(CPU,内存&#xff0c;显卡等)越高&#xff0c;绘制大图时&#xff0c;软件不会卡。就会画的很流畅。特别是Painter&#xff0c;模拟自然画笔越真实&#xff0c;…

中如何移动物体在画面中的位置_组合柜摆在客厅中什么位置最旺运?客厅中,财位是如何确定的?...

组合柜摆在客厅中什么位置最旺运&#xff1f;组合柜在风水中的重要性不如沙发&#xff0c;但要注意的宜忌事项也有很多。风水上讲高者为山&#xff0c;低者为水&#xff0c;有高有低&#xff0c;有山有水&#xff0c;才符合风水原理。在客厅中&#xff0c;低的沙发是水&#xf…

计算机概论在线阅读,计算器概论 or 计算机概论

计算机硬件的五大单元输入单元、输出单元、CPU内部控制单元、算数逻辑单元、主存储器。中央处理器 CPU Central Processing UnitCPU 的种类精简指令集 Reduced Instruction Set Computing, RISCSun SPARCIBM Power Architecture复杂指令集 Complex Instruction Set Comp…

螺旋天线有方向性吗_螺旋天线方向图

luoxuan13度.zip.zip我画的二臂螺旋天线同轴电缆馈电&#xff0c;得到的方向图是酒杯形状的&#xff0c;而不是半球行的&#xff0c;修改了好多次参数都是这样&#xff0c;这可如何是好&#xff0c;我的模型有问题么&#xff1f;还是哪里出了问题&#xff0c;请帮忙。怎么没人帮…

jquery ajax html编码,jQuery AJAX字符编码

我目前正在编码一个法语网站。有一个时间表页面&#xff0c;可以使用侧面的链接加载另一天的时间表。这是我用来执行此操作的JS&#xff1a;function load(y) {$.get(y,function(d) {$("#replace").html(d);mod();});}function mod() {$("#dates a").click…

miui10读取不了u盘_u盘能识别但无法读取_u盘无法识别如何修复

2019-08-07 14:04:57U盘设备大家都比较熟悉了&#xff0c;正常情况下&#xff0c;电脑插入U盘后会自动识别读取数据&#xff0c;然后在打开U盘数据进行操作。但是有用户反映将U盘插入win10系统后竟然无法识别&#xff0c;难道是U盘设备坏了&#xff0c;但是在...2018-06-07 10:…

四川大学计算机学院赵怡,【喜讯】我校计算机学院学子在蓝桥杯大赛全国总决赛中再获佳绩...

在第十一届蓝桥杯“全国软件和信息技术专业人才大赛”省赛上&#xff0c;我校选手面对包括北京大学、清华大学、上海交通大学、北京航空航天大学、武汉大学、西安交通大学、北京理工大学、四川大学、电子科技大学、吉林大学、东北大学等在内的1200余所高校&#xff0c;6万余名顶…

2002勘察设计收费标准_上海装修设计师的收费标准是什么?

目前家装行业的发展趋势全是特别迅速的&#xff0c;一点都不落后于房地产业的发展趋势&#xff0c;因此目前在好多大城市全是各式各样的家装公司&#xff0c;这篇以上海装修公司为例&#xff0c;向大伙儿详细介绍一下上海装修设计公司的有些收费标准&#xff0c;看一下绝大多数…

计算机控制系统EHA,优·计算机控制技术第四章.doc

第四章 过程控制理论与技术4.1 过程控制系统的连续化设计4.1.1 概述1.简述计算机控制系统的设计&#xff0c;是指在给定系统性能指标的条件下&#xff0c;设计出控制器的控制规律和相应的数字控制算法。典型的计算机控制系统如图4.1.1所示。系统的输入r(t)跟系统的输出y(t)比较…