0
再生中の曲がわかるようにしたい。
曲名をクリックでその曲を流す、ボタンで停止と再生、そこまでは出来ているのですが、
再生中の曲名の横にnow playingと表記が出るように(または、再生中のタイトルの色が変わる等でも良いのですが)して、どれが再生中なのかわかるようにしたいです。
以下に記載のものはjavaのサンプルコードを載せているサイトからコピペして、思っている状態にだいぶ近づいているのですがあと一歩がわかりません。
方法を探しているのですが、音声の再生・停止・音声のコントロールについてのものが多く、なかなか見つけられません。
どんなコードをどこに書けばいいのか、どなたか知識のある方、ご教授お願いします。
<section><ul><div align="left" style="margin-left:300px">
<div id="playListArea"></div></section></ul></div><br>
<div id="controller">
<img src="画像.png" id="playButton">
<div id="ctime">0:00</div>
</div>
<style>
section ul {
list-style-position: inside;
list-style-image: url(アイコン.png);
}
</style>
<script>
var fileList = [
{ name :'曲名', url : '音声ファイル.mp3' },
{ name :'曲名1', url : '音声ファイル1.mp3' },
{ name :'曲名2', url : '音声ファイル2.mp3' },
{ name :'曲名3', url : '音声ファイル3.mp3' },
];
var audioObj = new Audio()
var playFlag = false;
var playList = '<ul >';
for(var i=0; i<fileList.length; i++){
playList += '<li onclick=start_music("'+fileList[i].url+'")>';
playList += fileList[i].name + '</li>';
}
playList += '</ul>';
document.getElementById('playListArea').innerHTML = playList;
// 再生開始
function start_music(url){
audioObj.pause();
audioObj = new Audio(url);
audioObj.play();
audioObj.addEventListener('timeupdate', function(){
var sec = '0' + Math.floor(audioObj.currentTime % 60); // 秒数
var min = '0' + Math.floor(audioObj.currentTime / 60); // 分数
sec = sec.substr(sec.length-2, 2);
min = min.substr(min.length-2, 2);
var totalSec = '0' + Math.floor(audioObj.duration % 60); // 秒数
var totalMin = '0' + Math.floor(audioObj.duration / 60); // 分数
totalSec = totalSec.substr(totalSec.length-2, 2);
totalMin = totalMin.substr(totalMin.length-2, 2);
crtTime.innerHTML = min+":"+sec+' ['+ totalMin+':'+totalSec +']';
}, true);
playFlag = true;
pButton.src = 'アイコン.png';
}
var crtTime = document.getElementById('ctime');
var pButton = document.getElementById('playButton');
pButton.addEventListener('click', function(){
if (playFlag == false){
playFlag = true;
audioObj.play();
pButton.src = 'img1.png';
}else{
playFlag = false;
audioObj.pause();
pButton.src = 'img.png';
}
}, true);
</script>