obnizで、「かえるのうた 歌詞付き」を作ってみた。 


　初めてづくしのプログラミングです。初めてobnizに触り、コードを書きました。
　ブザーでドレミが再現できることがわかり、曲を再現しようと思いました。
　作成中にマトリックスLEDに歌詞を表示出来たら面白いなと思い追加してみました。
　初投稿にて、記事の書き方、フォント色や大きさの変え方がわからず読みづらいですが
　ご容赦ください。

下準備
①　obnizスターターキットの用意
②　obnizの端子にパーツを接続
　　　マトリックスLED：gnd:3, vcc:2, sda:1, scl:0 （逆さまに装着）
　　　ブザー：signal:9, vcc:10, gnd:11

実行
　obniz HTMLエディタを開き、以下のコードを入力。

```html
         <html>
           <head>
             <script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
           </head>
           <body>
             <script>
               var obniz = new Obniz("OBNIZ_ID_HERE"); // ここに自身のobniz IDを入力する

               obniz.onconnect = async function () { 
        var speaker = obniz.wired("Keyestudio_Buzzer", {signal:9, vcc:10, gnd:11});
        const matrix = obniz.wired("Keyestudio_HT16K33", { gnd:3, vcc:2, sda:1, scl:0 });
        matrix.brightness(7);
        const ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('か', 0, 7);
            matrix.draw(ctx);
            speaker.play(130.813) // 130.813 Hz；「ド」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('え', 0, 7);
            matrix.draw(ctx);
            speaker.play(146.832) // 146.832 Hz；「レ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('る', 0, 7);
            matrix.draw(ctx);
            speaker.play(164.814) // 164.814 Hz；「ミ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('の', 0, 7);
            matrix.draw(ctx);
            speaker.play(174.614) // 174.614 Hz；「ファ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('う', 0, 7);
            matrix.draw(ctx);
            speaker.play(164.814) // 164.814 Hz；「ミ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('た', 0, 7);
            matrix.draw(ctx);
            speaker.play(146.832) // 146.832 Hz；「レ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('が', 0, 7);
            matrix.draw(ctx);
            speaker.play(130.813) // 130.813 Hz；「ド」
            await obniz.wait(1140);
            matrix.clear();
            speaker.stop();

          await obniz.wait(60);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('き', 0, 7);
            matrix.draw(ctx);
            speaker.play(164.814) // 164.814 Hz；「ミ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('こ', 0, 7);
            matrix.draw(ctx);
            speaker.play(174.614) // 174.614 Hz；「ファ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('え', 0, 7);
            matrix.draw(ctx);
            speaker.play(195.998) // 195.998 Hz；「ソ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('て', 0, 7);
            matrix.draw(ctx);
            speaker.play(220.000) // 220.000 Hz；「ラ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('く', 0, 7);
            matrix.draw(ctx);
            speaker.play(195.998) // 195.998 Hz；「ソ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('る', 0, 7);
            matrix.draw(ctx);
            speaker.play(174.614) // 174.614 Hz；「ファ」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('よ', 0, 7);
            matrix.draw(ctx);
            speaker.play(164.814) // 164.814 Hz；「ミ」
            await obniz.wait(1140);
            matrix.clear();
            speaker.stop();
          
          await obniz.wait(60);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('が', 0, 7);
            matrix.draw(ctx);
            speaker.play(130.813) // 130.813 Hz；「ド」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();
          await obniz.wait(600);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('が', 0, 7);
            matrix.draw(ctx);
            speaker.play(130.813) // 130.813 Hz；「ド」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();
          await obniz.wait(600);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('が', 0, 7);
            matrix.draw(ctx);
            speaker.play(130.813) // 130.813 Hz；「ド」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();
          await obniz.wait(600);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('が', 0, 7);
            matrix.draw(ctx);
            speaker.play(130.813) // 130.813 Hz；「ド」
            await obniz.wait(600);
            matrix.clear();
            speaker.stop();
          await obniz.wait(600);


            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('げ', 0, 7);
            matrix.draw(ctx);
            speaker.play(130.813) // 130.813 Hz；「ド」
            await obniz.wait(260);
            matrix.clear();
            speaker.stop();
          await obniz.wait(40);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('ろ', 0, 7);
            matrix.draw(ctx);
            speaker.play(130.813) // 130.813 Hz；「ド」
            await obniz.wait(260);
            matrix.clear();
            speaker.stop();
          await obniz.wait(40);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('げ', 0, 7);
            matrix.draw(ctx);
            speaker.play(146.832) // 146.832 Hz；「レ」
            await obniz.wait(260);
            matrix.clear();
            speaker.stop();
          await obniz.wait(40);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('ろ', 0, 7);
            matrix.draw(ctx);
            speaker.play(146.832) // 146.832 Hz；「レ」
            await obniz.wait(260);
            matrix.clear();
            speaker.stop();
          await obniz.wait(40);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('げ', 0, 7);
            matrix.draw(ctx);
            speaker.play(164.814) // 164.814 Hz；「ミ」
            await obniz.wait(260);
            matrix.clear();
            speaker.stop();
          await obniz.wait(40);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('ろ', 0, 7);
            matrix.draw(ctx);
            speaker.play(164.814) // 164.814 Hz；「ミ」
            await obniz.wait(260);
            matrix.clear();
            speaker.stop();
          await obniz.wait(40);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('げ', 0, 7);
            matrix.draw(ctx);
            speaker.play(174.614) // 174.614 Hz；「ファ」
            await obniz.wait(260);
            matrix.clear();
            speaker.stop();
          await obniz.wait(40);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('ろ', 0, 7);
            matrix.draw(ctx);
            speaker.play(174.614) // 174.614 Hz；「ファ」
            await obniz.wait(260);
            matrix.clear();
            speaker.stop();
          await obniz.wait(40);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('が', 0, 7);
            matrix.draw(ctx);
            speaker.play(164.814) // 164.814 Hz；「ミ」
            await obniz.wait(200);
            matrix.clear();
            speaker.stop();
          await obniz.wait(400);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('が', 0, 7);
            matrix.draw(ctx);
            speaker.play(146.832) // 146.832 Hz；「レ」
            await obniz.wait(200);
            matrix.clear();
            speaker.stop();
          await obniz.wait(400);

            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "9px sans-serif";
            ctx.fillText('が', 0, 7);
            matrix.draw(ctx);
            speaker.play(130.813) // 130.813 Hz；「ド」
            await obniz.wait(1200);
            matrix.clear();
            speaker.stop();
      }
    </script>
           </body>
         </html>
```

