このページの本文へ

JSONで管理するHTML5音楽プレイヤーを作ってみた (4/4)

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

文●古籏一浩

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

さらに改良を加えるには

 以上で一通りの機能は完成ですが、最後におまけとして、曲ごとにボリュームを設定する機能を追加します。iTunesなどで音楽を購入すると楽曲によってベースになるボリュームがまちまちで、突然大音量で再生されてしまうことがありますから、その回避策というわけです。

 曲ごとにボリュームを変更するには、プレイリストにvolumeプロパティを追加してボリューム値(0.0~1.0)を指定します。volumeの指定がない場合はデフォルトとして最大音量で再生します。実際のスクリプトは以下のとおりです。ただし、筆者が確認したところGoogle Chrome 5ではvolume値が反映されませんでした。


var vol = fileList[i].volume || 1.0;
audioObj.volume = vol;


 以上でオリジナルのサウンドプレイヤーが完成しました(サンプル12)。今回紹介したサンプルをベースに機能を追加していくのも楽しいと思います。たとえば、以前の記事で紹介したjQuery UIのスライダーを使って自由に再生位置を変更したり、曲ごとに異なるビジュアルエフェクトを表示したり、といった機能を付けてもよいかもしれません。

 ちなみに今回のサンプルは残念ながらiPhone (iOS4)やiPadでは再生できませんが、前回のサンプルの多くはiPhone (iOS4)、iPadでも動作します。ただ、ネットワーク経由で音声データをダウンロードするため、再生までにかなりの待ち時間が必要です。それでもモバイルデバイスでHTML5関連技術が使えるのは大きなメリットになるでしょう。それでは、また次回。

11

オリジナルのサウンドプレイヤーが完成した


サンプル12[JavaScript:control.js(一部抜粋)]


// 再生するファイルリスト
$.get('playlistdata.txt', function(data){
    eval('fileList = ['+data+']');
    // 再生するプレイリストを表示
    var playList = '<ul>';
    for(var i=0; i<fileList.length; i++){
        // WAVE形式が再生できるか調べる
        if(audioObj.canPlayType('audio/wav') == 'maybe') { var ext = '.wav'; }
        if(audioObj.canPlayType('audio/ogg') == 'maybe') { var ext = '.ogg'; }
        var vol = fileList[i].volume || 1.0;    // ボリューム設定
        playList += '<li onclick=start_music("'+fileList[i].url+ext+'",'+vol+')>';
        playList += fileList[i].name + '</li>';
    }
    playList += '</ul>';
    document.getElementById('playListArea').innerHTML = playList;
});


サンプル12[playlistdata.txt]


{ name : '戦闘開始', url : 'music/kfighter', volume : 0.25 },
{ name : 'サバイバル', url : 'music/kfighter2' },
{ name : '石の迷宮', url : 'music/dungeon', volume : 1 },
{ name : 'エンディング', url : 'music/ending', volume : 0.7 },
{ name : 'オープニング', url : 'music/opening' }



[曲提供:西尾 将人]

前へ 1 2 3 4 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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