html5 目前已經是前端網頁程式的主流,Adobe 也早就宣佈 flash 不再支援行動裝置,所以在設計上就必須考慮到 no flash 的替代方案。
HTML5 已經有很多不同的 polyfill 替代方案,即在各家瀏覽器或平台如果不支援 HTML5 , 可以另一種形式來執行,不會因為某種瀏覽器不支援 HTML5 , 就無法執行網頁
要知道這個 HTML5 功能的支援項目,可以在 http://www.w3schools.com/html/html5_audio.asp
查到完整資訊
這個 sample 以 jPlayer 為例 http://jplayer.org/ , (也可以播放影片喔)
1. 首先貼上下列的程式碼 , 因為這個範例是每個考題都有自己的 mp3 檔,所以寫成 function , 動態載入 jquery id & mp3 file name,因為 jPlayer 提供 flash player , 所以 flash player 的路徑必須設定正確,否則會找不到 player
2. 再貼上 html code 就完成了
在 IE 播放結果,因為 IE8 不支援 HTML5 Audio 播放,所以自動填入 flash player,可以按 F12 觀察 HTML Code , 可以發現網頁已經載入 flash
FireFox 支援 HTML5 Audio ,所以直接播放mp3 , 按 F12 觀察 HTML code , 並沒有載入 flash , 而是自己寫的 html code
在 iPhone 執行結果