https://twitter.com/21HideK/status/1447935413528711186

工夫を要した箇所
　①マトリックスLEDを文字の順番に光らせる。
　　(1)各音に対応する文字（歌詞）を表示させるコードの書き方に工夫が必要。

         マトリックスLEDを1回光らせるだけならば、以下のコードでよい。
           const ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);
           ctx.fillStyle = "black";
           ctx.fillRect(0, 0, matrix.width, matrix.height);
           ctx.fillStyle = "white";
           ctx.font = "9px sans-serif";
           ctx.fillText('が', 0, 7);
           matrix.draw(ctx);

         しかし、繰り返し光らせるとなると、
         どの行までを反復して記載したらよいかを知る必要があった。

         失敗例：
                   ctx.fillText('が', 0, 7);
                   matrix.draw(ctx);
           ⇒この2行のみの反復では
             前の文字に上書きされ文字が重なって表示されていく。

         成功例：
                   ctx.fillStyle = "black";
                   ctx.fillRect(0, 0, matrix.width, matrix.height);
                   ctx.fillStyle = "white";
                   ctx.font = "9px sans-serif";
                   ctx.fillText('が', 0, 7);
                   matrix.draw(ctx);


　②各音の長さ、消音する長さの調整（ブザーの鳴動時間の設定）
 
         (1)音の長さ
            speaker.play(●●●)〔ブザー開始〕の後に
            await obniz.wait(△△△)〔ブザーの持続時間〕
            speaker.stop();〔ブザーの終了〕
         (2)消音の長さ
            更に後ろにawait obniz.wait(□□□);

　　⇒(1),(2)の組み合わせにより、長い音、短い音、跳ねる様な音
　　　（全音符、2分音符、4分音符、8分音符、16部音符等）を作ることができる。

　③その他
　　マトリックスLEDとブザーへのコードの順番
　　　ブザーを鳴らす、マトリックスLEDを光らせる　という順番であるとマトリックスLED
　　　はエラーとなった。逆にマトリックスLEDを光らせる、ブザーを鳴らすという順番では
　　　成功した。端子の番号の小さい方へ刺さっているパーツから順番にコードを書く必要
　　　があるのかもしれない。

今後の構想
　　合唱、言語の様な音　を作成したい。