音楽のコードの構成音をその場で確認できるChrome拡張機能を作った

#Chord Dictionary

音楽のコードの構成音をその場で確認できるChrome拡張機能を作りました。
Chrome ウェブストアに公開しています。

##成果物
任意のサイトでコードネームにポインタを当てるとコードの構成音が見れます。
コードが表示されている状態でCtrl+Spaceを押すとコードが再生されます。

コードの構成音をその場で確認できるChrome拡張機能をアップデートしました。ローマ数字表記追加（認識も可）やクリックでの再生機能も追加して最強になってます💪https://t.co/idSgKoc0GE pic.twitter.com/TkvZpkYvko

— あっしゅん (@ashcolor06) March 5, 2020

##開発

###経緯
Mouse Dictionaryをみて音楽のコードでも同じ機能があれば便利なのでは？と思って調べてみると、コードの変換に関してはコード進行共有サービスのrechordの開発者さんがライブラリを公開されており、割と簡単に作れそうだったので開発を始めました。

###ソースコード
https://github.com/ashcolor/chord-dictionary

###Vue + Chrome拡張機能
勉強がてらVueを使いたくて調べていたところ、VueでChrome拡張機能を作成するためのテンプレートを作成している方がいたのでお借りしました。
https://github.com/Kocal/vue-web-extension

以下のコマンドでテンプレートが一瞬でできます。

#vue initがインストールされていない場合、以下のコマンドを実行
#npm install -g @vue/cli-init
vue init kocal/vue-web-extension my-extension #オプションを聞かれるので適当に答える
cd my-extension
npm install
npm run watch
npm run build
npm run build-zip #zipファイル生成

###使用したライブラリ
####chord-translator
https://github.com/comorebi-notes/chord-translator
(ver1.1.0から次に紹介するChordNoteに変更しています。)
コードネームを構成音に変換してくれます。

chordTranslator("A", "add9")  // ["A3", "Db4", "E4", "B4"]

####ChordNote
https://graphemecluster.github.io/ChordNote.js
ぐらふぃーむさんが作成したスクリプトです。
chord-translatorと同じくコードネームを構成音に変換してくれます。(今回の拡張機能では多少手を加えています。)
自前で実装予定だったオンコードの処理や♭と♯の表記問題(全てのコードが♭表記になる)もこのスクリプトを入れて一発で解決しました。感謝です。

####Tonal
音楽理論全般で役に立つライブラリです。
ChordNoteを使用した場合に返ってくるダブルシャープやダブルフラットがtone.jsに対応していないため、ノートを正規化してくれるNote.simplifyという関数を使いました。

 Note.simplify("C##")  // => "D"

他に移調も簡単にできるので今後の機能追加で利用する予定です。

####tone.js
https://tonejs.github.io/
Web Audio APIを簡単に扱うことができるJavaScriptライブラリです。コードの再生に使いました。サンプリングにも対応しているため、数ファイルの音源から全ての音階の音を出力することができます。
（今回はC1~C5までの5つのmp3のみ使用）

####vexflow
http://www.vexflow.com/
楽譜の描画ライブラリです。多機能なライブラリですが今回は単純に白玉を描画しているだけです。