再生ボタンと再生時間を表示する
プレイリストが表示できたら、今度はオリジナルの再生ボタンを追加し、サウンドプレイヤーらしく再生時間／曲の総再生時間も表示してみましょう。
最初に、再生ボタンや再生時間を表示する領域（コンテナ）をHTMLに用意します。ここでは以下のようにdiv要素を1つ作り、その中に再生ボタンの画像と再生時間を表示するdiv要素を用意しました。
<div id="controller">
<img src="images/on.png" id="playButton">
<div id="ctime">0:00</div>
</div>
これでHTMLの準備は完了です。
スクリプト側では、音楽が再生されているかどうかを示すフラグ変数を用意します。
var playFlag = false;
trueなら再生中、falseなら停止中です。デフォルトではfalse（停止中）になっているので、最初にボタンがクリックされると選択中の音声ファイルを再生して、フラグ変数の値をtrueに変更します。プレイリストで曲が選択されていない（クリックされていない）場合は再生されません。
すでに再生中の状態でボタンをクリックすると、フラグ変数の値がtrueなので、再生を停止し、値をfalseに変更します。これで、ボタンをクリックするたびに音楽のON／OFFを切り替えられます。あとは、ON／OFFに応じてボタンの画像を入れ替えれば、再生ボタンの実装は完了です。
var pButton = document.getElementById('playButton');
// 再生ボタンのイベントを設定
pButton.addEventListener('click', function(){
if (playFlag == false){
playFlag = true; // 再生フラグ：再生中にする
audioObj.play();
pButton.src = 'images/off.png';
}else{
playFlag = false; // 再生フラグ：停止中にする
audioObj.pause();
pButton.src = 'images/on.png';
}
}, true);
次に再生時間の表示です。再生時間は、HTML5 Videoと同様にcurrentTimeプロパティで取得できます（関連記事）。総再生時間はdurationプロパティに格納されているので、timeupdateイベントが発生したらcurrentTimeとdurationを読み出してコントローラー上に表示します。今回は分と秒を常に2桁の値で表示しています。
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);
ここまでをまとめたのがサンプル07です。
プレイリスト内の曲名をクリックすると音楽が再生され、再生時間が表示されます。再生中に再生ボタンをクリックすると音楽は停止し、再度クリックすると再生を再開します。
曲名をクリックすると再生が開始され再生時間が表示される。再生ボタンをクリックして再生を再生／停止できる
●サンプル07[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>オリジナルサウンドプレイヤー</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
</head>
<body>
<div id="playListArea"></div>
<div id="controller">
<img src="images/on.png" id="playButton">
<div id="ctime">0:00</div>
</div>
<script type="text/javascript" src="js/control.js"></script>
</body>
</html>
●サンプル07[JavaScript:control.js]
// 再生するファイルリスト
var fileList = [
{ name : '戦闘開始', url : 'music/kfighter.wav' },
{ name : 'サバイバル', url : 'music/kfighter2.wav' },
{ name : '石の迷宮', url : 'music/dungeon.wav' },
{ name : 'エンディング', url : 'music/ending.wav' },
{ name : 'オープニング', url : 'music/opening.wav' }
];
// Audioオブジェクト
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 = 'images/off.png';
}
// イベント設定
var crtTime = document.getElementById('ctime');
var pButton = document.getElementById('playButton');
// 再生ボタンのイベントを設定
pButton.addEventListener('click', function(){
if (playFlag == false){
playFlag = true; // 再生フラグ：再生中にする
audioObj.play();
pButton.src = 'images/off.png';
}else{
playFlag = false; // 再生フラグ：停止中にする
audioObj.pause();
pButton.src = 'images/on.png';
}
}, true);
