このページの本文へ

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

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

文●古籏一浩

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

audio要素をスクリプトで制御する

 Audioをスクリプトで制御するには、HTMLファイル内に書かれたaudio要素に対して処理する方法と、スクリプトを使ってAudioオブジェクトを作成して制御する方法があります。どちらも使用できるメソッドやプロパティに違いはありません。

 最初に、HTMLファイル内に記述されたaudio要素を制御する方法を試してみましょう。HTMLフォームのボタンを利用して再生、停止、音量変更ボタンを作り、ボタンがクリックされたらスクリプトで制御します。

 HTMLでは、スクリプトで特定するためaudio要素にID名を指定しておきます(auido要素を特定できる場合は指定しなくても構いません)。スクリプトでは、以下のようにして制御するaudio要素を決めます。


var audioObj = document.getElementById("myMusic");


 これで、id="myMusic"が指定されているaudio要素を特定できます。音声の再生はplay()メソッド、停止はpause()です。pause()は音声を一時的に停止させるだけで、再度play()メソッドを実行すると停止した位置から再生が始まります。ちなみに、stop()というメソッドはありません。

 音量は、volumeプロパティに0.0~1.0までの小数値を設定して変更します(値が大きいほど音量は大きくなります)。volumeプロパティに範囲外の値を指定してもSafari、Firefox、Google Chromeではエラーになりませんが、Opera 10.50ではエラーを出しますので注意してください。

 ここまでをまとめたのがサンプル03です。ボタンをクリックすると音声を制御できます。

3.png

ボタンクリックで音声を制御できる


サンプル03[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">
        <script type="text/javascript" src="js/control.js"></script>
    </head>
    <body>
        <h1>スクリプトで音楽を制御する</h1>
        <div>
            <audio id="myMusic" controls loop>
                <source src="music/kfighter.ogg">
                <source src="music/kfighter.wav">
            </audio>
        </div>
        <form>
            <input type="button" value="再生" onclick="start_music()">
            <input type="button" value="停止" onclick="start_pause()"><br>
            <input type="button" value="音量アップ" onclick="volume_up()">
            <input type="button" value="音量ダウン" onclick="volume_down()">
        </form>
    </body>
</html>



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


// 再生開始
function start_music(){
    var audioObj = document.getElementById("myMusic");
    audioObj.play();
}
// 再生停止(一時停止)
function start_pause(){
    var audioObj = document.getElementById("myMusic");
    audioObj.pause();
}
// 音量アップ
function volume_up(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume + 0.1;
}
// 音量ダウン
function volume_down(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume - 0.1;
}


この連載の記事

一覧へ

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

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