MIDIナンバーから音名と周波数を判定するウェブツールを作りました【Midi Number Tools】

投稿日:2020-12-05



ナカジ(@cp_nakajun)です。

もうすでにtwitterには投稿しているのですが

「JavaScriptを学習しよう」と思い、簡単なとりあえずスグ作れそうな題材を選んだのですが

シンプル過ぎたと感じたのか、急に「装飾」したくなってとりあえずこういう形にしてみました。

詳細な解説ができるほど難しいことはしていないのですが、簡単な紹介として書いておこうと思います。

基本的な「機能」としてこれを題材に選んだきっかけが
僕としてはPureDataでパッチングしてるときにMIDIナンバーと音名の関係をパッと知りたかったことがあったからなんですが

そんな用途以外にも

基準にする「A」の周波数を変えられるのでチューニングにも使えるかもしれませんし

単純に音が出て、波形を描画するので少し遊んでもらえるだけでも嬉しいです。

ということで

Midi Number Tools

ツールのURLは

です。

JavaScriptで作りました。

描画部分はp5.jsでサウンド部分も同じくp5.jsのライブラリーであるp5.soundを利用しています。

使い方

音名と周波数を判定し表示する

  1. チューニング基準音を設定
  2. MIDIナンバーを設定

音を聴く&描画する

  1. 「SOUND ON」ボタンを押す
  2. ボリュームスライダーを動かす

音を止めるにはボリュームを「0」にしてください。

学習にオススメ


・【NFTアート × Python】全くの初心者でもできるジェネラティブNFTの作成から出品まで icon

・【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】 icon

・改訂版プログラミングで科学を学ぼう! icon

・【JS】ガチで学びたい人のためのJavaScriptメカニズム icon





おすすめのクリエイティブ・コーディング関連カテゴリー


ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します