iOS7以下ではaudioタグの音声ファイルにData URIスキームを使用した場合、正常に再生できないという仕様がありました(バグじゃないの、これ…)。
それがiOS8のSafariでは、Data URIスキームによる音声データでも正常に再生できるようになりました。めでたい!
おかげで以前作成したVoice Text Web APIのテストがiPhoneでも動作するようになりました!
ADs
<audio>はHTML5より追加されたタグで、簡易なオーディオプレイヤーをページ内に埋め込みます。
最低限のコードは以下のようになります。
1 |
<audio controls src="loop_140.wav"></audio> |
ここで、src属性をファイルではなくwavファイルをbase64エンコードして設置すると以下のようになります。
Android(KitKat)では正常に再生できるのですが、iPhone(iOS7)だと再生できませんでした…。
1 |
<audio controls src="data:audio/wav;base64,UklGRmTECgBXQVZFZm10IBAAAA...(略)"></audio> |
属性を指定すると自動再生やループさせるなどの制御も行えます。詳しくは以下の情報をご参照ください。
Data URIスキームについては以下のページが詳しいです。
実際に<audio>を用いて.wavファイル、base64エンコードしたものを設置したサンプルです。
まだiOS8にアップデートしていない端末の場合、Data URIで指定しているプレイヤーは正常に再生できません。
IEは.wavに対応していないため、IE対応が必要な場合は違うフォーマットを検討する必要があります。
個人的にはこの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
ADs
dmwei2
ulu1nq
4lp9mo
m2nuva
zktqll
ur90a8
21hzxn
vza8wy
5o7951
368bdq
clpv7h
p38mcz
gb8tsf
gcjdc3
aj4xph
kdz6s3
nut24m
lkyimd
osg5t7
cqy8th
8x1fbg
6x0rbq
4nkmpj
j16iny
021hqi