スマホでのWebAudioAPIで音が鳴らない場合、frequency,gainの記述方法に原因があるかも

スマホでWebAudioAPIを使う

今はWebAudioAPIという便利なものがあって、簡単にブラウザで音楽を再生させたり、音程を指定して簡単なシンセみたいなものを作ることが出来る。

今回はスマホブラウザでもWebAudioAPIを使う基本点とメトロノームのwebアプリを作っている上で大いにハマった点をメモ。

ユーザーからの操作を起点にしないと音を鳴らせない

これは大体すぐ出てくる情報だけど、スマホブラウザはいきなり音が出るwebサイトを嫌っているので自動再生は出来ない。

クリックや何らかのユーザー操作を起点として音を再生する必要がある。

AudioContextの用意など自体は前もってしておいて構わない。
start,resumeなど音のスタート処理はユーザーイベント時に発生させる必要がある。

それでも音が鳴らない

しかし、上の条件をきちんとクリアしても音が鳴らなかった。 ググりまくったけどどうにもこうにも良い情報がでてこない。

色々試しまくった結果...

frequency(音程)、gain(音量)の書き方に問題がある

PCブラウザでは

// 音程を指定    
osc.frequency.value = 1200; 
// 音量を指定
gain.gain.value = 0;    
// 設定を適用 
osc.connect(gain).connect(context.destination);

こういった記法で問題なく動いた。

しかし、スマホでは

// 音程を指定
osc.frequency.value = 1200;
// 音量を指定
gain.gain.value = 0;
// 設定を適用
osc.connect(gain);
gain.connect(context.destination);

この記法でないと動かなかった。
あまり出てこない情報だったのでハマったが今後は気を付けようと思う。