どうも！LSSです！！
今日は、WebAudioAPIを利用した「なぞのがっき」を作ってみました！
なぞのがっき
画面を閉じる
ここをクリックすると始まります（注意：音が鳴ります）
終わる時は画面左上に現れる「画面を閉じる」をクリックしてください。
仕様
一応、スマホやタブレットのマルチタッチに対応していますが、PCのマウスクリックでも鳴ります。
タップまたはクリックした場所の「画面上の横位置」に応じた高さの音が鳴ります。（約２秒間）
コード
<style><!--
#gamen{display:none;background-color:#000000e0;width:100%;height:100%;position:fixed;top:0px;left:0px;}
--></style>
<div id="gamen"><br /><br /><span id="batu" style="color: white;">画面を閉じる</span></div>
<p><span id="strt">ここをクリックすると始まります（注意：音が鳴ります）</span></p>
<script>// <![CDATA[
strt.addEventListener('click',gopen,false);
batu.addEventListener('click',gclose,false);
gamen.addEventListener('touchstart',gtc,false);
gamen.addEventListener('click',gclk,false);
AudioContext = window.AudioContext || window.webkitAudioContext;
ctxa=new AudioContext();
function gopen(){gamen.style.display='block';oc0p(440);}
function gclose(){gamen.style.display='none';}
function gtc(e){
for(i=0;i<e.touches.length;i++){
oc0p(440*Math.pow(2,Math.floor(e.touches[i].pageX/50)/12-0.5));
}
}
function gclk(e){
oc0p(440*Math.pow(2,Math.floor(e.pageX/50)/12-0.5));
}
function oc0p(a) {
oc0=ctxa.createOscillator();
oc0g=ctxa.createGain();
oc0t=ctxa.currentTime;
oc0.type='triangle';
oc0.frequency.value=a;
oc0g.gain.setValueAtTime(0.01, oc0t);
oc0g.gain.linearRampToValueAtTime(0.3, oc0t+1 );
oc0g.gain.linearRampToValueAtTime(0.01, oc0t+2 );
oc0.connect(oc0g);
oc0g.connect(ctxa.destination);
oc0.start();
oc0.stop(oc0t + 2);
}
// ]]></script>
唐突に、なぞなものを作った動機
【日記】赤ちゃんのいる家 - Little Strange Software
↑昨日の記事に書いたように、今、生後７か月の姪っ子が我が家に来ています^^
なにかしら姪っ子が楽しめるものを作りたかったのですが、明日にはもう帰ってしまうとの事^^;;;;;
自分も仕事があるので、帰宅後～姪っ子が寝るまでのわずかな時間で作れるもの…と考えた結果、こうなりましたｗ
一応「マルチタッチ対応」と「（ほぼ）全画面表示」だけできていますが、映像までは手が回らず。
あと、音も姪っ子が寝る前に作ったものは少々耳障りな音も入ってしまうバージョンでしたが、こちらは多少改善しています。…寝てしまいましたがｗ
にゃんこの反応
姪っ子よりちょっと年上のにゃんこ（猫とすき焼き）も一緒に遊びにきています。
妹いわく、ふだんパソコンを踏みまくっている、との事でしたが、この「謎の音が出るタブレット」 にはドン引きｗ
妹が触れさせようとしましたが、かなりビビってしまったようで、触ってもらえませんでした^^;;;
やっぱ、画像を動かすなどして、興味を引く必要がありますね。
狩猟本能に呼びかけるような動きでｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
