Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

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

 初めてづくしのプログラミングです。初めて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を光らせる、ブザーを鳴らすという順番では
   成功した。端子の番号の小さい方へ刺さっているパーツから順番にコードを書く必要
   があるのかもしれない。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?