实现简易音乐播放器-PartThree
2018-06-12 本文已影响0人
Gettingjie
音乐结束响应
控制单元在音乐媒体文件媒体文件结束播放后并未响应其播放结束事件而在继续的执行之前的行为(作为参数的当前时间 currentTime 不会改变了才使得一直维持在相同的状态)。
音乐媒体在结束播放时会触发其 ended 事件，监听其 ended 事件以对进行相应的操作(目前没播放列表的时候为清楚定时器，改变按钮的样式等)。
music.addEventListener('ended', () => {
controlTwo.className = "play-control-button play";
clearInterval(timer);
})
实现播放列表、曲目控制等
现在，整理下一代码来为播放列表的做一下准备-将音乐的播放和暂停代码封装成函数( musicPlay 和 musicPause )，以方便后面播放列表的调用；将 <audio> 的 src 设置为空而从后面的音乐对象中读取设置。
新建对象 musicObj 来存放音乐的相关信息如音乐的标题、路径、时长、作者等(其中标题、作者等信息可以从音乐文件的ID3信息中读取，这里用直接写入的假数据来替代)。新建一个数组 musicListObj 来存放播放列表中的每一个音乐对象。根据 musicListObj 来渲染出播放列表，监听各项的 click 事件并冒泡到父元素 musicList 来进行相应的处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MusicControl</title>
<style>
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.control-button {
margin-top: 10px;
margin-left: 20px;
}
.clear-both::after {
content: '';
display: block;
clear: both;
}
.play-control-button {
width: 64px;
height: 64px;
background-image: url(icons.png);
float: left;
margin-right: 10px;
cursor: pointer;
}
.prev {
background-position: 0 0;
}
.next {
background-position: 0 -64px;
}
.play {
background-position: 0 -192px;
}
.pause {
background-position: 0 -128px;
}
.control-bar {
margin-top: 20px;
margin-left: 20px;
}
.controlTime {
float: left;
color: #ccc;
}
.play-control-progress {
position: relative;
margin-left: 8px;
margin-right: 8px;
margin-top: 8px;
float: left;
display: block;
width: 300px;
height: 5px;
background-color: #ccc;
}
.playing-progress {
position: absolute;
display: block;
height: 100%;
width: 0%;
background-color: #2f9842;
}
.playing-bar {
position: absolute;
margin-top: -1.5px;
margin-left: -4px;
width: 8px;
height: 8px;
background-color: #2f9842;
border: 0.5px solid #000;
border-radius: 50%
}
.music-list li {
display: block;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<audio id="music" src=""></audio>
<div class="control-button clear-both">
<div class="play-control-button prev" id="controlOne"></div>
<div class="play-control-button play" id="controlTwo"></div>
<div class="play-control-button next" id="controlThree"></div>
</div>
<div class="control-bar clear-both">
<span class="controlTime" id="nowTime">00:00</span>
<div class="play-control-progress" id="controlProgress">
<div class="playing-progress" id="playingProgress"></div>
<div class="playing-bar" id="playingBar"></div>
</div>
<span class="controlTime" id="endTime">00:00</span>
</div>
<div>
<ul class="music-list clear-both" id="musicList">
</ul>
</div>
<script>
window.onload = function() {
let music = document.getElementById('music');
let controlOne = document.getElementById('controlOne');
let controlTwo = document.getElementById('controlTwo');
let controlThree = document.getElementById('controlThree');
let controlProgress = document.getElementById('controlProgress');
let playingProgress = document.getElementById('playingProgress');
let playingBar = document.getElementById('playingBar');
let nowTime = document.getElementById('nowTime');
let endTime = document.getElementById('endTime');
let musicList = document.getElementById('musicList');
let drag = 0;
let flag = 0;
nowTime.innerText = "00:00";
function getMin(min) {
let res = parseInt(min / 60);
if(res < 10) {
return '0' + res;
} else {
return res + '';
}
}
function getSec(min) {
let res = parseInt(min % 60);
if(res < 10) {
return '0' + res;
} else {
return res + '';
}
}
let timer = '';
let stop = '';
function musicPlay() {
controlTwo.className = "play-control-button pause"
music.play();
timer = setInterval(() => {
let progressLen = music.currentTime / music.duration * controlProgress.clientWidth;
nowTime.innerText = getMin(music.currentTime) + ":" + getSec(music.currentTime);
playingProgress.style.width = progressLen + 'px';
playingBar.style.marginLeft = progressLen - 4 + 'px';
}, 1000);
};
function musicPause() {
controlTwo.className = "play-control-button play";
music.pause();
clearInterval(timer);
}
controlTwo.addEventListener('click', () => {
console.log("Click");
if(controlTwo.className == "play-control-button play") {
musicPlay();
} else if (controlTwo.className == "play-control-button pause") {
musicPause();
}
});
controlProgress.addEventListener('click', (e) => {
let rate = ((e.clientX - controlProgress.getBoundingClientRect().left) / controlProgress.clientWidth);
let progressLen = e.clientX - controlProgress.getBoundingClientRect().left;
playingProgress.style.width = progressLen + 'px';
playingBar.style.marginLeft = progressLen - 4 + 'px';
let theTime = parseInt(rate * (music.duration))
music.currentTime = theTime;
nowTime.innerText = getMin(theTime) + ":" + getSec(theTime);
console.log(rate);
});
let dragTime = 0;
playingBar.addEventListener('mousedown', () => {
console.log('mousedown');
drag = 1;
flag = 1;
clearInterval(timer);
});
document.addEventListener('mouseup', () => {
console.log('mouseup');
drag = 0;
if(flag == 1) {
music.currentTime = dragTime;
timer = setInterval(() => {
let progressLen = music.currentTime / music.duration * controlProgress.clientWidth;
nowTime.innerText = getMin(music.currentTime) + ":" + getSec(music.currentTime);
playingProgress.style.width = progressLen + 'px';
playingBar.style.marginLeft = progressLen - 4 + 'px';
}, 1000);
}
flag = 0;
});
controlProgress.addEventListener('mousemove', (e) => {
if(drag == 1) {
console.log('mousemove');
let progressLen = e.clientX - controlProgress.getBoundingClientRect().left;
let rate = (progressLen / controlProgress.clientWidth);
playingProgress.style.width = progressLen + 'px';
playingBar.style.marginLeft = progressLen - 4 + 'px';
let theTime = parseInt(rate * (music.duration));
nowTime.innerText = getMin(theTime) + ":" + getSec(theTime);
dragTime = theTime;
}
});
music.addEventListener('ended', () => {
controlTwo.className = "play-control-button play";
clearInterval(timer);
});
class musicObj {
constructor(name, src, author, time) {
this.name = name;
this.src = src;
this.author = author;
this.time = time;
}
};
let musicNameList = ['MusicOne', 'MusicTwo', 'MusicThree'];
let musicSrcLsit = ['Demo0.mp3', 'Demo1.mp3', 'Demo2.mp3'];
let musicAuthorList = ['AuthorOne', 'AuthorTwo', 'AuthorThree'];
let musicTimeList = ['04:01', '02:00', '03:40'];
let musicListObj = new Array();
for(let i in musicNameList) {
musicListObj[i] = new musicObj(musicNameList[i], musicSrcLsit[i], musicAuthorList[i], musicTimeList[i]);
}
console.log(musicListObj);
for(let i in musicListObj) {
let newNode = document.createElement('li');
newNode.setAttribute('data-src', musicListObj[i].src);
newNode.setAttribute('data-time', musicListObj[i].time);
newNode.innerText = musicListObj[i].name + ' - ' + musicListObj[i].author;
musicList.appendChild(newNode);
}
musicList.addEventListener('click', (e) => {
e = e || window.e;
let musicSrc = e.target.getAttribute('data-src');
musicPause();
music.setAttribute('src', musicSrc);
music.currentTime = 0;
endTime.innerText = e.target.getAttribute('data-time');
musicPlay();
e.stopPropagation();
});
music.src = musicListObj[0].src;
endTime.innerText = musicListObj[0].time;
}
</script>
</body>
</html>
