【WebAudioAPI】なぞのがっき２【スマホ専用】

　どうも！LSSです！！

ほとんどのスマホには加速度センサー（動かした時の速度）や、ジャイロセンサー（傾き検知）が搭載されています。

自分がスマホを使い始めた頃は、それらのセンサーを使ったゲーム（TempleRunとか）を遊んだ覚えがありますが、近年まったくと言っていいほど、センサーを活用したものを見かけない気が…。

単にLSSが知らないだけかもですが、それはさておき。

JavaScriptからも、それらのセンサーを読み取る事ができるので、今回は
「加速度センサーを利用した なぞのがっき」
を作ってみました！

（今回はスマホ専用です。）

なぞのがっき２

閉じる



スマホを振ると音がなります！
すっぽ抜けて投げてしまわないよう注意！！
右上の「閉じる」で終了します。

なぞのがっき２
（注：音が鳴ります）

↑をクリックすると、画面全体が黒くなります。

その状態でスマホを振ると、音が鳴ります。

振る速度が速いほど音が高くなります、がくれぐれもスマホをぶん投げてしまわないよう、しっかり持って、無理のない範囲で遊んでください^^

終了する時は画面右上の

を押すと楽器が終了します。

コード

<div id="fullscr" style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #000000e0; z-index: 15; display: none; text-align: center;"><span id="fullscrclose" style="position: absolute; top: 50px; right: 10px; background-color: white; padding: 5px; border-radius: 5px; border: 1px solid black;">閉じる</span> <br /><br /><br /><br /><span style="color: white;">スマホを振ると音がなります！<br />すっぽ抜けて投げてしまわないよう注意！！<br />右上の「閉じる」で終了します。</span></div>
<div id="fullscropen" style="display:inline-block;border-radius: 5px; border: 1px solid black; background-color: white; padding: 5px;">なぞのがっき２<br/>（注：音が鳴ります）</div>
<script>// <![CDATA[
AudioContext = window.AudioContext || window.webkitAudioContext;
ctxa=new AudioContext();
onkai=[0,2,4,5,7,9,11];
fullscropen.addEventListener('touchend',function(e){e.preventDefault();oc0p(0,0.5);fullscr.style.display='block';window.addEventListener('devicemotion',dvm,false);},false);
fullscropen.addEventListener('click',function(){fullscr.style.display='block';},false);
fullscrclose.addEventListener('touchend',function(e){e.preventDefault();fullscr.style.display='none';window.removeEventListener('devicemotion',dvm,false);},false);
fullscrclose.addEventListener('click',function(){fullscr.style.display='none';},false);
function dvm(e){
ac=e.acceleration;
acs=(Math.abs(ac.x)+Math.abs(ac.y)*2+Math.abs(ac.z)*0.5-10)/5;
if(acs>0){oc0p(onkai[Math.floor(acs%7)]/12-3/4+Math.floor(acs/7),0.5)}
}
function oc0p(a,b){
oc0=ctxa.createOscillator();
oc0g=ctxa.createGain();
oc0t=ctxa.currentTime;
oc0.type='triangle';
oc0.frequency.value=442*Math.pow(2,a);
oc0g.gain.setValueAtTime(0.01,oc0t);
oc0g.gain.linearRampToValueAtTime(0.3,oc0t+0.1 );
oc0g.gain.linearRampToValueAtTime(0.01,oc0t+b );
oc0.connect(oc0g);
oc0g.connect(ctxa.destination);
oc0.start();
oc0.stop(oc0t+b);
}
// ]]></script>

加速度センサー

window.addEventListener('devicemotion',dvm,false);

で、スマホが動いた時に、イベントリスナーで関数を呼び出します。

function dvm(e){
呼ばれた関数の方で、「e」でイベントを受け取ると、

e.acceleration.x
e.acceleration.y
e.acceleration.z

で、X軸・Y軸・Z軸の加速度が取得できます。

今回はこれらの加速度の値の合計が一定値以上の場合、WebAudioAPIで音を鳴らすようにしました。

音について

WebAudioAPIのほうでは、今回は半音階（ピアノでいうと黒鍵）は出ないように、白鍵の音（ドレミファソラシ）だけが出るようにしました。

ただ、加速中に次々となるため、ごちゃごちゃな音になってますｗ

あとがき

【CSS＋JavaScript】フルスクリーン表示サンプル 

【WebAudioAPI】なぞのがっき を作ってみました

で やった事＋加速度センサー、という感じで作成した今回の「なぞのがっき２」ですが、鳴らしてると…赤ちゃん向けのガラガラを鳴らしてるみたいな気になってきますｗ

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

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