今天一个朋友问我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. Windows 7下java SDK下载、安装及环境变量设置

    第一步:下载Java JDK   1 登录官网站下载正版JDK   2 点击"SDK Download"进入Java JDK下载页面 注明: Java JDK和Java JRE区别 ...

  2. 【演示】在CSS里用calc进行计算

    请阅读 在CSS里用calc进行计算   下面的元素的width,padding,margin都使用了CSS calc进行计算. 简单计算: 100% – 100px 这是经过简单计算的元素宽度 复杂 ...

  3. 2016-06-18 exshop第四天

    昨天本来想完成用asset-pipeline替换掉resource插件的工作,但由于进行了对spring security插件的文档解读,同时面试了4个人,每个人耗费了30分钟,并且公司下午4:30组 ...

  4. 通过awk获取netstat命令中的进程号

    需要如下: 获取进程号

  5. Selenium自动化测试框架的搭建

          说 起自动化测试,我想大家都会有个疑问,要不要做自动化测试? 自动化测试给我们带来的收益是否会超出在建设时所投入的成本,这个嘛别说是我,即便是高手也很难回答,自动化测试的初衷是美好的,而测 ...

  6. jquery正则表达式验证（手机号、身份证号、中文名称）

    这篇文章主要介绍了jquery正则表达式验证,实现手机号.身份证号.中文名称验证,感兴趣的小伙伴们可以参考一下 本文实例需要验证的内容:中文姓名.手机号.身份证和地址,验证方法分享给大家供大家参考,具 ...

  7. 强大的图片展示插件,JQuery图片预览展示插件

    只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...

  8. maven启动tomcat访问报404（url中没有项目名）

    [INFO] Running war on http://localhost:8080/js_001(红色部分是项目名,要是没有的话是不能访问项目资源的) 但是我仍然不知道为什么有些maven项目却有 ...

  9. 利用log4添加log

    應用log4net.dll 新建Global.asax,在cs文件中添加 protected void Application_Start(object sender, EventArgs e)    ...

  10. 1e9个兵临城下

    https://ac.nowcoder.com/acm/contest/321#question 代码写得蛮丑的..真的很丑 像是高中教的veen图,并涉及到容斥原理. #include<cst ...