投稿者 tel | 2014年5月9日

Web Audioで音声ファイルをビジュアライズする

とりあえず簡単に音の大きさを視覚的に表現してみる。

audiovi

http://jsdo.it/sapphire_al2o3/iGjn

AnalyserNodeを使うとFFTした値とかが取れる。

// ドロップしたファイルをAudioに設定して読み込ませる
var audio = new Audio(),
    analyser = context.createAnalyser();
function play() {
    var source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
    audio.play();
}

アナライザーをくっつけて再生。

var timeDomain = new Uint8Array(1024),
    canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
function render() {
    analyser.getByteTimeDomainData(timeDomain);
        
    var r = 0,
        x = canvas.width / 2,
        y = canvas.height / 2;
        
    for(var i = 0; i < timeDomain.length; i++) {
        var t = Math.abs(timeDomain[i] - 128);
        r += t;
    }
        
    r /= timeDomain.length;
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
        
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2.0, false);
    ctx.strokeStyle = '#2985e3';
    ctx.lineWidth = 5;
    ctx.stroke();
}

音の大きさに合わせて円を描く。音の大きさはgetByteTimeDomainDataで取ってきた波形データの平均を使ってみた。(ほんとに音量を表してるのかはよくわかっていない。)
波形データを入れるためのバッファを最初にTyped Arrayで用意しておく。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。