～ブラウザだけで音を出す入門～

※ここではhtml5のaudioを使っています。ブラウザによっては音が出ません。

※ブラウザのバージョンによっても音が出ません

※音が割れやすいですが何度か鳴らすとマシになります

背景が緑のテキストエリアの中身は改変して結果を試せます

ここを参考にしましたhttp://d.hatena.ne.jp/yanagia/20100323/1269334226

～とりあえず正弦波を作る～

sinを使って0を中心とした波で音の配列を作ります

sinは円周率×2で一周するので最初に円周率×2/周期を求め

その値を変数に足していきながらsinしていきます

function csin(len,syuu,puku){
var a,b,c,d;
a=new Array(len);
c=Math.PI*2/syuu;
d=0;
for(b=0;b<len;b++){
a[b]=Math.sin(d)*puku;
d+=c;
};
return a;
};

len・・・配列の長さ　syuu・・・周期　puku・・・波の大きさ

正弦波の作り方はいろいろあるので興味がある人は自分で調べてください

～バイトデータにする～

こんな感じで配列を渡すと0～255の整数に直す関数を作ります

波の中心が128になるようにします

function soroe(retu){
var a,b;
var len=retu.length;
for(a=0;a<len;a++){
b=Math.floor(retu[a]+128);
if(b<0)b=0;
if(b>255)b=255;
retu[a]=b;
};
};

～WAVEヘッダーをつける～

WAVEファイルとして読み込ませるためにWAVEファイルの頭にある情報を配列にくっつけて返す関数を作ります

function atamaset(retu){
var a,len,zen,bun;
var atama=new Array(82,73,70,70,0,0,0,0,
87,65,86,69,102,109,116,32,16,0,0,0,
1,0,1,0,68,172,0,0,68,172,0,0,1,0,8,0,
100,97,116,97,0,0,0,0);

len=retu.length;

atama[40]=len>>0 & 0xFF;
atama[41]=len>>8 & 0xFF;
atama[42]=len>>16 & 0xFF;
atama[43]=len>>24 & 0xFF;

zen=len+36;　//36はここ以降のヘッダーの長さ

atama[4]=zen>>0 & 0xFF;
atama[5]=zen>>8 & 0xFF;
atama[6]=zen>>16 & 0xFF;
atama[7]=zen>>24 & 0xFF;

return atama.concat(retu);

};

ほとんど決まってる数字なので何も考えずに数字を入れます

ただ40～43個目は音の配列のサイズ、4～7個目は全体のサイズの情報なので4バイトに分解して入れます

& 0xFF　は　%256　のようなものです

他の数字の意味についてはWAVEファイルフォーマットでググるとよいでしょう

～文字列化する～

ブラウザに読み取ってもらうためにbase64エンコードという方法で配列を64進数を表す文字列にする関数を作ります

function b64(retu){
var a,b,c,d,e;
var bun=new Array(64);
var len=retu.length;

a="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
for(b=0;b<64;b++){
bun[b]=a.charAt(b);
};

e=retu.length%3;
if(e==1){
retu.push(0,0);
}else if(e==2){
retu.push(0);
};

len=retu.length/3;
d="";
for(a=0;a<len;a++){
b=a*3;
c=(retu[b]<<16)|(retu[b+1]<<8)|(retu[b+2]);
d+=bun[c>>>18]+bun[(c>>>12)&63]+bun[(c>>>6)&63]+bun[c&63];
};

c=d.length;
if(e==1){
d=d.substring(0,c-2)+"==";
}else if(e==2){
d=d.substring(0,c-1)+"=";
}

return d;
};

まず3つのバイトデータを4つの文字にするため0をpush()して配列の長さを強引に3の倍数にしてしまいます

ループで三つずつ配列を見て一個目＜＜16（65536倍）＋二個目＜＜8（256倍）＋三個目を計算し

その値を＞＞18（÷262144）、＞＞12＆63（÷4096％64）、＞＞6＆63（÷64％64）、＆63（％64）したものに

対応した文字をくっつけていきます

演算子 | はビットが重ならない時の高速足し算です

最後に0をプッシュした存在しないデータの部分を"="に変えます

～HTMLAudioElementオブジェクトを作る～

ここまでの関数も使って波形の配列を渡すとAudioオブジェクトにして返す関数を作ります

