このページの本文へ

HTML5 Audioで作るiTunes風音楽プレイヤー (4/7)

2010年06月03日 10時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

複数の音声ファイルをスクリプトで制御する

 スクリプトでHTML Audioを制御する方法は分かりましたが、複数の曲(音声ファイル)を扱うサウンドプレイヤーの場合、audio要素を記述する方法は面倒です。そこで今度は、HTMLファイル内にaudio要素を記述せず、すべてスクリプト内で処理する方法を試してみましょう。

 まず音声ファイルを複数用意し、ファイルのURLをJavaScriptの配列内に入れておきます。これで、配列内のデータがそのままサウンドプレイヤーのプレイリストになります。

 今回は以下のように音声ファイルを用意しました。musicフォルダ内に再生するWave形式のファイルを入れてあります


var fileList = [
    'music/kfighter.wav',
    'music/kfighter2.wav',
    'music/dungeon.wav',
    'music/ending.wav',
    'music/opening.wav'
];


 再生するファイルの一覧をページ内に表示し、ファイル名がクリックされたらそのファイルを再生します。あらかじめ<div id="playListArea"></div>としてプレイリストを表示する領域(コンテナ)を用意しておき、リストタグにclickイベントを設定して出力します。


var playList = '<ul>';
for(var i=0; i<fileList.length; i++){
    playList += '<li onclick=start_music("'+fileList[i]+'")>';
    playList += fileList[i] + '</li>';
}
playList += '</ul>';
document.getElementById("playListArea").innerHTML = playList;


 リストがクリックされるとstart_music()関数が呼び出され、引数に再生する音声ファイルのURLが渡されます。あとはURLをnew Audio()の引数に指定してplay()メソッドを呼び出せばOKです。


var audioObj = new Audio(url);
audioObj.play();


 ここまでをまとめたのがサンプル04です。リストに表示されたURL(ファイルパス)をクリックすると音楽が再生されます。

4.png

リスト項目をクリックすると再生される


サンプル04[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>
        <script type="text/javascript" src="js/control.js"></script>
    </body>
</html>


サンプル04[JavaScript:control.js]


// 再生するファイルリスト
var fileList = [
    'music/kfighter.wav',
    'music/kfighter2.wav',
    'music/dungeon.wav',
    'music/ending.wav',
    'music/opening.wav'
];
// 再生するプレイリストを表示
var playList = '<ul>';
for(var i=0; i<fileList.length; i++){
    playList += '<li onclick=start_music("'+fileList[i]+'")>';
    playList += fileList[i] + '</li>';
}
playList += '</ul>';
document.getElementById("playListArea").innerHTML = playList;
// 再生開始
function start_music(url){
    var audioObj = new Audio(url);
    audioObj.play();
}


 サンプル04はリストを次々にクリックすると音楽が重なってしまう問題があります。そこで、同時に1つの音声ファイルしか再生できないように修正したのがサンプル05です。

 あらかじめ以下のようにAudioオブジェクトを作成します。


var audioObj = new Audio();


 多重再生を禁止するため、以下のようにpause()メソッドを使っていったん再生を停止します。


audioObj.pause();


サンプル05[JavaScript:control.js](HTMLファイルはサンプル4と同じ)


// 再生するファイルリスト
var fileList = [
    'music/kfighter.wav',
    'music/kfighter2.wav',
    'music/dungeon.wav',
    'music/ending.wav',
    'music/opening.wav'
];
// Audioオブジェクト
var audioObj = new Audio();
// 再生するプレイリストを表示
var playList = '<ul>';
for(var i=0; i<fileList.length; i++){
    playList += '<li onclick=start_music("'+fileList[i]+'")>';
    playList += fileList[i] + '</li>';
}
playList += '</ul>';
document.getElementById("playListArea").innerHTML = playList;
// 再生開始
function start_music(url){
    audioObj.pause(); // これがないと以前の音楽は停止しない
    audioObj = new Audio(url);
    audioObj.play();
}



※ Google ChromeではWave形式に対応していないため、このままでは音声が再生されません。Google Chromeへの対応については後で説明します

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く