和音発生機

2021/4/27公開

概要

圧電スピーカーを5個繋いで和音を鳴らしてみました。
和音はテンションコードで最大5音まで出るので5個繋いでます。
さすがに本体に直接挿すのは無理なのでブレッドボードを経由してます。
ブレッドボードに同じ圧電スピーカーがズラリと並んでいる様はなかなか見慣れない光景だなと思いました。
本来こういう使い方をするものではないためか各スピーカーの発音のタイミングに微妙なブレが発生することがありますが割と良い感じに鳴らせました。
指定したコードを鳴らすためのJavaScriptライブラリ(chord.js)も作りましたので同じ事をやってみたい方はダウンロードからどうぞ。

サンプルコード

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Play Chord</title>
    <script src="https://unpkg.com/obniz@3.x.0/obniz.js"></script>
    <script src="chord.js"></script>
  </head>
  <body>
    <form>
      <h1>Play Chord</h1>
      <h3>パッヘルベルのカノン</h3>
      <p>
        <input type="button" id="chord1" value="C">
        <input type="button" id="chord2" value="G">
        <input type="button" id="chord3" value="Am">
        <input type="button" id="chord4" value="Em">
        <input type="button" id="chord5" value="F">
        <input type="button" id="chord6" value="C">
        <input type="button" id="chord7" value="F">
        <input type="button" id="chord8" value="G">
      </p>
    </form>
    <script>
    var obniz = new Obniz("OBNIZ_ID_HERE");
    var speakers = [];

    obniz.onconnect = async function () {
      // 全スピーカー初期化
      speakers[0] = obniz.wired("Speaker", {signal:0, gnd:1});
      speakers[1] = obniz.wired("Speaker", {signal:2, gnd:3});
      speakers[2] = obniz.wired("Speaker", {signal:4, gnd:5});
      speakers[3] = obniz.wired("Speaker", {signal:6, gnd:7});
      speakers[4] = obniz.wired("Speaker", {signal:8, gnd:9});
    }

    // マウスイベント
    document.getElementById("chord1").onmousedown = function() {
      playChord(speakers, 'C5','(M)');
    };
    document.getElementById("chord1").onmouseup = function() {
      stopPlay(speakers);
    };

    document.getElementById("chord2").onmousedown = function() {
      playChord(speakers, 'G4','(M)');
    };
    document.getElementById("chord2").onmouseup = function() {
      stopPlay(speakers);
    };

    document.getElementById("chord3").onmousedown = function() {
      playChord(speakers, 'A4','m');
    };
    document.getElementById("chord3").onmouseup = function() {
      stopPlay(speakers);
    };

    document.getElementById("chord4").onmousedown = function() {
      playChord(speakers, 'E4','m');
    };
    document.getElementById("chord4").onmouseup = function() {
      stopPlay(speakers);
    };

    document.getElementById("chord5").onmousedown = function() {
      playChord(speakers, 'F4','(M)');
    };
    document.getElementById("chord5").onmouseup = function() {
      stopPlay(speakers);
    };

    document.getElementById("chord6").onmousedown = function() {
      playChord(speakers, 'C4','(M)');
    };
    document.getElementById("chord6").onmouseup = function() {
      stopPlay(speakers);
    };

    document.getElementById("chord7").onmousedown = function() {
      playChord(speakers, 'F4','(M)');
    };
    document.getElementById("chord7").onmouseup = function() {
      stopPlay(speakers);
    };

    document.getElementById("chord8").onmousedown = function() {
      playChord(speakers, 'G4','(M)');
    };
    document.getElementById("chord8").onmouseup = function() {
      stopPlay(speakers);
    };
    </script>
  </body>
</html>

ダウンロード

chord.js

戻る