用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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
button{
width: 40px;
/* 寬 */
height: 40px;
/* 高 */
background: #3c88dd;
/* 背景色 */
border:none;
/* 去掉邊框 */
color: white;
/* 字的顏色 */
border-radius: 50%;
/* 50%的圓角 */
cursor: pointer;
/* 滑鼠懸在上時為手形 */
transition: 0.5s;
/* 變化過渡，配合hover用 */
}
button:hover{
/* 滑鼠懸在上時背景變色 */
background: #750f0f;
}
</style>
</head>
<body>
<audio controls id="mymp3">
<source src="yq.mp3" type="audio/mpeg">
<!-- 這裡可以放很多首，為了省事，我只放了一首歌 -->
</audio>
<button id="btplay">播放</button>
<button id="btpause">暫停</button>
<script>
var ebtplay = document.querySelector("#btplay");
var ebtpause = document.querySelector("#btpause");
var emymp3 = document.querySelector("#mymp3");
ebtplay.onclick = function () {
emymp3.play();
};
ebtpause.onclick = function () {
emymp3.pause();
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>播放器練習</title>
<link rel="stylesheet" type="text/css" href="vido.css">
<script type="text/javascript" src="vido2.js"></script>
</head>
<body>
<div id="container">
<div id="player">
<audio src="./music/孤身.mp3" controls autoplay id="aud"></audio>
<div id="buttons">
<button id="btpre">上一首</button>
<button id="next">下一首</button>
</div>
<div id="list">
<ul>
<li>孤身</li>
<li>花香</li>
<li>這一生關於你的風景</li>
</ul>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
#container{
width: 350px;
height: 500px;
background-color: cornflowerblue;
margin: auto;
/* opacity:0.1; */
}
#player{
height: 100px;
width: 350px;
background-color: rgb(30, 108, 172);
}
#player audio{
margin: 20px 20px 0px 20px;
}
#buttons{
width: 150px;
height: 20px;
margin-left: 80px;
display: inline-block;
}
#btpre{
float: left;
margin-right: 40px;
}
#next{
float: right;
}
#list ul{
text-align: center;
list-style-type: none;
}
#list li{
width: 350px;
height: 35px;
line-height: 35px;
border-bottom:1px solid white ;
cursor: pointer;
}
.play{
background-color: rgb(150, 177, 228) ;
color: white;
font-size: bold;
}
window.onload = function () {
var btnPre = document.getElementById('btpre');
var btnNext = document.getElementById('next');
var list = document.getElementById('list');
var aud = document.getElementById('aud');
var li = list.getElementsByTagName('li');
var mymusic = ['./music/孤身.mp3', './music/花香.mp3', './music/這一生關於你的風景.mp3'];//把地址存在一個數組裡
//點擊播放
for (var i = 0; i < li.length; i++) {
li[i].onclick = function () {
for (var i = 0; i < li.length; i++) {
if (this == li[i]) {
li[i].className = 'play';
aud.src = mymusic[i];
aud.play();
} else {
li[i].className = '';
}
}
}
}
//獲取正在播放的音樂
function getPlay() {
for (var r = 0; r < li.length; r++) {
if (li[r].getAttribute('class') == 'play') {
return r;
}
}
}
//循環播放
aud.onended = function () {
var a = getPlay();
a++;
if (a > li.length - 1) {
a = 0;
}
for (var j = 0; j < li.length; j++) {
li[j].className = '';
}
aud.src = mymusic[a];
aud.play();
li[a].className = 'play';
}
//下一首
btnNext.onclick = function () {
var musicIndex = getPlay();
if (musicIndex == li.length - 1) {//判斷是否為最後一首，然後循環播放
musicIndex = -1;
}
aud.src = mymusic[musicIndex + 1];//切換到下一首
aud.play();
for (var j = 0; j < li.length; ++j) {
li[j].className = '';
}
li[musicIndex + 1].className = 'play';
}
//上一首
btnPre.onclick = function () {
var musicIndex = getPlay();
if (musicIndex == 0) {//判斷是否為第一首，然後循環播放
musicIndex = li.length;
}
aud.src = mymusic[musicIndex - 1];//切換到上一首
aud.play();
for (var j = 0; j < li.length; ++j) {
li[j].className = '';
}
li[musicIndex - 1].className = 'play';
}
}
這3款H5播放器，可以為大家學習HTML文本語言提供幫助，希望對大家有所幫助，大家如有需要代碼，關注公眾號平臺代碼即可獲取下載連結。