<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>一个页面中有多个audio标签，其中一个播放结束后自动播放下一个，audio连续播放</title>

</head>

<body>

    <audio src="http://www.ytmp3.cn/down/49366.mp3" controls></audio>

    <audio src="http://www.ytmp3.cn/down/49382.mp3" controls></audio>

    <audio src="http://www.ytmp3.cn/down/49369.mp3" controls></audio>

    <script type="text/javascript">

    var audios = document.getElementsByTagName("audio");

    for (var i = 0; i < audios.length; i++) {

        // console.log("audios "+i+"  SRC:" + audios[i].currentSrc);

        audios[i].addEventListener('ended', function() {

            // nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。

            var nextAudio = this.nextSibling.nextSibling;

            // tagName 属性返回元素的标签名。(大写)

            if (nextAudio.tagName == "AUDIO") {

                nextAudio.play();

            }

        }, false);

    }

    </script>

</body>

</html>

JavaScript一个页面中有多个audio标签，其中一个播放结束后自动播放下一个，audio连续播放的更多相关文章

  1. JAVA设计方法思考之如何实现一个方法执行完毕后自动执行下一个方法

    今天编程时,突然想起来在一些异步操作或Android原生库的时候,需要我们实现一些方法, 这些方法只需要我们具体实现,然后他们会在适当的时候,自动被调用! 例如AsyncTask,执行玩doInBac ...

  2. [开发技巧]·HTML检测输入已完成自动填写下一个内容

    [开发技巧]·HTML检测输入已完成自动填写下一个内容 个人网站 --> http://www.yansongsong.cn 在上一个博客中简易实现检测输入已完成,我们实现了检测输入已完成,现在 ...

  3. SNF快速开发平台MVC-审核流，审核完成后会给下一个审核人发邮件，下一个审核人可以不登录系统，在邮件里进行审核处理

    审核流设计和使用参考以下资料: 审核流设计 http://www.cnblogs.com/spring_wang/p/4874531.html 审核流实例 http://www.cnblogs.com ...

  4. Android Studio keymap到Eclipse后，查找下一个同样变量快捷键Ctrl+K失效

    注:升级到0.8的版本号以后.这个快捷键能够使了,只是另一个bug,假设你用了Ctrl+F先去查找了其它的东东,再使这个快捷键去定位另外一个变量可能偶尔会不灵,不灵的话还是能够用我以下的方式来让Ctr ...

  5. video视频标签一些设置，包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件

    video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...

  6. 信1705-2 软工作业最大重复词查询思路： （1）将文章（一个字符串存储）按空格进行拆分（split）后，存储到一个字符串（单词）数组中。 （2）定义一个Map，key是字符串类型，保存单词；value是数字类型，保存该单词出现的次数。 （3）遍历（1）中得到的字符串数组，对于每一个单词，考察Map的key中是否出现过该单词，如果没出现过，map中增加一个元素，key为该单词，value为1（

    通过学习学会了文本的访问,了解一点哈希表用途.经过网上查找做成了下面查询文章重复词的JAVA程序. 1 思 思路: (1)将文章(一个字符串存储)按空格进行拆分(split)后,存储到一个字符串(单词 ...

  7. ip输入框键入.或者合法数字自动选择下一个输入框效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. [C#]Winform下回车或Tab键自动切换下一个控件焦点

    满足用户体验,在数据录入时,能在输入完一个信息后通过回车或Tab键自动的切换到下一个控件(字段). 在界面控件设计时,默认可以通过设置控件的TabIndex来实现.但在布局调整时或者是对输入的内容有选 ...

  9. 当一个页面中有多个form表单并且有重名的元素时，js获取指定form表单中的指定元素

    有时候我们会在一个页面中写了多个form表单,碰巧多个form表单中又有相同名称的元素,而我们又不想改名字,这个时候就能用到 $("#form1 #div1").val() 好玩吧 ...

随机推荐

  1. Incorrect string value: '\xF0\x9F\x98\x84\xF0\x9F

    问题描述:从新浪微博抓取消息保存到MySQL数据中,对应数据库字段为varchar,字符编码utf-8.部分插入成功,部分插入失败,报错如标题. 在网上查询,有人说是编码问题,建议修改编码格式,比如改 ...

  2. jboss & eclipse 集成

    * 前提:       * 安装了 eclipse-jee-3.5.1       * 解压了 jboss5.1       * * "jboss tools" - "J ...

  3. 7.25 11figting！

    TEXT 76 Start of the long march 而今迈步从头越(陈继龙编译) Nov 16th 2006 | BEIJING AND HONG KONG From The Econom ...

  4. CMD-SVN查看版本修改记录

    ［CMD-SVN查看版本修改记录］ 问题:想查看某个版本的具体修做了哪些改动? 方法:svn diff -r r1:(r1-1)  (filename)    filename可选,如果加上就表示查看 ...

  5. 格式化程序尝试对消息反序列化时引发异常: 尝试对参数 http://tempuri.org/ 进行反序列化时出错: GetLzdtArticleResult。InnerException 消息是“反序列化对象 属于类型 lzdt.DTO.Dtolzdt[] 时出现错误。读取 XML 数据时，超出最大

    当遇到这个错误的时候郁闷了好长时间报错是字符串长度过大可是修改了MaxStringContentLength”属性的值却不起作用最后才发现还是因为配置文件配置的问题在服务端 格式化程序尝试对消息反序列 ...

  6. python实现中文字符繁体和简体中文转换-乾颐堂

    需求:把中文字符串进行繁体和简体中文的转换: 思路:引入简繁体处理库,有兴趣的同学可以研究一下内部实现,都是python写的 1.下载zh_wiki.py及langconv zh_wiki.py:ht ...

  7. ultraiso制作ubuntu u盘启动

    http://blog.csdn.net/yaoyut/article/details/78003061

  8. Mybatis之整体描述

    Mybatis在我看来最大的用处就是封装了jdbc,设置参数操作和获取解析结果集.同时控制了数据库链接等操作,大部分采用了反射来映射javabean对象来进行数据库操作. 1.接下来先整体介绍下主要的 ...

  9. [.NET] WeakReference的使用

    声明:本篇博客翻译自:http://tipsandtricks.runicsoft.com/CSharp/WeakReferences.html 由于水平(技术水平+英语理解能力)有限/不足,肯定会有 ...

  10. 高性能mysql第三版（文摘）

    第1章 mysql架构与历史 1.1处理和存储相分离,用户可以选择合适的存储引擎 1.2并发控制 表锁:开销小 行级锁:开销大 1.3事务 acid特性:原子性,一致性,隔离性,持久性 1.4 多版本 ...