function rendering(retu){
var a;
soroe(retu);
a=atamaset(retu);
a=b64(a);
a="data:audio/wav;base64,"+a;
a=new Audio(a);
a.volume=0.4;
return a;
};

波形を渡すと

バイト化→waveヘッダーをつける→base64エンコード→頭に"data:audio/wav;base64,"をつける

を行いnew Audio()でAudioオブジェクトにして返します

ボリュームはデフォルトでMAXなので適当に下げときます

～正弦波を鳴らしてみる～

では正弦波を実際に鳴らしてみます

鳴らすを押すとテキストエリア内の処理が実行されます

ここは書き換えると結果も変化します

aの代わりにグローバル変数をオブジェクトにすれば一度作れば後はplay()だけで同じ音が鳴ります

～頭とケツの音量を下げてプチプチ対策～

いきなり音が鳴ったりいきなり音が止まるとその部分はプチプチ音として知覚されるためなめらかにします

function puti(retu,ata,ket){
var a,b,c;
var len=retu.length;

a=Math.floor(ata/10*len);
for(b=0;b<a;b++){
retu[b]=retu[b]*b/a;
};

a=Math.floor(ket/10*len);
c=len-a;
for(b=c;b<len;b++){
retu[b]=retu[b]*(1-(b-c)/a);
};
};

ata・・頭の音量を下げる長さが全体の何割か　ket・・ケツの（同

頭の1割、ケツの2割を小さくして鳴らしてみます

～加算合成～

二つの配列を足し合わせてみます

単純に値を足すだけです

最大値が±128を超えないようにしましょう

function kasa(r1,r2,ata){
var a,b,c,d,len;

len=r1.length;
if(len<r2.length+ata)len=r2.length+ata;

a=new Array(len);

for(b=0;b<len;b++){
c=r1[b];
d=r2[b-ata];
if(c==undefined)c=0;
if(d==undefined)d=0;
a[b]=c+d;
};

return a;
}

r1,r2・・・配列　ata・・・r2のスタート位置（マイナスはダメ）

周期の違う正弦波をずらして足してみます

～FM変調～

波形を利用して別の波形を発生させます

波形のプラマイのぶんずらした位置の正弦波を求めます

function fmhe(retu,syuu,puku,op){
var a,b,c,ritu,len;
len=retu.length;
a=new Array(len);
ritu=Math.PI*2/syuu;

for(b=0;b<len;b++){
c=b+retu[b]/puku*op*syuu
a[b]=Math.sin(c*ritu)*puku;
};

return a;
};

retu・・利用する波形　syuu・・周期　puku・・波の大きさ　op・・影響度

同じ周期の波形でFM変調してみます

FM変調だけでさまざまな楽器の音を作ることができるようです

詳しくはここを参照してください

DX7 FM音源講座
http://fmdx7.music.coocan.jp/

～ホワイトノイズ～

疑似乱数を使ってホワイトノイズを作ってみます

seed=(641×seed+3313)%100000

を100000回繰り返すとseedの値は0～99999が一回ずつ出現して元に戻ります

この値を利用して波形を作ります

641,3313,100000の値はこれじゃなきゃいけないわけではありません

詳しくは線形合同法でググってみてください

function nois(len,seed,puku){
var a,b,ritu;
a=new Array(len);
ritu=puku*2/100000;

for(b=0;b<len;b++){
seed=(641*seed+3313)%100000;
a[b]=-puku+seed*ritu;
};

return a;
};

len・・長さ　seed・・最初のseedの値　puku・・波の大きさ

～無限インパルス応答～

このかっこいい名前の式を使うことでいろいろなフィルタを作ることができます

ググったらコードが出たので使ってますが意味はまったく理解していません

function mgio(retu,b0,b1,b2,a0,a1,a2){
var x0,x1,x2,y0,y1,y2,c;
var len=retu.length;

x0=x1=x2=y0=y1=y2=0;

for(c=0;c<len;c++){
x2=x1;x1=x0;x0=retu[c];
y2=y1;y1=y0;
y0 = (b0*x0 + b1*x1 + b2*x2 - a1*y1 - a2*y2)/a0;
retu[c]=y0;
};//for

};

retu・・フィルタをかける配列　

b0,b1,b2,a0,a1,a2の値によってフィルタのタイプが決定します

詳しくはこちらで
http://www.wa.commufa.jp/~obaqq75/study/digital_filter/biquad.html

