Chord Dictionary
Mouse Dictionary( https://qiita.com/wtetsu/items/c43232c6c44918e977c9 )に触発されて作りました。
任意のサイトで音楽のコード名にポインタを当てるとコードの構成音が見れます。
コードが表示されている状態でCtrl+Spaceを押すとコードが再生されます。
インストール手順
dist-zipフォルダ( https://github.com/ashcolor/chord-dictionary/raw/master/dist-zip )のzipファイルをChromeの拡張機能のページでドラッグアンドドロップするだけです。
右上のアイコンをクリックすると起動します。
開発
ソースコード
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
コードネームを構成音に変換してくれます。
chordTranslator("A", "add9") // ["A3", "Db4", "E4", "B4"]
tone.js
https://tonejs.github.io/
Web Audio APIを簡単に扱うことができるJavaScriptライブラリです。
コードの再生に使いました。
サンプリングにも対応しているため、
数ファイルの音源から全ての音階の音を出力することができます。
（今回はC1~C5までの5つのmp3のみ使用）
vexflow
http://www.vexflow.com/
楽譜の描画ライブラリです。
多機能なライブラリですが今回は単純に白玉を描画しているだけです。
TODO
VueもChrome拡張機能の開発も初めてなのでぼちぼち進めていきます。
- コード名の前後に文字が繋がっている場合の対応
- ♭と#の切り替え
- ローマ数字の表記への対応
- アルペジオでの再生
- 文字の選択による取得
