iOS8でData URIスキームによる音声データを再生できるようになった

Apple   iOS 8

iOS7以下ではaudioタグの音声ファイルにData URIスキームを使用した場合、正常に再生できないという仕様がありました(バグじゃないの、これ…)

それがiOS8のSafariでは、Data URIスキームによる音声データでも正常に再生できるようになりました。めでたい!
おかげで以前作成したVoice Text Web APIのテストがiPhoneでも動作するようになりました!

AD

使用方法

<audio>はHTML5より追加されたタグで、簡易なオーディオプレイヤーをページ内に埋め込みます。
最低限のコードは以下のようになります。

ここで、src属性をファイルではなくwavファイルをbase64エンコードして設置すると以下のようになります。
Android(KitKat)では正常に再生できるのですが、iPhone(iOS7)だと再生できませんでした…。

属性を指定すると自動再生やループさせるなどの制御も行えます。詳しくは以下の情報をご参照ください。

<audio>-HTML5タグリファレンス

Data URIスキームについては以下のページが詳しいです。

表示速度改善 Data URIスキーム - 仕組みとメリット | CodeGrid

設置サンプル

実際に<audio>を用いて.wavファイル、base64エンコードしたものを設置したサンプルです。
まだiOS8にアップデートしていない端末の場合、Data URIで指定しているプレイヤーは正常に再生できません。

audioのsrc属性をbase64で指定したときの挙動

IEは.wavに対応していないため、IE対応が必要な場合は違うフォーマットを検討する必要があります。

おまけ:iOS8のSafari関連の情報

個人的にはこのbase64の音声ファイルへの対応がiOS8で嬉しかったことですが、それ以外にも新しくサポートされるCSSプロパティやWebGLの対応など新機能があります。
以下のサイトで紹介されていますので、スマートフォン向けコンテンツを作成する際は参考にしてみてください。

Safari 8(iOS 8)がサポートしたCSS ShapesやAPNG、WebGLなどの機能比較まとめ。
iOS8特集:Safari | 特集カテゴリー | Developers.IO
iOS 8 and iPhone 6 for web developers and designers: next evolution for Safari and native webapps

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。