でもローパスフィルタ以外はほとんど使いません

～ローパスフィルタ～

無限インパルス応答を使ってローパスフィルタを作ります

このフィルタを通すと一定より高い音が消えます

function LPF(retu,syuu){
var a,b,c;
if(syuu<7)syuu=7;
a=2*Math.PI/syuu;
b=Math.sin(a)/2;
c=Math.cos(a);
mgio(retu,(1-c)/2,1-c,(1-c)/2,1+b,-2*c,1-b);
};

retu・・フィルタをかける配列　syuu・・これ以下の周期を消す

syuuは7以下だと変になるので7以下にならないようにしてます

～オーバードライブ～

配列に一定の値をかけて絶対値が一定以上にならないようにします

音圧があがる効果があります

function over(retu,bai,puku){
var a,b,len;
len=retu.length;

for(a=0;a<len;a++){
b=retu[a]*bai;
if(b>puku)b=puku;
if(b<-puku)b=-puku;
retu[a]=b;
};
};

retu・・配列　bai・・かける倍率　puku・・上限下限

LPFをかけたホワイトノイズをオーバードライブしてみます

～音階を作る～

A4（高いラ）がちょうど440キロヘルツなのが有名ですがこの情報だけで音階を作れます

グローバルな配列onkai(96)の60個目をA4とします

1オクターブ（半音12個）で周波数が半分になるのでonkai[0]=440/16キロヘルツです

これをループで2の1/12乗倍していけば各周波数がわかります

44100/周波数がその周波数の波形を作る周期になります

この44100という数字（サンプリングレート）はwaveヘッダーの数字をいじれば変えることも可能です

var a,b,c,d,e
a=440/16;
b=Math.pow(2,1/12);

for(c=0;c<8;c++){
d=a;
for(e=0;e<12;e++){
onkai[e+c*12]=44100/d;
d*=b;
};
a*=2;
};

↑これをwindow.onload時にやっときます

ドレミファソラシドを正弦波で鳴らしてみます

～波形を見る～

視覚で波形をチェックできるようにcanvasに波形を描画させる関数を作っておきます

ctxはグローバルな配列にしてあります

function miru(retu,ban,ata){
var a,b,c;
a=ctx[ban];
a.lineWidth=1;
a.fillRect(0,0,400,255);
a.beginPath();
if(retu[ata]==undefined)return;
a.moveTo(0,128-retu[ata]);

for(b=0;b<400;b++){
if(retu[b+ata]==undefined)break;
a.lineTo(b,128-retu[b+ata]);
};

a.stroke();
a.closePath();
};

retu・・チェックする配列　ban・・描画するcanvasの番号　ata・・チェックする位置

3倍の周期でFM変調した波形を見てみましょう

～波形全体を見る～

波形全体の強弱も見れるようにします

function zenmiru(retu,ban,wid){
var a,b,len;
len=retu.length;
a=ctx[ban];
a.lineWidth=wid;
a.fillRect(0,0,400,255);
a.beginPath();
a.moveTo(0,128-retu[0]);

for(b=0;b<len;b++){
a.lineTo(400*b/(len-1),128-retu[b]);
};

a.stroke();
a.closePath();
};

retu・・チェックする配列　ban・・描画するcanvasの番号　wid・・ラインの太さ

～エンベロープを作る～

DTMにおいてエンペロープとは音量を変化させる曲線のことを指します

配列上に直線を引いて作ります

function enbe(){
var a,b,c,d,e,f,g,len;

a=arguments;
len=0;
for(b=0;b<a.length-2;b+=2){
len+=a[b+1];
};

b=new Array(len+1);
g=0;

for(c=0;c<a.length-2;c+=2){
d=a[c];
e=(a[c+2]-d)/a[c+1];
for(f=g;f<g+a[c+1];f++){
b[f]=d;
d+=e;
};
g+=a[c+1];
};

b[len]=a[a.length-1];
return b;
};

引数をそのまま配列に見立てて　値、長さ、値、長さ、値・・・と指定します

～ボリュームエンベロープ～

エンベロープに合わせてボリュームを変化させます

function envo(retu,en){
var a,b,c,ritu,x1,x2;
ritu=(en.length-1)/retu.length

for(a=0;a<retu.length;a++){
b=a*ritu;
c=Math.floor(b)
x2=b-c;
x1=1-x2;
retu[a]=retu[a]*(en[c]*x1+en[c+1]*x2)/100;
};

};

