Zenn
📘

Obniz + Speaker でドレミファソラシド

2020/12/05に公開
JavaScript
obniz
tech

やること

ObnizとSpeakerでドレミファソラシドの音階をだしてみる

参考情報

obniz Parts Library-Speaker

構成

このようにobnizにスピーカーを接続しました。

(1) ド

ドを奏でるスクリプトです。実行はカンタン、speaker01.htmlをダブルクリックで開くだけ。自前のWebサーバーとか不要。

speaker01.html
<html lang="en">
    <head>
      <meta charset="utf-8" />
      <script src="https://unpkg.com/obniz@3.10.1/obniz.js"></script>
    </head>
<body>

<script>
const OBNIZ_ID = 'xxxx-xxxx'; // お持ちのObniz ID を設定
const obniz = new Obniz(OBNIZ_ID);
obniz.onconnect = async function() {
    speaker = obniz.wired("Speaker",{"signal":0, "gnd":2});
    obniz.display.print("ド");
    speaker.play(262); // ド
}
</script>

</body>
</html>

実行デモ

(2) ドレミファソラシド

今度はドレミファソラシドを1秒ごとに鳴らしてく。最後はディスプレイに "おわり" と表示する。

speaker02.html
<html lang="en">
    <head>
      <meta charset="utf-8" />
      <script src="https://unpkg.com/obniz@3.10.1/obniz.js"></script>
    </head>
<body>

<script>
const OBNIZ_ID = 'xxxx-xxxx'; // お持ちのObniz ID を設定
const obniz    = new Obniz(OBNIZ_ID);
const scaleArr = new Array();
const dispArr  = new Array();
scaleArr.push(262); dispArr.push("ド");
scaleArr.push(294); dispArr.push("レ");
scaleArr.push(330); dispArr.push("ミ");
scaleArr.push(349); dispArr.push("ファ");
scaleArr.push(392); dispArr.push("ソ");
scaleArr.push(440); dispArr.push("ラ");
scaleArr.push(494); dispArr.push("シ");
scaleArr.push(523); dispArr.push("ド");

let i = 0;

obniz.onconnect = async function() {
    speaker = obniz.wired("Speaker",{"signal":0, "gnd":2});
    speakTimer = setInterval(function(){
        if( i >= scaleArr.length ){
            speaker.stop();
            obniz.display.clear();
            obniz.display.print('おわり');
            clearInterval(speakTimer);
        }else{
            speaker.play( scaleArr[i] );
            obniz.display.clear();
            obniz.display.print(dispArr[i]);
            i++;
        }
    }, 1000)
}

</script>

</body>
</html>

実行デモ

Discussion