Web Audio APIは、Webサービスを構築する上でかなり重要なものです。
しかし、Webブラウザ上で音を発生させるのは、案外厄介だったりします、、、
ios、Android、PCにより動作が異なるからです。
今回は、そんなWeb Audio APIを使用した際に、「The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.」とログに表示され、さらに音楽が再生されない場合の対処法について記録しておきます。
Audioは自動再生がされない
まず、結論から。
"ユーザーのアクション後"でないと音楽が再生されない。という仕様になっていることが原因のようです。
Audioの自動再生については、ios Safariだけでなく、Chromeなどもされません。
参考（Chromeの自動再生ポリシー(英語)）
たしかに、スマホで検索していて、いきなり音がなったら嫌ですね…
そんなユーザー体験の向上や通信量削減の観点からも、Audio再生に制限をかけているブラウザが増えています。
一時期はスマホだけの問題だったようですが、Chromeなどは、PCでもユーザークリックによるAudio再生を制限していますので、注意が必要です。
無音再生させることで解決する
//スタートボタン押下時の処理
$('.start').click(function(){
console.log('クリックされました');
//Audio
// 無音再生
wa.playSilent();
// 無音再生後に再生
wa.loadFile("./audio/button.mp3", function(buffer) {
wa.play(buffer);
});
ユーザーアクション後、無音で再生させてから、実際に鳴らしたい音をならすという流れが出来ればOKです。
だから、ゲームなどでよく「Touch to Start…」があるんですね（納得）
ちなみに音楽再生は解決したものの、注意ログは消えませんでした…なぜでしょう。
「そういう仕様だから気をつけてね〜」という注意喚起ならいいのですが。
わかる方いらっしゃいましたら教えてくださいm(__)m
※上記サンプルコード中に、waなるものが出てきますが、これは私が実装で使用させていただいたwebAudio用の即席ライブラリです。
詳しくは、こちらをご参照ください。iosでのオーディオ再生制限の解除方法いろいろ