retu・・音の配列　en・・エンベロープの配列

線形補間しているのでエンベロープの長さは気にする必要はありません

全体の形が前回のエンベロープの形になってるのが確認できますね

さらにエンベロープをかけてからFM変調することでFM変調のかかり具合にも変化が出ています

～エンベロープフィルター～

エンベロープに合わせてローパスフィルターのかかり具合を変えてみます

無限インパルス応答の引数が常に変化する状態なので

ローパスフィルターと無限インパルス応答を合体させて作り変えます

function enfi(retu,en,syuu){
var a0,a1,a2,b0,b1,b2,x0,x1,x2,y0,y1,y2;
var c,d,e,f,g,ritu,r1,r2;
x0=x1=x2=y0=y1=y2=0;
ritu=(en.length-1)/retu.length

for(c=0;c<retu.length;c++){
d=c*ritu;
e=Math.floor(d)
r2=d-e;
r1=1-r2;
f=syuu*(en[e]*r1+en[e+1]*r2)/100;
if(f<7)f=7;
d=2*Math.PI/f;
e=Math.sin(d)/2;
f=Math.cos(d);
b0=(1-f)/2; b1=1-f; b2=(1-f)/2;
a0=1+e; a1=-2*f; a2=1-e;
x2=x1;x1=x0;x0=retu[c];
y2=y1;y1=y0;
y0 = (b0*x0 + b1*x1 + b2*x2 - a1*y1 - a2*y2)/a0;
retu[c]=y0;
};

};

retu・・音の配列　en・・エンベロープの配列　syuu・・これ以下の周期を消す

単純に合体させただけでもちろん式の意味はわかってません

ホワイトノイズにエンベロープに合わせたローパスフィルタをかけてみます

～フランジャー～

波形に自分を遅延させた波形を加算します

function fran(retu,bai,ritu){
var a,b,c,d,e,ritu2,r1,r2,len;
len=retu.length;
a=new Array(len);
ritu2=1-ritu;

for(b=0;b<len;b++){
c=b*bai;
d=Math.floor(c);
r2=c-d;
r1=1-r2;
e=retu[d]*r1+retu[d+1]*r2;
a[b]=retu[b]*ritu2+e*ritu;
};

return a;
};

retu・・音の配列　bai・・遅延させる倍率（１以上はエラー）　ritu・・加算する率

～音量をまんべんなくする～

ローパスフィルタでは低音成分がないと波が小さくなってしまいますが

これを一定範囲の絶対値の最大に合わせることで波の大きさを揃えてみます

波形が若干変わってしまうのでノイズ以外ではお勧めしません

function manb(retu,han,puku){
var a,b,c,max,mexiti,len,ritu;
len=retu.length;
if(han>len)han=len;
max=0;

for(a=0;a<han/2;a++){
maxgae(a);
};

for(a=0;a<len;a++){
retu[a]*=ritu;
maxgae(a+han);

if(maxiti<a-han){
max=0;
for(c=a-han;c<a+han;c++){
maxgae(c);
};
};

};

 function maxgae(iti){
 b=Math.abs(retu[iti]);
 if(b>max){
 max=b;
 maxiti=iti;
 ritu=puku/max;
 };
 };

};

retu・・音の配列　han・・チェックする範囲　puku・・揃える大きさ

manbを外して違いをみてください

～ハニングウィンドウ～

巨大な正弦波でボリュームエンベロープをかけます

後の周波数解析で必要になる処理です

function hani(retu){
var a,b,c,len;
len=retu.length;
b=Math.PI*2/len;
c=0;

for(var a=0;a<len;a++){
retu[a]=retu[a]*(0.5-0.5*Math.cos(c));
c+=b;
};

};

retu・・音の配列

～周波数解析～

aを円周率×2/周期として

配列[0]×cos(a)+配列[1]×cos(a×2)+配列[2]×cos(a×3)+・・を一定の区間繰り返すと

その区間にその周期の正弦波がどれくらい含まれているかを調べることができます（離散フーリエ変換）

同様にsinで同じことをすると虚部と呼ばれる成分が出ます（よくわからないので絶対値で足し合わせます）

その際、区間にハニングウィンドウをかけることで区間の長さによる誤差が消えます

一定の周期ごとに周波数を調べると同じcos()を計算することになるので

