iOSのブラウザには「オーディオを再生する場合、ユーザーアクションと同時でなければいけない」という鉄の掟が存在しています。
ただし、制限の定義があいまいで、HTML5のaudioエレメントを使った場合とJavaScriptのWeb Audio APIを使った場合では制限が微妙に違います。
まず、HTML5のaudioエレメントの場合は「オーディオのロードがユーザーアクションと同時でなければいけない」ことになっています。
ロードのみが制限されることに注目してください。
つまり、ロードが完了していれば、play()は自由に使うことができます。
例えば、一番最初のtouchイベントハンドラ内で明示的にload()をしておけば、その後はいつでもplay()をすることが可能です。
ただし、オーディオが最後まで再生されきってしまうとtouchイベント以外のplay()は無効にされてしまいます。
なので、ロードさえ完了していれば、最後まで再生させずにpause()やcurrentTimeを使用することで、どんなタイミングでもオーディオを再生させることが可能です。
実はロードに関しても抜け道があって、iOS 8以上なら、オーディオファイルをbase64で記述することで、こっそりロードすることが可能です。
次に、JavaScriptのWeb Audio APIの場合は「初回の再生がユーザーアクションと同時でなければいけない」ことになっています。
こちらは初回の再生のみが制限されています。
つまり、ページがロードされて一番初めに実行されるstart()がtouchイベントハンドラ内に記述されていなければ無効にされます。
一度、start()が実行されれば、その後はたとえ別のバッファであっても、自由に再生が可能になります。
ちなみに、iOSでは「JavaScriptでオーディオのボリュームを変更することができない」という制限もあります。
これはaudioエレメントのvolumeとmutedプロパティが無効にされています。
しかしWeb Audio APIの場合はgainNodeを使えば自由にボリュームを変更することが可能です。
ただし、gainNodeが効くのはMediaElementAudioSourceNode以外のノードだけです。
つまりaudioエレメントをgainNodeにconnectしてもボリュームを変更することができません。
どんなことをしてもaudioエレメントは本体のボリューム以外では音量を変更することができないようです。
まとめると、iOSではaudioエレメントよりWeb Audio APIの方が圧倒的に使いやすいです。
