omitted sounds

日々の喧騒にかき消される音たち。そんな音の中から、いくつか拾ってみました。

JavaScript: iPhoneでmagentaを鳴らす

スマホタブレットのブラウザでMIDIデータを再生するのは難しい。 GoogleさんはAIで音楽を扱うプロジェクトmagentaを通してJavaScriptSoundFontを扱える環境を提供してくれました。 そんな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ファイル再生したいというニーズは稀かとは思いますが、ご参考まで。