精度を800と決めうちしてwindow.onloade時に周期800のcos・sinの配列を計算してグローバルcostank・sintankに入れときます

グローバル変数を何度も参照するときはローカルに移したほうが早くなります

function kaiseki(retu,ban,ata,han,bai,syuu){
var a,b,c,d,e,f,g,st,ct,re,im;

st=sintank;
ct=costank;

a=retu.slice(ata,ata+han);
hani(a);
han=a.length;

f=new Array(400);

for(b=1;b<400;b++){
re=im=g=0;

for(c=0;c<han;c++){
re+=a[c]*ct[g];
im+=a[c]*st[g];
g+=b;
if(g>=800)g=g%800;
};

f[b]=Math.abs(re)+Math.abs(im);
};

bai/=30;

a=ctx[ban];
a.fillRect(0,0,400,255);

a.beginPath();
a.lineWidth=3;
a.strokeStyle="rgb(255,0,0)";
b=800/syuu;
a.moveTo(b,245);
a.lineTo(b,255);
a.stroke();
a.closePath();

a.beginPath();
a.strokeStyle="rgb(0,255,255)";
a.lineWidth=1;

for(b=1;b<400;b++){
a.moveTo(b,245);
a.lineTo(b,245-f[b]*bai);
};

a.stroke();
a.closePath();

};

retu・・音の配列　ban・・描画するcanvasの番号　ata・・調べる開始位置　han・・調べる範囲

bai・・グラフの長さ倍率　syuu・・目安になる周期

赤いところがsyuuで設定した基音となる周期です

FM変調一回で倍音成分がたくさん発生してるのがわかりますね

誤差を減らす処理はハニングウィンドウ以外にもあります

詳しくは窓関数でググってください

～残響効果っぽい処理１～

音というものは低音ほど残りやすいそうです

そこで波形を予定より少し長めにつくりそれをsliceしたものとLPFをかけたもので分け

sliceしたもののケツを衰退させてふたつを加算すれば残響っぽくなります

function zank(retu,syuu,naga,ket,ritu){
var a,b,ritu2,len;
ritu2=1-ritu;
len=retu.length;
a=retu.slice(0,naga);
puti(a,0,ket);
LPF(retu,syuu);

for(b=0;b<naga;b++){
retu[b]=retu[b]*ritu+a[b]+ritu2;
};

for(b=naga;b<len;b++){
retu[b]*=ritu;
};

};

retu・・音の配列　syuu・・LPFをかける周期　naga・・sliceする長さ

ket・・sliceしたほうのケツの何割を衰退させるか　ritu・・LPFをかけたほうを加算する率（1以下

～ギターっぽい音～

変調させまくってディストーションギターっぽくしてみます

与えられた周期の何倍で変調するかを関数にすれば

違う高さで同じ音色が作れます

function guit(len,syuu,puku){
e=csin(len,syuu,puku);
e=fmhe(e,30000,puku,0.2);
puti(e,0,10);
e=fmhe(e,syuu*1.5,puku,0.5);
e=fmhe(e,syuu/2,puku,0.7);
LPF(e,syuu/2); 
over(e,3,puku);
e=fran(e,0.996,0.3);
puti(e,1,3);
return e;
};

len・・長さ　syuu・・基音の周期　puku・・波の大きさ

前の音と少し重ねると自然になります

～無音時間をつける～

某ブラウザはバージョンによっては一定以下の長さの音が確実に割れます

これは0,0,0,0・・の配列をくっつけて無理やり長くすれば防げます

function muon(len,nam){
var a,b;
a=new Array(len);
for(b=0;b<len;b++){
a[b]=nam;
};
return a;
};

len・・長さ　nam・・初期値

～楽譜を読む～

文字列から演奏できるようにします

グローバルotolistにドレミに対応した文字列を連想配列にしてonkaiの番号を入れときます

b="まみむめもらりマミムメモラリcdefgabCDEFGABあいうえおかきアイウエオカキ";
c=new Array(39,41,43,44,46,48,50,51);

for(d=0;d<3;d++){
for(e=0;e<7;e++){
a=d*14+e;
otolist[b.substring(a,a+1)]=c[e]+d*12;
otolist[b.substring(a+7,a+8)]=c[e]+d*12+1;
};
};

↑これをwindow.onload時にやっときます

そして一文字ずつ見てその表記を実行します

一度作った波形は保存しておき、同じ長さ同じ高さの音で再利用します

