您的位置：首页 > Web前端 > HTML5

使用H5audio特性实现简单的音乐播放器

2016-11-07 20:08 260 查看

<!Doctype html>
<html>
<head>
<title>成兮音乐浏览器</title>
<meta http-equiv="Keywords" content="music" />
<meta http-equiv="author" content="chengxi" />
<style>
#mysele{
width: 150px ;
}
</style>
<script>
//定义属于window的全局变量
var musics = [
"D://music/告白气球.mp3" ,
"D://music/轩辕剑.mp3" ,
"D://music/守婚如玉.mp3" ,
] ;
//记录当前播放的音乐所处的musics索引
var index = 0 ;
//记录选择的播放方式，默认为sequence顺序播放
var playtype = "sequence" ;
window.onload = function() {
var typesele = document.getElementById("mysele") ;
//select下拉列表的值改变时触发该事件
typesele.onchange = function() {
window.playtype = typesele.value ;
} ;
var player = document.getElementById("easyaudio") ;
player.src = musics[index] ;
//当前音乐播放完成后触发该事件
player.onended = function() {
//随机播放
if(playtype == "random") {
//生成一个随机数
index = Math.floor(Math.random() * musics.length) ;
}
//顺序播放
else if(playtype == "sequence") {
index = index++ % musics.length ;
}
//单曲循环则最终index不变
player.src = musics[index] ;
//改变完成后自动播放
player.play() ;
} ;
} ;
</head>
<body>
<select id="mysele">
<option value="sequence" selected>顺序播放</option>
<option value="random">随机播放</option>
<option value="loop">单曲循环</option>
</select>
<audio id="easyaudio" controls>
您的浏览器不支持audio元素
</audio>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航