どうも！LSSです！！
の記事に、
とのコメントをいただきました。
なるほど、子ども向けのおもちゃの楽器にありそうな感じですね^^
そして、WebAudioAPIを使えば、JavaScriptによってWebページ上で音を鳴らす事ができます。
というわけで作ってみちゃいました！
水滴鍵盤 ※クリックすると音が鳴ります
一応、コード
<style>
.pichons{
width:150px;
height:100px;
background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000025,#00000000);
border-radius:50%/70% 70% 30% 30%;
box-shadow:-2px 3px 2px 0px #00000040;
display:inline-flex;
align-items:center;
justify-content:center;
user-select:none;
font:70px bold;
}
.pichons:active{
border-radius:60%/70% 70% 30% 30%;
}
</style>
<div id="ctr">
<div id="p0" class="pichons" style="background-color: #ffcccc;">ど</div>
<div id="p1" class="pichons" style="background-color: #ccffcc;">れ</div>
<div id="p2" class="pichons" style="background-color: #ccccff;">み</div>
<div id="p3" class="pichons" style="background-color: #ffffcc;">ふぁ</div>
<div id="p4" class="pichons" style="background-color: #ffccff;">そ</div>
<div id="p5" class="pichons" style="background-color: #ccffff;">ら</div>
<div id="p6" class="pichons" style="background-color: #ffe8cc;">し</div>
<div id="p7" class="pichons" style="background-color: #e8ffcc;">ど</div>
</div>
<p>
<script>
AudioContext = window.AudioContext || window.webkitAudioContext;
ctxa=new AudioContext();
ctr.addEventListener('click',oc0p,false);
ctr.addEventListener("dblclick",function(e){e.preventDefault();},false);
mml=[0,2,4,5,7,9,11,12];
function oc0p(e) {
if(e.srcElement.id.substr(0,1)=='p'){
clknum=e.srcElement.id.substr(1);
oc0=ctxa.createOscillator();
oc0g=ctxa.createGain();
oc0t=ctxa.currentTime;
oc0.type='sine';
oc0.frequency.value=442*Math.pow(2,(mml[clknum]+3)/12);
oc0g.gain.setValueAtTime(0.01,oc0t);
oc0g.gain.linearRampToValueAtTime(0.2,oc0t+0.4);
oc0g.gain.linearRampToValueAtTime(0.01,oc0t+1.2);
oc0.connect(oc0g);
oc0g.connect(ctxa.destination);
oc0.start();
oc0.stop(oc0t+1);
}
}
</script>
実は、楽器は作ってみたかった
実のところ、WebAudioAPIを知ってから、Webページ上で演奏できる鍵盤は作ってみたいと思っていました。
が、「半音階を再現しつつ、何オクターブまで並べる？そしてスマホでクリックできる範囲は？」みたいに考えちゃうと、まず画面デザインに迷ってしまい、先送りにしていたんですねｗ
今回は「おもちゃの楽器風」と割り切る事で、「どれみふぁそらしど」の８音限定、半音もナシ、という形で作る事ができました^^
８音で何が演奏できる？？
まず「チューリップ」「ドレミの歌」あたりがなんとか弾けますね。
あと「むしのこえ」も弾けます。
…自分が小学生の頃、ソプラノリコーダーを授業で習った時に「シとラの２音だけで演奏できる曲」として「シラシラシシシ シラララシシシ（たこたこあがれ てんまであがれ）」というのを教わった気がするのですが、文部省唱歌としての「たこのうた」はもっと複雑な曲のようなのでとりあえず除外ｗ
「メリーさんの羊」、「シラソラシシシ」から始めると弾けませんが「ミレドレミミミ」と始めると最後まで弾けます。
惜しいのが「Happy birthday,to you」。
【WebAudioAPI】MMLプレイヤー、タイミング合わせに成功しました^^
で聴けますが、弾けそうなのに終盤で半音を使う必要が出てきます^^;
（ついでに、この歌に関する意外な知識）
あ、季節外れな「もろびとこぞりて」もなんとか弾けます^^
「ロンドン橋」も弾けますね。
意外と…「どれみふぁそらしど」で弾ける歌って結構あるような気がしてきました。
追記：「きらきら星」も弾けます。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
ちょっと訪問できなかった間に、楽しいことができてますねー！
色とりどりのコーナーは押すと、それぞれから音が鳴りそうで、試しに音量を上げちゃいました😅