html5-audio 播放列表和自动播放
2024-10-16 10:28:12
一个简单audio的列表和播放小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var count = 43; //一共多少MP3文件
var index = '18.mp3'; // 初始化播放那个文件
window.onload = function(){
var audio = new Audio();
audio.preload = true;
audio.controls = true;
audio.loop = false;
audio.src = index;
document.body.appendChild(audio);
audio.play();
audio.addEventListener('ended', playEndedHandler, false); function playEndedHandler(){
var name = parseInt(index);
name = name+1 < 10 ? '0'+(name+1)+'.mp3' : (name+1)+'.mp3';
console.log(name)
name>count && audio.removeEventListener('ended',playEndedHandler,false); audio.src = name;
audio.play();
} var div = document.createElement('div');
var ul = document.createElement('ul');
for (var i = 1; i <=count; i++) {
var name = i<10 ? '0'+i+'.mp3' : i+'.mp3'
var li = document.createElement('li');
var text = document.createTextNode(name);
li.appendChild(text);
ul.appendChild(li);
li.addEventListener('click',function(event){
audio.src=event.target.innerHTML;
audio.play();
},false)
}
div.appendChild(ul);
document.body.appendChild(div);
}
</script>
</body>
</html>
最新文章
- RTABMAP-ROS RGB-D的建图原理
- bluetooth 蓝牙协议和标准,配置
- Struts2(十三)国际化-internationalization
- Hark的数据结构与算法练习之珠排序
- Sharepoint 2010 之 WebPart
- html语法之--使用图像映射
- xcode多target
- css颜色渐变在不同浏览器的设置
- 201521123011 《Java程序设计》 第三周学习总结
- 系统架构以及需要导入的jar包
- 3 Eclipse 查看不了源码
- python生成pdf报告、python实现html转换为pdf报告
- vxlan基础
- 服务器后台代码生成TreeView的json字符串
- 整合django和bootstrap框架
- C#WinForm无边框窗体移动方法、模仿鼠标单击标题栏移动窗体位置
- 『TensorFlow』读书笔记_VGGNet
- ROS routeros mikrotik路由器CVE-2018-14847漏洞
- es6函数的新语法
- Python学习---Python数据类型1206