function yomi(bun,naga,hami,puku,func,max){
var a,b,c,d,e,f,g,h,ototank,len;
a=otolist; b=muon(max,0);
ototank=new Array(); g=0; len=naga;

for(c=0;c<bun.length;c++){
d=bun.substring(c,c+1);
e=parseInt(bun.slice(c+1));
if(isNaN(e))e=1;

switch(d){
case "y":
b=b.concat(muon(len*e,0));
g+=len*e;
break;
case "l":
len=Math.floor(naga/e);
break;
case "L":
len=naga*e;
break;
default:
if(a[d]==undefined)continue;
h=d+(len*e);

if(ototank[h]==undefined){
f=func(len*e+hami,onkai[a[d]],puku);
ototank[h]=f;
}else{
f=ototank[h];
};

if(b.length<f.length+g){
b=kasa(b,f,g);
}else{
for(h=0;h<f.length;h++){
b[h+g]+=f[h];
};
};

g+=len*e;
}

};

return b;
};

引数

bun・・・演奏する文字列　naga・・・一音の長さ　hami・・・次の音と重なる長さ

puku・・・波の大きさ　func・・・音色を作る関数　max・・・おおよその全体の長さ

maxが正確なほど高速になります

楽譜の表記

cdefgab・・ドレミファソラシ　あいうえおかき・・1オクターブ上　まみむめもらり・・1オクターブ下

大文字・カタカタ・・半音あげ　　y・・無音　　数字・・伸ばし（省略で1）

ln（１じゃなくてエル）・・一音の長さを最初の1/nにする　　Ln・・・一音の長さを最初のn倍にする

～楽譜をランダムに作る～

与えられた文字を適当に組み立てます

function teki(bun,naga,nobi,nritu,yritu){
var a,b,c,len,ran,flo;
ran=Math.random;
flo=Math.floor;
len=bun.length;
b="";

for(a=0;a<naga;a++){
c=flo(ran()*len);
b+=bun.substring(c,c+1);
if(ran()<nritu)b+=flo(ran()*(nobi-1))+2;
if(ran()<yritu)b+="y";
};

return b;
};

bun・・文字列　naga・・出来上がる音の数　nobi・・伸ばす上限

nritu・・伸ばす率（0～1）　yritu・・休む率（0～1）

↓ここに結果を表示します

あああ

～スケールについて～

一般的にスケールというとピアノの白鍵、ドレミファソラシの音の間隔の並びを指します

これを全て同じ度数でずらしてもスケールです

一音ごとの間隔が一定でないため半音4個あげてミファソラシドレとかにはなりません

基本的な1個以外はどこかに黒鍵が混じります

ここでの表記で表すと次の12種類となります

まみむめもらりcdefgabあいうえおかき
マミむメモラりCDeFGAbアイうエオカき
まみミめもらラcdDfgaAあいイえおかカ
マみむメモらりCdeFGabアいうエオかき
まマミめもモラcCDfgGAあアイえおオカ
まみむメもらりcdeFgabあいうエおかき
マミめメモラりCDfFGAbアイえエオカき
まみむめもらラcdefgaAあいうえおかカ
マミむメモらりCDeFGabアイうエオかき
まみミめもモラcdDfgGAあいイえおオカ
マみむメもらりCdeFgabアいうエおかき
まマミめメモラcCDfFGAあアイえエオカ

童謡などは同じスケール内の音だけで構成されてることが多いため

スケール内の音をランダムに鳴らすだけでそれっぽくなります

～コードっぽいものをランダムに作る～

コードとは曲の伴奏で使う特定の組み合わせの音です

コードの構成音に含まれる音（内音）でメロディーを作っていくとそれっぽくなるそうです

コードはたくさんあって一から覚えるのは大変ですが何も知らなくてもコードっぽいものを作る方法があります

それは スケール内の音を一個とばしで組み合わせる です（ちゃんとコードを知りたい人はググって調べてね）

function code(bun,kazu){
var a,b,c;
len=bun.length;
a=len-(kazu-1)*2;
a=Math.floor(Math.random()*a);

c="";
for(b=0;b<kazu;b++){
c+=bun.substring(a+b*2,a+b*2+1);
}

return c;
};

bun・・スケールの文字列　kazu・・組み合わせる音の数（3か4）

スケールからランダムに作ったコードをランダムに組み合わせて鳴らします

