スマホ、タブレットのブラウザでMIDIデータを再生するのは難しい。 GoogleさんはAIで音楽を扱うプロジェクトmagentaを通してJavaScriptでSoundFontを扱える環境を提供してくれました。 そんなmagentaもiPhoneでは音が出ない。
そういうモノだと思ってましたが、ある日突然音が出た。 どうやら同一ページでオーディオ再生した後であれば音が鳴るらしい。
そんな訳で、magentaの再生直前から無音オーディオを並行再生させてみた所、結果は以下の通り上手く行きました。
magentaオリジナル
https://magenta.github.io/magenta-js/music/demos/player.html
iOS対応版
https://sound.rsynth.net/html/music/demos/player.html
Githubで公開されているmagenta musicのコードをレンタルサーバーに展開し、以下2点だけ修正してます。
- player.html
audioタグを追加して、無音オーディオを参照させています。本家との差が分かりやすいようにcontrolを表示させていますがhiddenで隠した方が良いでしょう。
<audio controls id="silence" class="sound" src="http://sound.rsynth.net/audio/silence.mp3" preload="none"></audio> <script> var silence = document.getElementById("silence"); silence.autoplay = false; </script>
- player_bundle.js
シーケンス再生と同時にaudioが再生されるよう、各再生イベントに以下の2行を加えています。
silence.load(); silence.play();
鳴らなかった原因は、恐らくWeb Audio APIの制約によるモノ。 この制約を乗り越える方法は、いくつかネットにもありましたが、magentaには効果なく、結局今回の無理矢理感満載の実装となりました。
またMIDIファイル再生には、もう一工夫必要な訳ですが、以下を参考にすれば出来そうなので割愛。 https://magenta.github.io/magenta-js/music/demos/visualizer.html
今の時代、ブラウザでMIDIファイル再生したいというニーズは稀かとは思いますが、ご参考まで。