LoginSignup
6
4

More than 1 year has passed since last update.

@21HideK(Hide K)

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

Last updated at Posted at 2021-10-13

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

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

実行
　obniz 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>

工夫を要した箇所
　①マトリックス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を光らせる、ブザーを鳴らすという順番では
　　　成功した。端子の番号の小さい方へ刺さっているパーツから順番にコードを書く必要
　　　があるのかもしれない。

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

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
4