あああ

同じ音が続きやすくなってしまうのはご自分で改変してください

～残響効果っぽい処理２（リバーブ？）～

波形にLPFをかけたものをずらして小さくしながら何度も加算します

その際、ずらす間隔自体が音程になってしまうため間隔に疑似乱数を少し加算します

function dir(retu,time,syuu,bai,kan,kai,seed){
var a,b,c,len,ritu;
len=retu.length;
a=retu.concat(0);
LPF(a,syuu);
d=0;

for(c=0;c<kai;c++){
seed=(641*seed+3313)%100000;
ritu=bai-bai*c/kai;

for(b=time+d;b<len;b++){
retu[b]+=a[b-time-d]*ritu;
};

d+=Math.floor(seed/100000*20)+kan;
};

};

retu・・音の配列　time・・最初にずらす量　syuu・・LPFをかける周期

bai・・最初に加算する率　kan・・ずらしていく間隔　kai・・加算する回数　seed・・乱数のシード値

シード値を変えると響き方が変わります

計算量が多いため一音だけの処理なら残響っぽい処理１のほうがいいです

～高音質のステレオにする～

わかりやすいように１データあたり１バイトで処理してましたが

waveヘッダーの数字を変えれば２バイト、３バイトにすることが可能です

ブラウザが認識するのは3（24bit）までです

さらにステレオにすることも可能です

まずsoroeをマルチバイト用に改造してみます

function soroe2(retu,bit){
var a,b,c,d,e;
var len=retu.length;
c=new Array(len*bit);

for(a=0;a<len;a++){
b=retu[a];
if(b<-128)b=256;
if(b<0)b+=256;
if(b>=256)b=255.99999;

for(e=bit;e>0;e--){
d=Math.floor(b);
c[a*bit+e-1]=d;
if(e==1)break;
b=(b-d)*256;
};

};

return c;
};

配列を与えると複数バイトに分けてbit倍の長さの配列を返します

atamasetを引数からヘッダーをいじれるように改造します

function atamaset2(retu,bit,ste,rate){
var a,b,len,zen,bun;
var atama=new Array(82,73,70,70,0,0,0,0,
87,65,86,69,102,109,116,32,16,0,0,0,
1,0,1,0,68,172,0,0,68,172,0,0,1,0,8,0,
100,97,116,97,0,0,0,0);

len=retu.length;

atama[40]=len>>0 & 0xFF;
atama[41]=len>>8 & 0xFF;
atama[42]=len>>16 & 0xFF;
atama[43]=len>>24 & 0xFF;

zen=len+36;

atama[4]=zen>>0 & 0xFF;
atama[5]=zen>>8 & 0xFF;
atama[6]=zen>>16 & 0xFF;
atama[7]=zen>>24 & 0xFF;

atama[22]=ste;

atama[24]=rate>>0 & 0xFF;
atama[25]=rate>>8 & 0xFF;
atama[26]=rate>>16 & 0xFF;
atama[27]=rate>>24 & 0xFF;

rate*=(bit*ste);

atama[28]=rate>>0 & 0xFF;
atama[29]=rate>>8 & 0xFF;
atama[30]=rate>>16 & 0xFF;
atama[31]=rate>>24 & 0xFF;

atama[32]=bit*ste;

atama[34]=bit*8;

return atama.concat(retu);
};

retu・・音の配列　bit・・データあたりのバイト数（１か２）　ste・・モノラル（１）かステレオ（２）

rate・・サンプリングレート数

22個目がモノラルかステレオかなのでここにsteを入れます

24～27がサンプリングレートなのでここにrateを4バイトに分けて入れます

28～31はよくわかりませんがrate*bit*steなのでこれを4バイトに分けて入れます

32個目はよくわかりませんがbit*steを入れます

34個目はデータあたりのビット数なのでbit*8を入れます

これらをまとめてrendering2を作ります

function rendering2(retu,bit,ste,rate){
var a=retu;

if(bit==1){
soroe(a);
}else{
a=soroe2(a,bit);
}

a=atamaset2(a,bit,ste,rate);
a=b64(a);
a="data:audio/wav;base64,"+a;
a=new Audio(a);
a.volume=0.4;
return a;
};

同じ長さの二つの配列をくっつけてステレオにして返す関数を作ります

ステレオ音源はデータが左右左右左・・となります

