【Gadgets】【HTML5/CSS3】iOS8でData URIスキームによる音声データを再生できるようになった | Wood-Roots:blog

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

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

使用方法

<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