音乐播放

最新推荐文章于 2024-05-11 14:55:52 发布

tqzuy

最新推荐文章于 2024-05-11 14:55:52 发布

阅读量392

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/tqzuy/article/details/51932208

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<audio controls>
<source src="" type="audio/mp3">
</audio>
<p>
<select onclick="getinfo()" name="sel" id="sel" size="8" style="width: 300px;">
<option>薛之谦 - 意外.mp3</option>
<option>朴树 - 平凡之路.mp3</option>
<option>jiaru.mp3</option>
<option>yinweiwoaini.mp3</option>
<option>张学友 - 一千个伤心的理由.mp3</option>
<option>心愿.mp3</option>
<option>高梨康治 (たかなしやすはる) - 邪心を焼く炎 (焚烧邪心的火焰).mp3</option>
</select>
<input type="button" onclick="playall()" value="全部依次循环播放"/>
</p>
<script>
var num=0;

function playall(){
if(num>=document.getElementById("sel").options.length)
num=0;
var au=document.getElementsByTagName("audio")[0];
au.src="mp3/"+document.getElementById("sel").options[num].text;
num++;
au.load();
au.play();
}

// document.getElementsByTagName("audio")[0].onended=playall;
document.getElementsByTagName("audio")[0].addEventListener("ended", playall);

function getinfo(){
// document.getElementById("sel").value;

// alert(document.getElementsByTagName("audio")[0].getElementsByTagName("source")[0].src)
document.getElementsByTagName("audio")[0].getElementsByTagName("source")[0].src = "mp3/"+document.getElementById("sel").value;
document.getElementsByTagName("audio")[0].load();
document.getElementsByTagName("audio")[0].play();
}
</script>
</body>
</html>