JavaScriptで生成した波形をHTML5のaudioで再生

いかづちSqueak

2015年09月30日 00:02


タイトルの通り。
前々からやりたいと思っていたがやっとできた。
FirefoxとChromeで動作確認。IEはwavに非対応らしい。なんでじゃ。

//ArrayBufferを生成
var arrbuf = new ArrayBuffer(44100*2*5+44); //44.1kHz、2チャンネル、5秒、8bit +ヘッダ分
//ArrayBufferをUint8で扱う。せっかくなのでクランプ。
var uint8arr = new Uint8ClampedArray(arrbuf);
//wavヘッダ。各種データは決め打ち。
var head = [
    0x52, 0x49, 0x46, 0x46, 0xC8, 0xBA, 0x06, 0, 0x57, 0x41, 0x56, 0x45, 0x66, 0x6D, 0x74, 0x20,
    0x10, 0, 0, 0, 0x01, 0, 0x02, 0, 0x44, 0xAC, 0x00, 0x00, 0x88, 0x58, 0x01, 0x00,
    0x02, 0, 0x08, 0, 0x64, 0x61, 0x74, 0x61, 0xA8, 0xBA, 0x06, 0
    ];

var i=0;
for( ; i<head.length; i++)
{
    uint8arr[i] = head[i]; //ヘッダをArrayBufferに入れる
}
for( ; i<uint8arr.length; i++)
{
    uint8arr[i] =(i%256)/3+128 (i%256-128)/3+128; //波形データ生成。鋸歯波。3で割ってるのはボリューム100%だとうるさいから。修正: 直流分出ちゃってました。
}

var blob = new Blob([arrbuf]); //ArrayBufferをBlobに

var bloburl = window.URL.createObjectURL( blob ); //BlobのURLを生成

document.getElementById("aud").src = bloburl; //URLをaudioのsrcに入れる


参考文献:
ArrayBufferとBlob
http://hakuhin.jp/js/array_buffer.html
http://hakuhin.jp/js/blob_url_scheme.html
WAV
http://www.web-sky.org/program/other/wave.php
//
var arrbuf = new ArrayBuffer(44100*2*5+44);//
var uint8arr = new Uint8ClampedArray(arrbuf);//
var head = [//
0x52, 0x49, 0x46, 0x46, 0xC8, 0xBA, 0x06, 0, 0x57, 0x41, 0x56, 0x45, 0x66, 0x6D, 0x74, 0x20,//
0x10, 0, 0, 0, 0x01, 0, 0x02, 0, 0x44, 0xAC, 0x00, 0x00, 0x88, 0x58, 0x01, 0x00,//
0x02, 0, 0x08, 0, 0x64, 0x61, 0x74, 0x61, 0xA8, 0xBA, 0x06, 0//
];//
var i=0;//
for( ; i

関連記事