function skasa(r1,r2){
var a,b,len;
len=r1.length;
b=new Array(len*2);

for(a=0;a<len;a++){
b[a*2]=r1[a];
b[a*2+1]=r2[a];
};

return b;
};

r1・・左の音の配列　r2・・右の音の配列

右から正弦波、左からギターで鳴らしてみます

～残響効果っぽい処理３（逆位相リバーブ？）～

dirでLPFをかけたものを何度も加算していましたが

これを右で加算、左で減算したステレオにして返すように改造すると

すごく響いた感じがします

function gyak(retu,time,syuu,bai,kan,kai,seed){
var a,b,c,d,e,f,len,ritu;
len=retu.length;
a=retu.concat(0);
e=skasa(retu,a);
LPF(a,syuu);
d=0;

for(c=0;c<kai;c++){
seed=(641*seed+3313)%100000;
ritu=bai-bai*c/kai;

for(b=time+d;b<len;b++){
f=a[b-time-d]*ritu;
e[b*2]-=f;
e[b*2+1]+=f;
};

d+=Math.floor(seed/100000*20)+kan;
};

return e;
};

引数はdirと同じ

シード値によって音のする方向が変わります

～音を保存する～

controlsをつけたaudioタグを用意します

audio id="hozon"

これの.srcに音の文字列を入れます

コントロールから再生できるのを確認したら

再生マークの上で右クリック→名前をつけてオーディオを保存　で保存できます

24bitの音源はまだ一般的に読み取られないことが多いです

function hoz(retu,bit,ste,rate){
var a=retu;

if(bit==1){
soroe(a);
}else{
a=soroe2(a);
}

a=atamaset2(a,bit,ste,rate);
a=b64(a);
a="data:audio/wav;base64,"+a;
document.getElementById("hozon").src=a;
};

引数・・rendering2と同じ

～読み込んだファイルの波形を取得する～

canvasではtodataurl()とかありますが

なんとaudioでは読み込んだ音声データの中身を見るすべがありません

そこでfile選択ダイアログで指定してFileAPIのreadAsBinaryString()でバイナリの文字列を取得します

そこから頭44文字（ヘッダーの長さ）をとったものをcharCodeAtで数字の配列にします

サンプリングレートとデータあたり何バイトかとステレオかも調べときます

function fileyomi(id,func){
var a,b,c,d,f,g,h,i,j,ste,bit,rate;
a=new FileReader();
b=document.getElementById(id).files[0];
a.readAsBinaryString(b);

　a.onload=function(e){
　e=e.target.result;
　c=e.length-44;

　f=new Array(e.length);
　for(d=0;d<e.length;d++){
　f[d]=e.charCodeAt(d);
　};

　rate=(f[27]<<24)|(f[26]<<16)|(f[25]<<8)|f[24];
　ste=f[22];
　bit=Math.floor(f[34]/8);

　if(bit!=1){
　c=Math.floor(c/bit);
　h=new Array(c);
　for(d=0;d<c;d++){
　g=0;j=1;
　for(i=bit;i>0;i--){
　g+=f[d*bit+i-1+44]*j;
　j/=256;
　};
　if(g>128)g-=256;
　h[d]=g;
　};
　f=h;
　}else{
　f=f.slice(44);
　for(d=0;d<f.length;d++){
　f[d]-=128;
　};
　};

　func(f,bit,ste,rate);
　};
};

id・・fileタグのid　func・・次に実行する処理

読み込みは非同期で行われるためonloadを使って読み込み終わってから処理します

なんとonloadはいつ終わるかわからないため戻り値を使うことができません

そこで次に実行する処理をクロージャで渡してむこうで実行してもらいます

解析用にステレオをモノラルにする関数も作っときます

function mono(retu,lr){
var a,b,len;
len=Math.floor(retu.length/2);
a=new Array(len);
for(b=0;b<len;b++){
a[b]=retu[b*2+lr];
};
return a;
};

retu・・ステレオの配列　lr・・左なら0 右なら1

読み込んだ音声を解析して鳴らしてみます

変なものを鳴らしてしまった時のためにグローバル変数で鳴らして止めれるようにしてます

↓id="file1"
　 function stop(){player.pause();};

注意！

※すべてのファイルを無理やり読み込んでしまいます。適正でなかった場合どんな音がするかわからないので注意してください

まだ製作中

苦情は　じゃがりきん　まで