本文主要使用HTML5結合Jquery做一個簡易版的音樂播放器。
代碼如下：
<!DOCTYPE HTML>
<html><head>
<title>三生草</title>
<script language="javascript" src="jquery-1.4.2.js"></script>
<script language="javascript">
var sum = 1;
function ssss(a)
{
var s = document.getElementById("sd");
sum = a;
s.src = "music/"+sum+".mp3";
s.play();
$("#mar")[0].innerText = "當前播放："+$("td:eq("+(sum-1)+")")[0].innerText;
s.onended = function(){
s.src = "music/"+sum+".mp3";
sum++;
if(sum == 15){sum = 1;}
s.play();
$("#mar")[0].innerText = "當前播放："+$("td:eq("+(sum-1)+")")[0].innerText
}
}
function ststs(b)
{
if(b==2)
{
if($("#sse")[0].value=="播放")
{
$("#sse")[0].value="停止";
var s = document.getElementById("sd");
s.pause();
}
else
{
$("#sse")[0].value="播放";
ssss(sum);
}
}
if(b==1)
{
sum--;
if(sum==0){sum=15;}
ssss(sum);
}
if(b==3)
{
sum++;
if(sum==16){sum=1;}
ssss(sum);
}
}
</script>
</head>
<body>
<center>
<br/><br/>
<marquee loop id="mar"></marquee>
<audio id="sd"></audio><br/>
<input type="button" value="上一首" id="tt" οnclick="ststs(1)"/>
<input type="button" value="播放" id="sse" οnclick="ststs(2)"/>
<input type="button" value="下一首" id="mm" οnclick="ststs(3)"/>
<h2>我的音樂播放器</h2>
<table style="width:60%;height:300px;">
<tr><td><a href="" οnclick="ssss('1')">panda貓 - 想你.m4a</a></td>
<td><a href="" οnclick="ssss('2')">Sara - 即使知道要見面.mp3</a></td></tr>
<tr><td><a href="" οnclick="ssss('3')">The Collective - Last Christmas.mp3</a></td>
<td><a href="" οnclick="ssss('4')">愛情專屬權-龍梅子.mp3</a></td></tr>
<tr><td><a href="" οnclick="ssss('5')">愛人愛人在哪裏-馬吟吟.mp3</a></td>
<td><a href="" οnclick="ssss('6')">安琥-會有天使替我愛你.mp3</a></td></tr>
<tr><td><a href="" οnclick="ssss('7')">安琥-天使的翅膀.mp3</a></td>
<td><a href="" οnclick="ssss('8')">別用下輩子安慰我-陳瑞.mp3</a></td></tr>
<tr><td><a href="" οnclick="ssss('9')">陳楚生 - 有沒有人曾告訴你.mp3</a></td>
<td><a href="" οnclick="ssss('10')">陳淑樺 - 夢醒時分.mp3</a></td></tr>
<tr><td><a href="" οnclick="ssss('11')">丁當 - 手掌心.mp3</a></td>
<td><a href="" οnclick="ssss('12')">金貴晟 - 虹之間.mp3</a></td></tr>
<tr><td><a href="" οnclick="ssss('13')">馬健南-馬航去的地方.mp3</a></td>
<td><a href="" οnclick="ssss('14')">滿江 - 飛鳥.mp3</a></td></tr>
<tr><td><a href="" οnclick="ssss('15')">不是因爲寂寞纔想你-雷婷</a></td></tr>
</table>
</center>
</body>
</html>