たまりば

  パソコン・インターネット パソコン・インターネット  三鷹市 三鷹市

JavaScriptで生成した波形をHTML5のaudioで再生
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-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に入れる
15/10/03 修正
(i%256)/3+128 → (i%256-128)/3+128
直流分出ちゃってました。


参考文献:
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

  • 同じカテゴリー(プログラム)の記事画像
    JPEG圧縮を繰り返しても際限なく劣化するわけではない
    ゲームボーイの吸い出し機を作った (後編)
    ファミコンで全画面に任意の画像(ただしモノクロ)を表示
    最近のWindowsのビットマップフォントの太字
    PCのキーボードのアーウが反応しなくなったあどうすえばよいか
    ARMマイコンはじめました。
    同じカテゴリー(プログラム)の記事
     謎の色名「honeydewtab」とlegacy color valueパース手順 (2018-03-24 12:45)
     JPEG圧縮を繰り返しても際限なく劣化するわけではない (2017-02-10 01:47)
     ゲームボーイの吸い出し機を作った (後編) (2017-01-16 22:44)
     ファミコンで全画面に任意の画像(ただしモノクロ)を表示 (2017-01-14 00:00)
     最近のWindowsのビットマップフォントの太字 (2017-01-09 18:49)
     浮動小数点数の10進指数表示のアルゴリズム (2016-12-28 01:28)
    URL欄を実験的に消してる間に廃止されてしまいました。まあいいか。
     
    <ご注意>
    書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
    削除
    JavaScriptで生成した波形をHTML5のaudioで再生
      コメント(0)