小試HTML 5 audio
小閃光跟小木頭的英文向來是罩門，國語數學生活成績鮮少需要操心，小學低年級的難度拿八九十分不成問題，但英文總像扶不起的阿斗，即便已排了課後英文班補強，上個月期中考還是各自抱回了六十分跟七十三分，跟其他科目表現形成強烈對比，讓做爹的無法再坐視不管，決定採取行動強行介入。
其實小閃光在唸小二時，我就曾為了搶救她七零八落的英文字彙，擷取課本CD中的字彙朗讀語音轉成MP3，再從網路上找來關聯圖片，用jQuery UI配合Silverlight播放音效，做了簡單的字彙複習及測驗遊戲，希望多少能吸引她的興趣，多點練習聊勝於無。到此危急存亡之秋(謎: 喂!! 有這麼嚴重嗎?)，看來又是該程式重出江湖的時刻了，而且得連小木頭一起納入；過去主要讓小閃光用客廳的LCD電視練習，這回我想試著讓網頁在iPad上執行，如此，每天睡前在床上玩個幾回，成效或許更佳。
既然決定了，就動手修改程式邁向HTML5吧!
jQuery的跨瀏覽器能力真不錯，幾乎不用修改就能在iPad的Safari上運行無阻。但主要的問題在於天殺的蘋果容不下Flash，更甭提Silverlight，網頁要播放音效就只能仰賴HTML 5 <audio>了，搞了一陣子，總算讓程式在iPad上順利執行，也算我首次運用HTML 5解決問題，筆記過程中學到的心得如下:
- 基本寫法是
<audio src=”blah.mp3”></audio>
另外有幾個Attribute可用: [參考]
* controls: 要不要顯示播放面板
* preload: none/metadata/auto 是否在播放前預先載入檔案
* autoplay: 自動播放 - 請寫成<audio …></audio>，不要簡化成<audio ... />，某些瀏覽器不接受。
- 在Windows Safari上要播放<audio>，請務必安裝QuickTime，少了它Safari會變啞巴。
- 各瀏覽器<audio>所支援的音效檔格式不盡相同，FF 3.6+吃ogg, wav, Safari 5+跟IE9吃mp3, wav，Chrome 6吃ogg, mp3, Opera 10.5吃ogg, wav。所以想通吃各瀏覽器請同時備妥ogg, mp3格式: [參考]
<audio>
<source src="crossBrowserIsPainful.mp3” />
<source src="crossBrowserIsPainful.ogg” />
.... 加入不支援audio時嵌入Flash或Silverlight的語法 ...
</audio> - 經實測，在iPad Safari要play()前要先執行load()才能確保順利播放。
報告完異!!