HTML5选择音频自动播放样式

昨天编写了HTML5的音频播放样式,今天编写一个特别简单的音频播放样式,选择文件后自动播放:

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择音频自动播放</title>
</head>
<body>
<audio controls autoplay loop>
<source src="music/莫斯科没有眼泪(钢琴曲).mp3" type="audio/mp3">
</audio>
<p>
<select onclick="getinfo()" name="sel" id="sel" size="8" style="width: 300px;">
<option>莫斯科没有眼泪(钢琴曲).mp3</option>
<option>陆展博最后表白插曲.mp3</option>
<option>平凡之路(纯音乐).mp3</option>
<option>霞光(伴奏).mp3</option>
<option>治礼亚.mp3</option>
<option>霞光.mp3</option>
</select>
</p>
<script>
function getinfo(){
document.getElementsByTagName("audio")[0].getElementsByTagName("source")[0].src = "music/"+document.getElementById("sel").value;
document.getElementsByTagName("audio")[0].load();
document.getElementsByTagName("audio")[0].play();
}
</script>
</body>
</html>

 

完成后市是这个样子的:

 

可以选择文件后自动进行播放!

就这样了,明天继续!

posted @ 2016-08-04 15:11  库洛里德  阅读(1339)  评论(0编辑  收藏  举报