今天一个朋友问我js顺序播放音乐列表中的音乐的问题，我仔细一想，我也没有做过啊，无从下手啊，怎么办？然后我就上网查了一下audio标签，又百度了js如何顺序播放音乐，结果就找到了解决的办法。

audio标签有一个方法是onended，W3C对它的解释是“当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。”这么问题就迎刃而解了。

直接上代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<audio controls="controls" autoplay="autoplay" id="audio" src="http://so1.111ttt.com:8282/2016/1/12m/10/205102159306.m4a?tflag=1491889514&pin=1d78d27553feb8fb49894cc570a4e497&ip=180.173.30.102#.mp3" style="width:500px;"></audio>

<script type="text/javascript">

var i = 0;

var audios=[

	"http://so1.111ttt.com:8282/2016/5/12m/10/205101601572.m4a?tflag=1491889763&pin=00b0e3cfdc2727028c8cd40a3913cd34&ip=180.173.30.102#.mp3",

	"http://so1.111ttt.com:8282/2016/5/12m/10/205101416298.m4a?tflag=1491889789&pin=ca21cf0765639847b78d5fea2d9568ae&ip=180.173.30.102#.mp3",

	"http://so1.111ttt.com:8282/2016/1/12m/10/205101007238.m4a?tflag=1491890978&pin=6ae41be616c20b7e1224e935de8c2c2d&ip=180.173.30.102#.mp3"

	];

document.getElementById("audio").onended = function(){

	if(audios[i]){

		this.setAttribute('src',audios[i]);i++;

	}else{

		alert('没有音乐了');

	}

};

</script>

</body>

</html>

js顺序播放列表中的音乐的更多相关文章

  1. iOS开发系列--扩展--播放音乐库中的音乐

    众所周知音乐是iOS的重要组成播放,无论是iPod.iTouch.iPhone还是iPad都可以在iTunes购买音乐或添加本地音乐到音乐 库中同步到你的iOS设备.在MediaPlayer.fram ...

  2. jplayer中动态添加列表曲目（js提取request中的list数据作为js参数使用）

    jplayer 的播放列表使用如下: $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplaye ...

  3. D3.js使用过程中的常见问题(D3版本D3V4)

    目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中 ...

  4. js原型对象中属性被覆盖(1)

    /**   *@author 程无衣   *@description 关于在原型对象中属性被覆盖   */       function Person(){}       Person.prototy ...

  5. js插件---videojs中文文档详解

    js插件---videojs中文文档详解 一.总结 一句话总结: js插件网上都有很多参考资料,使用起来也非常简单 二.lavarel中使用实例 <video id="example_ ...

  6. Js文件函数中调用另一个Js文件函数的方法

    在项目中Js文件需要完成某一功能,但这一功能的大部分代码在另外一个Js文件已经完成,只需要调用这个文件实现功能.那么如何调用:一个Js文件函数中调用另一个Js文件函数的方法? (直接代码说明) 示例d ...

  7. 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分

    找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...

  8. js 在浏览器中的event loop事件队列

    目录 前言 认识一个栈两个队列 执行过程 异步任务怎么分配 简单例子 难一点的例子 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其 ...

  9. js获取URL中的参数

    js获取URL中的一些参数的意思 location对象 含有当前URL的信息. 属性 href 整个URL字符串. protocol 含有URL第一部分的字符串,如http: host 包含有URL中 ...

随机推荐

  1. Angularjs 学习笔记-2017-02-06-双向数据绑定

    NG: ng-bind:  标签属性 ng-bind=" obj.xxx  " ,不会出现 用于区别{{ }} 标签,当页面未加载完毕时可以看到{{}}标签,非常不雅观,ng-bi ...

  2. javascript扩充基本类型的功能

    可以通过给Function.prototype增加方法来使得该方法对所有函数可用. 通过给Function.prototype增加一个method方法,下次给对象增加方法的时候就不必键入prototy ...

  3. Eclipse+Maven整合开发Java项目（二）➣webapp3.0以上的Maven项目

    概述 Eclipse集成Maven插件,新建maven-archetype-webapp项目的时候,采用的webapp的版本较低,默认是2.3,有些时候,我们希望升级Webapp的版本到3.0(Tom ...

  4. 【转】ArcGIS10.0完全卸载全攻略

    ArcGIS10.0完全卸载详细步骤: 1.开始>控制面板>添加删除程序,卸载所有ArcGIS软件和帮助文档,以及所有ArcGIS补丁.2.从添加删除程序面板中删除所有Python相关的应 ...

  5. BZOJ1010 [HNOI2008]玩具装箱toy 动态规划 斜率优化

    原文链接http://www.cnblogs.com/zhouzhendong/p/8687797.html 题目传送门 - BZOJ1010 题意 一个数列$C$,然后把这个数列划分成若干段. 对于 ...

  6. bind注意事项（传引用参数的时候）

    默认情况下,bind的那些不是占位符的参数被拷贝到bind返回的可调用对象中. 当需要把对象传到bind中的参数中时,需要使用ref或者cref. 例如: #include<iostream&g ...

  7. mysql 分区 1526错误

    mysql 分区 原文:http://fyzjhh.blog.163.com/blog/static/1694442262012544429953/ 参考:https://bugs.mysql.com ...

  8. debian9 开启rc.local服务

    由于某些软件并没有增加开启启动的服务,很多时候需要手工添加,一般我们都是推荐添加命令到 /etc/rc.local 文件,但是 Debian 9 默认不带 /etc/rc.local 文件,而 rc. ...

  9. 比较对象--"=="与"equal"的区别

    String stra=new String("你好"); String strb=new String("你好"); String strc=stra; bo ...

  10. 数据库相关--net start mysql 服务无法启动（win7系统）解决

    系统:win7 旗舰版 64位 MySQL:8.0.11 家里台式机上不久之前安装了MySQL,一段时间没碰过后,突然启动不了了(我有一头小毛驴,我从来也不骑,有一天我心血来潮骑它去赶集) 先是在系统 ...