【WebAudioAPI】MMLプレイヤー制作中【なにかがおかしい】

　どうも！LSSです！！

【WebAudioAPI】超簡易MML（作り始めｗ）

に続き、MMLプレイヤーを作っていました。

オクターブ変更・半音階対応・音長指定・３チャンネルまでの同時再生、に対応できました！！

…が、どうも最後の「同時再生」が微妙にズレるような…？？

MMLプレイヤー

<c4>bagfed crcrccde fffec2> b4<c4d4>b4< cdedc2 bbbbb2 <cccc4.>b4 <c1>

o3 r1 e2f2d2e2 c2d2>b2<c2 bbbbb2 f1 e1

まずは「鳴らす」をクリック

まずは「鳴らす」ボタンを押してみてください。

音楽が演奏されます。

３つの入力欄がありますが、そこに入っている文字列を消して違う内容を入力すると、入力に応じた曲に変わります。

MML文法について

音階

cdefgab が「ドレミファソラシ」に対応しています。

例えば「cde」と入力すると、「ドレミ」と鳴ります^^

音の後に#をつけると、半音上がります。

音長

音の後に数値をつけると、音の長さが変わります。

デフォルトでは８分音符の長さですが、c4のように書く事で４分音符になります。

※「c4de」と書くと「ドーレミ」と鳴ります。

また「l8」（小文字のL）のように書くと、デフォルトの音長を変更する事になります。

例えば「l4cd8e8fg」のように書くと「ドーレミファーソー」と鳴ります。

更に、数値の後に「.」をつけると付点になります。

例えば「e4.」だと「付点４分音符（８分音符３つ分の長さ）」のミの音になります。

休符

r が休符です。

cdefgabの音と同様に長さを指定できます。

オクターブ

デフォルトのオクターブは「4」ですが、「o3」のように書く事で違うオクターブを指定できます。

また「<」で１オクターブ上がり、「>」で１オクターブ下がる、という指定もできます。

その他 

スペースや改行など、上記以外の記述は無視されます。

読みやすいように適度にスペースを入れて区切りにするといいですね^^
（前述の音階と#の間や数値との間は不可）

同時再生については（仮）って事で^^;

うまくできたように思いましたが、どうも、複数の音を同時に演奏していると、微妙にズレが生じるような…^^;;;

そもそもの音長の指定に問題がある可能性もありますね^^;

原因不明ですが、いったんあげてしまいます！

色々入力して遊んでみてくださいね^^

クリックしてコードを表示

<p><textarea id="mml0" cols="32" rows="4">&lt;c4&gt;bagfed crcrccde fffec2&gt; b4&lt;c4d4&gt;b4&lt; cdedc2 bbbbb2 &lt;cccc4.&gt;b4 &lt;c1&gt;</textarea></p>
<p><textarea id="mml1" cols="32" rows="4">o3 r1 e2f2d2e2 c2d2&gt;b2&lt;c2 bbbbb2 f1 e1</textarea></p>
<p><textarea id="mml2" cols="32" rows="4">&nbsp;</textarea></p>
<p><input id="btn" type="button" value="鳴らす" /><input id="stopbtn" type="button" value="止める" /></p>
<script>// <![CDATA[
AudioContext = window.AudioContext || window.webkitAudioContext;
ctxa=new AudioContext();
btn.addEventListener('click',mmlplay,false);
stopbtn.addEventListener('click',function(){for(i=0;i<3;i++){clearTimeout(tm[i]);}},false);
oct=[];
ngs=[];
tm=[];
onkai=[0,2,4,5,7,9,11];
pos=[];
function mmlplay(){
for(i=0;i<3;i++){
pos[i]=0;
oct[i]=4;
ngs[i]=0.25;
tmr(i);
}
}
function tmr(ch){
mj=document.getElementById('mml'+ch).value;
mj0=mj.charAt(pos[ch]);
mj1=mj.charAt(pos[ch]+1);
if(mj1=='#'){sh=1;}else{sh=0;};
pos[ch]+=sh+1;
nagasa=ngs[ch];
mj2=mj.substr(pos[ch]).match(/^\d+/);
if(mj2!=null){
pos[ch]+=mj2.length;
nagasa=2/parseFloat(mj2);
if(mj.charAt(pos[ch])=='.'){
pos[ch]++;nagasa*=1.5;
}
}
if(mj0>='a' && mj0<='g'){
oc0p(oct[ch]*12+onkai['cdefgab'.indexOf(mj0)]+sh,nagasa);
tm[ch]=setTimeout('tmr('+ch+')',nagasa*1000);}
else if(mj0=='r'){tm[ch]=setTimeout('tmr('+ch+')',nagasa*1000);}
else if(mj0=='l'){ngs[ch]=nagasa;tmr(ch);}
else if(mj0=='o'){oct[ch]=parseInt(mj2);tmr(ch);}
else if(mj0=='<'){oct[ch]++;tmr(ch);}
else if(mj0=='>'){oct[ch]--;tmr(ch);}
else{if(mj.length>=pos[ch]){tmr(ch);}
}
}
function oc0p(a,b) {
oc0=ctxa.createOscillator();
oc0g=ctxa.createGain();
oc0t=ctxa.currentTime;
oc0.type='triangle';
oc0.frequency.value=442*Math.pow(2,(a-9)/12-4);
oc0g.gain.setValueAtTime(0.01, oc0t);
oc0g.gain.linearRampToValueAtTime(0.3, oc0t+b/5 );
oc0g.gain.linearRampToValueAtTime(0.01, oc0t+b );
oc0.connect(oc0g);
oc0g.connect(ctxa.destination);
oc0.start();
oc0.stop(oc0t + b);
}
// ]]></script>

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^