|
|
|
ムービーはGIFアニメで、音声はHTML5オーディオ(MP3とOGGの二種類)を使用して配信
。なお、HTML5未対応のIE9未満用に代替のFlashムービーを追記。
|
|
HTML5 オーディオのブラウザ対応試験
|
|
使用音声 |
MP3
|
AAC
|
WAV
|
OGG
|
|
MP3, OGG＋SWF |
|
|
|
|
|
I. 記述方法 <BODY> </BODY>内に <audio>タグを以下のように記述する。 |
|
1) 複数のオーディオで配信する場合（例えば、当ページのMP3,
OGG+SWF）
|
| |
<audio id="audio"
autoplay controls>
<source src="channel_neco.mp3" /">
<source src="channel_neco.ogg" /">
<!-- HTML5未対応のIE9未満用に代替のFlash-->
<embed src="player.swf" width="400"
height="20" allowscriptaccess="always"
flashvars="width=400&height=0&file=channel_neco.mp3&
rotatetime=10&showstop=true&autostart=true&repeat=false"
/>
</embed><br>
※ご利用のブラウザはHTML5に未対応のため、FlashでMP3を再生します。
</audio>
|
| |
＝記述上の注意＝
|
| |
| |
(1) id 属性を省略して<audio
autoplay controls>としてもよい。
|
| |
(2)スマートフォン用のSafariとChromeではautoplay属性は無効になっており、ユーザのアクションでトリガーになるものがないと開始されないので、controlsを入れる必要がある。
|
| |
(3)type要素を記述しなくてもよいが、MP3の場合は<source
src="channel_neco.mp3" type="audio/mp3">
と 記述すると、AQUOS PHONE SH-01D（Android 2.3.5)の標準ブラウザでは再生出来なくなってしまう
→<... type="audio/mpeg">なら再生可能だ。
|
| |
(4)HTML5未対応のIExplorer 9未満用に、 JW
Player 4.2（player.swf)を利用してFlash PlayerでMP3を再生させるようにした（MP3の他にAACの利用も可能。WAV,
OGGには未対応）。 |
|
| |
|
|
2) 単数のオーディオで配信する場合（たとえば、MP3の場合)
|
| |
<audio
src="channel_neco.mp3" autoplay controls></audio>
ご利用のブラウザでは音声を再生する事が出来ません。
|
| |
|
|
なお、念のため以下のMIME記載の .htaccessファイルを配置したが、Xserverでは有無に関わり無くブラウザの対応に差異はなく、IExplorer
9のAAC再生は出来ない。
|
| |
AddType audio/mpeg .mp3 ＊audio/mp3
.mp3は間違いなのだ
AddType audio/mp4 .m4a ＊m4a(AAC)オーディオのメディアタイプの指定が不統一
AddType audio/wav .wav
AddType audio/ogg .ogg
|
| |
＜備考＞AACオーディオ(拡張子.m4a)のMIME定義は複雑なようだ。
こちらの記事「audio/m4aは、許可されていないMIMEタイプです」を参照して、
audio/aac、audio/x-aac、x-audio/aac、audio/m4a、audio/x-m4a、x-audio/m4a、audio/mp4、audio/x-mp4、x-audio/mp4
を全て試してみたがダメだった(拡張子 .m4a→ .mp4にリネームしても結果は同じ）
┓(´_`)┏ |
|
| |
|
|
| |
 |
| |
補足：SafariでHTML5 オーディオを再生するには QuickTimeが必要。
|
|
＊Windows 7、Mac OS
X 10.7で検証したところ、
|
| |
・ IExplorer
9は AACに対応しているが、このレンタルXserverでは再生出来ない。
・Safariは OGGに未対応だが、 XiphQTコンポーネントを導入すれば再生可能（但し、Windows版では
v5.0迄は可能だったが v5.1では不可)。 |
|
| |
III. スマートフォンの対応状況は以下と云うが( こちらより引用,
2011.06.21)・・・・ |
| |
| |
iPhone 3G
|
iPhone 3GS
|
iPhone 4
|
Android 2.1
|
Android 2.3
(xperia arc)
|
|
MP3 support
|
○
|
○
|
○
|
×
|
○
|
|
AAC support
|
○
|
○
|
○
|
×
|
×
|
|
WAV support
|
○
|
○
|
○
|
×
|
×
|
|
OGG/Vorbis support
|
×
|
×
|
○
|
×
|
×
|
|
| |
iPhone(iOS 5.1)で検証したところ、MP3, AAC,
WAVに対応していたが、自動再生は不可。OGGには未対応。
|
|
| |
|
IV. AQUOS PHONE SH-01D（Android 2.3.5及び 4.0.4)で検証したところ、
|
| |
|
|
標準ブラウザ
|
Firefox
15.0
|
Opera
Mobile
12.0
|
Chrome
18.0
|
|
2.3.5
|
4.0.4
|
|
MP3
support
|
○
|
○
|
×
|
○
|
○
|
|
AAC
support
|
○
|
○
|
×
|
○
|
○
|
|
WAV
support
|
○
|
○
|
○
|
○
|
○
|
|
OGG/Vorbis
support
|
○
|
○
|
○
|
○
|
○
|
|
| |
標準ブラウザは、四種類とも対応していた
＼(^O^)／
Opera Mobileは、MP3, AACにも対応。
Chromeは、四種類とも対応しているが 自動再生不可。
|
|
| |
|
|
V. MP3＋OGGの組み合わせで不思議な
” 輪唱” 現象が発生 ┓(´_`)┏
|
| |
1)PC用Firefox, Opera,
Safari, Chromeでは、一回の輪唱が起こってしまう。
・Firefox, Operaは MP3に未対応なので、OGGが輪唱してしまう。
・Safari 5.1は OGGに未対応なので、MP3が輪唱してしまう。
・Chromeは両音声に対応しているが、理屈からはMP3が輪唱するのであろうか？
＊IExplorerではこのような現象は起こらない。
2)Andriod用標準ブラウザ, Firefox, Opera Mobileは、いずれも輪唱が起こってしまう(更新しても発生)。
・標準ブラウザ, Operaは両音声に対応しているが、理屈からはMP3が輪唱するのであろうか？
・Firefoxは MP3に未対応なので、OGGが輪唱してしまう。
＊iPhoneのSafariでは、このような現象は起こらない。
|
| |
⇒ MP3＋WAVの組み合わせでは、この奇妙な不都合は起こらない（ こちらのページで検証） |
|
| |
|
VI. 再生コントロールバーのスキンは雑多
|
| |
PC用ブラウザ(Windows 7)
|
| |
|
Safari 5.1
|
（Mac版Safari 6.0も同じ） |
|
IE 9
|
|
|
IE10 ＊
|
|
|
Firefox 15
|
|
|
Opera 12
|
|
|
Chrome 21
|
|
|
| |
＊VMware PlayerPlayer 仮想環境に導入したWindows
8 RPの IExplorer
|
|
| |
| |
iPhone用ブラウザ(iOS 5.1)
|
| |
|
Safari
|
（音量調整は無し） |
|
|
| |
| |
Android用ブラウザ(AQUOS PHONE SH-01D；Android
2.3.5及び 4.0.4)
|
| |
|
標準
ブラウザ
|
2.3 |
（音量調整は無し） |
| 4.0 |
（音量調整は無し） |
|
Firefox 15
|
|
|
Opera
Mobile 12
|
|
|
Chrome 18
|
（音量調整は無し） |
|
|
| |
