たまりば

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

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)/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

  • 同じカテゴリー(プログラム・アルゴリズム)の記事画像
    6段のカレンダーが好きだ
    ファミコンで9×9ドット文字表示(ほか)
    JPEG圧縮を繰り返しても際限なく劣化するわけではない
    ゲームボーイの吸い出し機を作った (後編)
    ファミコンで全画面に任意の画像(ただしモノクロ)を表示
    最近のWindowsのビットマップフォントの太字
    同じカテゴリー(プログラム・アルゴリズム)の記事
     CDのピットの数 (2021-03-05 23:32)
     6段のカレンダーが好きだ (2020-11-15 04:06)
     PIC16のDhrystone MIPSを測ろうとしてみた (2020-04-29 02:23)
     Twitterの画像の扱いがやっとまともになって嬉しい (2019-06-23 00:23)
     ファミコンで9×9ドット文字表示(ほか) (2019-04-08 02:02)
     謎の色名「honeydewtab」とlegacy color valueパース手順 (2018-03-24 12:45)
    URL欄を実験的に消してる間に廃止されてしまいました。まあいいか。
     
    <ご注意>
    書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
    削除
    JavaScriptで生成した波形をHTML5のaudioで再生
      コメント(0)