Tone.jsでピアノを作る

2024-07-18

Tone.jsというライブラリでWeb Aodio APIを簡単に扱うことことができます
これを使ってピアノを作ります！
まずはライブラリをインストール

npm install tone

プロジェクトにtone.jsをインポートします

import * as Tone from "tone";

下記のコードで、音階・拍数を指定し再生することができます

// サウンドを生成
const synth = new Tone.Synth().toDestination();

// C4(ド)の音を8n(四分音符)の長さで再生する
synth.triggerAttackRelease("C4", "8n");

上記を鍵盤のクリックイベントに組み込みます

// 鍵盤のプロパティ(音階と鍵盤の色)
export const pianoKeys = [
  { note: 'C4', color: 'white' },
  { note: 'C#4', color: 'black' },
  { note: 'D4', color: 'white' },
  { note: 'D#4', color: 'black' },
  { note: 'E4', color: 'white' },
];

const synth = new Tone.Synth().toDestination();

// 鍵盤のクリックイベント
const handleTrigger = (note: string) => {
  synth.triggerAttackRelease(note, '8n');
};

const Piano: React.FC = () => {
  return (
      <div className="piano">
        {pianoKeys.map(({ note, color }) => (
          <button
           key={note}
           note={note}
           className={color}
           onClick={() => handleTrigger(note)}
          ></button>
        ))}
      </div>
  );
};

上記のコードではシンセサイザー音で再生されますが、Tone.jsが用意してくれている音源を別途インポートすることで、ピアノ音で再生されるようになります。

また、CSSでの鍵盤の描き方は以下の通りです

pianoにdisplay:flex、align-items:startで上揃えで横並びにする
黒鍵と、その右に隣接する白鍵にmargin-left:[マイナス]を指定する

これでピアノが完成しました！

Githubで私が作ったピアノを弾けます

GitHub - risu043/react-piano: Piano buil...

Piano built with React, using toner.js. ...

github.com