問題タブ [web-midi]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - tone.jsで再生中の音符にイベントリスナーを追加する方法
私は、Tone.js を利用した小さな Web アプリを作成して、ピアノをキーで演奏できるようにトレーニングしています (途中で他の演習も行う可能性があります)。これまでのところ、ルート ノートとスケール タイプを選択して再生をクリックすると、そのスケールがループします。また、tone.js の例の 1 つから取ったキーボード/シンセもあり、ピアノのキーをクリックしたり、クエリ キーボードのキーを使用したり、コンピューターに接続された MIDI キーボードを選択してサウンドを使用および再生したりできます。
私がやろうとしている次のステップは、スケール内のノートが演奏されたときに緑色に点灯し、スケール外のノートが演奏されたときに赤色に点灯するバーを作成し、連続していくつのノートが正しく演奏されたかを記録することです。そんな感じ。私が直面している問題は、tone.js から直接ユーザーが演奏しているノートを取得する方法がないように見えることです。キーボードのキープレスを音符に変換できますが、それだけです。誰かがキーボードをクリックしてもイベントをキャプチャできません。また、tone.js シンセと一緒に演奏されているピアノのキーを解釈できるように、tone.js から選択した MIDI 入力デバイスを取得することもできません。
仮想ピアノのキーは単なるボタンですが、シャドウ DOM ではアクセスできないため、jquery を使用してイベント リスナーをアタッチしようとしました。
誰かがtone.jsとtonejs/uiを使って働いていて、これが可能かどうか知っていますか? 回避策のアイデアはありますか?
編集: v1.0.0 を完了しました。Tone.js と一緒に MIDI デバイスを聞いて、再生中の音に変換することができました。これはまともな解決策ですが、既に述べたように、コードを簡素化するために Tone.js シンセから直接再生される音符を取得し、マウスでクリックされた音符でトレーナー バーが機能するようにする方がよいでしょう。演奏中のノートは、トレーナー バーにオクターブ番号とともに表示できます。