読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

iPhone の Mobile Safari で Audio を再生したときの挙動まとめ

iOS

Mobile Safari で Audioを再生する方法は大きく、Audioタグ をつかう方法と Web Audio API をつかう方法があります。
2つの方法には微妙な違いがあって、いままでもちょいちょい検証してきたんですが、ここらで1つの記事にまとめておこうと思います。

※ 検証はiOS8.4のiPhone6で行いました。


再生に関する挙動

Audioタグ
  • タップ等のユーザーの動作が必要
Web Audio API
  • タップ等のユーザーの動作が必要


 


音量に関する挙動

Audioタグ
  • iPhone本体のボリュームでのみ制御可能(APIからの操作は無視)
Web Audio API
  • iPhone本体のボリューム、APIどちらからでも制御可能
関連記事

kimizuka.hatenablog.com




 


サイレントモードに関する挙動

Audioタグ
  • 本体音量が0でない限りサイレントモードでも音が出る
Web Audio API
  • 本体音量に依存せず、サイレントモードであれば音は出ない
  • ただしイヤホンをつないでいる場合は本体音量通り音が出る


【2015.08.10 追記 関連記事】

qiita.com





コントロールセンターでの操作

Audioタグ
  • 一時停止 / 再生 / ボリュームの制御が可能
  • Safariを終了するか、標準ミュージックアプリで音を再生するなどしてコントロールできる音源を上書きするまで保持される模様
  • 複数のAudioタグを再生した場合にコントロールできるAudioタグが謎(検証中)
Web Audio API
  • 制御不可


 


別タブに遷移した際の挙動

Audioタグ
  • 再生し続ける
  • ただし他のタブでAudoiタグを再生すると止まる(同時に複数のAudioタグは再生できない)
  • Safariを終了しない限り再生位置を覚えている模様
  • 他のタブでWebAudioAPIを再生した場合は止まらず流れつづける
Web Audio API
  • 音量がフェードアウトしながら0になり一時停止する
  • ページに戻ってくると再生を再開しながらフェードインする


 


ホームボタンを押しSafariを裏にまわした際の挙動

Audioタグ
  • 再生し続ける
  • コントロールセンターで一時停止 / 再生 / ボリュームの操作が可能
  • 標準のミュージックアプリなどで音を出した際に一時停止する
  • Safariを終了しない限り再生位置を覚えている模様
Web Audio API
  • 音量がフェードアウトしながら0になり一時停止する
  • ページに戻ってくると再生を再開しながらフェードインする
関連記事

kimizuka.hatenablog.com




 


スリープボタンを押した際の挙動

Audioタグ
  • 再生し続ける
  • コントロールセンターで一時停止 / 再生 / ボリュームの操作が可能
Web Audio API
  • 音量がフェードアウトしながら0になり一時停止する
  • ページに戻ってくると再生を再開しながらフェードインする



ホームボタンを2度押ししSafariを終了したときの挙動

Audioタグ
  • 停止
  • コントロールセンターからも破棄される
Web Audio API
  • 停止



iOS用 Audioタグ サンプルページ

iOS用 WebAudioApi サンプルページ - js do it


タップすると音が出ます。

iOS用 Web Audio API サンプルページ

iOS用 WebAudioApi サンプルページ - js do it


タップすると音が出ます。