html5+原生js製作一個簡易音樂播放器
最近學了html5的audio標籤，然後就想着做一個音樂播放器。
下面是效果圖
emmmmm有點醜陋，隨着以後學的更多，之後會完善噠~
播放器實現的功能
- 點擊播放
- 自動循環播放
- 上一首
- 下一首
下面是具體代碼
註釋寫的很詳細，大家可以複製之後體驗~
歌我就隨便選了三個，可以修改成自己喜歡的。
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 class="play">孤身</li>
<li>花香</li>
<li>這一生關於你的風景</li>
</ul>
</div>
</div>
</div>
</body>
</html>
css
*{
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;
}
js
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';
}
}
目錄
這裏立一個小小的flag希望自己以後可以變成技術大牛,O(∩_∩)O哈哈~