【Web Audio API入門】音楽プレイヤー作成 第1弾

2014年9月2日

Pocket

picjumbo.com_HNCK0644 のコピー

色々な機能を盛り込める今あついWeb Audio APIを使って音楽プレイヤーを自作してみましょう!
Web Audio API入門編は三回に分けて、少しづつ作っていこうと思います。
HTML5から<audio>を使えるので、ただ音楽を再生するならそれを使えば一番簡単なのですが、Web Audio APIではエフェクトをかけたり音楽データを視覚化したり、高度な機能を実装できます。
 
 
今回はとりあえず再生するところまでやってみます。
 
 

AudioContextを作成する

AudioContextは構成ブロックであるAudioNodeの集合やそれらの接続を表すインターフェースでオーディオが入力から出力までの流れを定義します。
まずはAudioContextを作成します。

window.AudioContext = window.AudioContext || window.webkitAudioContext || mozAudioContext; 
	try {
	    var context = new AudioContext();
	} catch (error) {
	    alert('このブラウザは未対応です');
	}

作成に成功したら変数contextにAudioContextを代入しています。
作成に失敗したらアラートを出しています。
 

サウンドをロードする

音楽ファイルをWeb Audio APIへロードするには、XMLHttpRequestを使います。

var xml = new XMLHttpRequest();
//読み込むデータのURLを書く
xml.open('GET', '音楽ファイル', true);
xml.responseType = 'arraybuffer';
xml.onload = function() {
    if (xml.status === 200) {
        //引数を受け取る
        var arrayBuffer = xml.response;
        if (arrayBuffer instanceof ArrayBuffer) {
            var successCallback = function(audioBuffer) {
                //AudioBufferインスタンスを変数へ格納
                buffer = audioBuffer;
            };
            var errorCallback = function() {
                window.alert('読み込みに失敗しました');
            };

            //ArrayBufferデコードする
            context.decodeAudioData(arrayBuffer, successCallback, errorCallback);

        }
    }
};
xml.send(null);

AudioBufferSourceNodeを作成する

//AudioBufferSourceNodeを作成する
source = context.createBufferSource();

//bufferプロパティにAudioBufferインスタンスを設定
source.buffer = buffer;

//ループをオフにする
source.loop = false; 

//AudioBufferSourceNodeインスタンスをAudioDestinationNodeに接続
source.connect(context.destination);

AudioDestinationNode(destination)は音の出口です。
ソースを作成したらAudioDestinationNodeにつないで音が出力できるようにします。
※AudioBufferSourceNodeは使い捨てとなっているので、一度曲をストップするともう一度AudioBufferSourceNodeを作成しなくてはいけないです。
 

サウンドを再生する

//スイッチを入れる
source.start = source.start || source.noteOn;
source.stop  = source.stop  || source.noteOff;

//再生する
source.start(0);

停止するには下記のように表記します。

//停止する
source.stop(0);

 
 
 

DEMO

これらを一連の流れで書いたのが下記のソースです
 
DEMO
 

HTML

<!DOCTYPE html>
<html>
<body>
    <p class="botton" onClick="play()">PLAY</p>
    <p class="botton" onClick="stop()">STOP</p>
</body>
</html>

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext || mozAudioContext; 
try {
    var context = new AudioContext();
} catch (error) {
    alert('このブラウザは未対応です');
}

var xml = new XMLHttpRequest();
//読み込むデータのURLを書く
xml.open('GET', '音楽ファイル', true);
xml.responseType = 'arraybuffer';
xml.onload = function() {
    if (xml.status === 200) {
        //引数を受け取る
        var arrayBuffer = xml.response;
        if (arrayBuffer instanceof ArrayBuffer) {
            var successCallback = function(audioBuffer) {
                //AudioBufferインスタンスを変数へ格納
                buffer = audioBuffer;
            };
            var errorCallback = function() {
                window.alert('読み込みに失敗しました');
            };

            //ArrayBufferデコードする
            context.decodeAudioData(arrayBuffer, successCallback, errorCallback);

        }
    }
};
xml.send(null);

function play(){

    //AudioBufferSourceNodeを作成する
    source = context.createBufferSource();

    //bufferプロパティにAudioBufferインスタンスを設定
    source.buffer = buffer;

    //ループをオフにする
    source.loop = false; 

    //AudioBufferSourceNodeインスタンスをAudioDestinationNodeに接続
    source.connect(context.destination);

    source.start = source.start || source.noteOn;
    source.stop  = source.stop  || source.noteOff;

    //再生
    source.start(0);
}

function stop(){
    source.stop(0);
}

 
 
 
ざっくり再生までの流れをリポートしました。
次回は、一時停止や音量などの機能を付けていきます。
 
 
 
【Web Audio API入門】音楽プレイヤー作成 第2弾
【Web Audio API入門】音楽プレイヤー作成 第3弾

このサイトについて


『意識低い系女と高い系男の一年戦争』はクリエイティブ会社エアゼの代表2人が運営するブログです。エアゼは、アプリ・Web・IoT・インタラクティブコンテンツのデザイン・開発を手がけています。

エアゼ ホームページ