今天一个朋友问我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. Vs2015 本地git获取的代码目录文件修改后,启动提示error:Unable to start program “C:\Program Files\dotnet\dotnet.exe” 已解决.

    http://stackoverflow.com/questions/39938453/unable-to-start-program-c-program-files-dotnet-dotnet-ex ...

  2. [bzoj3522][bzoj4543][POI2014]HOTEL

    题解: 比较难的一道题目 首先考虑暴力dp 我们会发现构成这种形状只有三种情况 1.三个点的lca相同 2.两个点lca相同,第三个点是lca的祖先 3.两个点lca相同,第三个点是lca祖先的子树中 ...

  3. Azure 国内版 如何用powershell修改linux系统的密码

    国内版不像国际版本那样,一个UI按钮就解决问题,国内版很多功能上线比较慢,我们只能用powershell工具进行命令行 式的更改,也当温习一下命令了,好久不用了. $vm = Get-AzureVM ...

  4. nginx 设置自签名证书以及设置网址http强制转https访问

    自签名证书可以在自己的内网环境或者非对外环境使用,保证通信安装 1.生产证书 直接使用脚本生产: 中途会提示书如1次域名和4次密码,把一下文件保存为sh文件,赋予x权限后 直接执行,根据提示输入. # ...

  5. 删除了原有的offset之后再次启动会报错park Streaming from Kafka has error numRecords must not ...

          笔者使用Spark streaming读取Kakfa中的数据,做进一步处理,用到了KafkaUtil的createDirectStream()方法:该方法不会自动保存topic parti ...

  6. Zk 集群概念

    https://blog.csdn.net/gs80140/article/details/51496925

  7. 2018牛客网暑假ACM多校训练赛（第四场）A Ternary String 数论

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round4-A.html 题目传送门 - https://www.no ...

  8. sql对于字符串的处理

  9. 使用sparksql往kafka推送数据

    一.相关配置参数 1.同级目录resource文件夹下配置 brokers_list=kafkaxxx02broker01:9092,kafkaxxx02broker02:9092,kafkaxxx0 ...

  10. Trace 2018徐州icpc网络赛 （二分）（树状数组）

    Trace There's a beach in the first quadrant. And from time to time, there are sea waves. A wave ( xx ...