簡易音楽プレーヤー-PartThreeを実現
10660 ワード
音楽終了応答
制御部は、音楽メディアファイルメディアファイルの再生が終了した後も、その再生終了イベントに応答せずに実行を継続する前の動作(パラメータとしての現在時間
プレイリスト、トラックコントロールなどを実現
今、次のコードを整理してプレイリストの準備をします-音楽の再生と一時停止コードを関数(
制御部は、音楽メディアファイルメディアファイルの再生が終了した後も、その再生終了イベントに応答せずに実行を継続する前の動作(パラメータとしての現在時間
currentTimeは変更されず、同じ状態が維持される).音楽メディアは、再生終了時にendedイベントをトリガーし、endedイベントをリスニングして対応する操作を行う(現在、リストを再生していない場合はタイマーをはっきりさせ、ボタンのスタイルを変更するなど). music.addEventListener('ended', () => {
controlTwo.className = "play-control-button play";
clearInterval(timer);
})
プレイリスト、トラックコントロールなどを実現
今、次のコードを整理してプレイリストの準備をします-音楽の再生と一時停止コードを関数(
musicPlayとmusicPause)にカプセル化して、後のプレイリストの呼び出しを便利にします;srcを空にして後の音楽オブジェクトから設定を読み出す. 新規オブジェクトmusicObjは、音楽のタイトル、パス、時間、著者等の音楽に関する情報を格納する(ここで、タイトル、著者等の情報は、音楽ファイルのID 3情報から読み取ることができ、ここでは直接書き込まれた偽データで代用する).新しい配列musicListObjは、プレイリスト内の各音楽オブジェクトを格納するために作成される.musicListObjに従ってプレイリストをレンダリングし、各clickイベントをリスニングし、親要素musicListにバブルして対応する処理を行う.
MusicControl
00:00
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;
}