心得， 網站播放音效

要在網頁上播放音樂有很多方式，在[1]中介紹了許多方式如：

• 使用API 如 yahoo API(sample) , Google (sample)
• Using Plugins, 不同瀏覽器有不同的plugin，這裡我知道的有quick time, flash
• 使用 embed 標籤，像ie 的話是直接call mediaplay 播放的樣子，Firefox 需要額外裝Quick time的外掛
• 使用 object 標籤, 沒用過
• 使用 audio 標籤, HTML5方式[2], 好用，但是IE6~8 要使用的話需要額外設定，這裡就不深入討論
• 其他

其他相關找到的用法：

•  [3] 也是用 HTML5
• [4] 利用flash 來播放

為了單純方便播放聲音，我簡單利用jquery 和embed 的方式寫一個 呼叫聲音的函式，測試過 Firefox 需要額外裝Quick time的外掛, IE 和 Chrome 可以直接播放。

function JPlaySound(_soundlocation){
// _soundlocation like "music/sample.mp3"
$('embed#objJSound').remove(); // remove duplicate tag
var $newdiv = $('<embed autostart="true" hidden="true" id="objJSound" src="'+_soundlocation+'"></embed> '); // hidden embed tag
$('body').append($newdiv); // append to body
}




----------------------------------------------------------------------------------------
補充1  純粹使用 javascript 的 code


function JPlaySound(_soundlocation){
 // delete old tag if exist 
var olddiv = document.getElementById('objJSound');
if(olddiv!=null)
 document.body.removeChild(olddiv);
 var newdiv = document.createElement('embed');
 newdiv.setAttribute("id","objJSound");
 newdiv.setAttribute("src",_soundlocation);
 newdiv.setAttribute("hidden","true");
 newdiv.setAttribute("autostart",true);
 document.body.appendChild(newdiv);
 }

---------------------------------------------------------------------------------------
補充2 混用 HTML5 (支援ie 6,7,8)



設定 tag 和判斷是否支援HTML5 // HTML5 audio tag
<!-- html5 tag -->
 <audio id="a1" style="visibility:hidden;" controls> </audio>


 // 判斷是否支援HTML5


 <script type="text/javascript">
 var isSupportHTML5 = true;
 </script>










 // 不支援 （小於ie9）將 isSupportHTML5 設為 false





 <!--[if lt IE 9]>
 <script type="text/javascript">
 //您正在使用的瀏覽器為 ie9 或比 ie9 更新的版本 
 isSupportHTML5 = false;
 </script>
 <!--<![endif]-->


呼叫程式:
/** _soundlocation like "music/sample.mp3" 
 // Firefox 不支援 mp3 **/ 
 function JPlaySound(_soundlocation){
 if(isSupportHTML5){
 var audio = document.getElementById("a1");
 audio.src= _soundlocation;
 audio.load();
 audio.play();
 } else{
 // delete old tag if exist
 var olddiv = document.getElementById('objJSound');
 if(olddiv!=null)
   document.body.removeChild(olddiv);
 var newdiv = document.createElement('embed');
 newdiv.setAttribute("id","objJSound");
 newdiv.setAttribute("src",_soundlocation);
 newdiv.setAttribute("hidden","true");
 newdiv.setAttribute("autostart",true);
 document.body.appendChild(newdiv);
 }
 }


參考：
[1] W3cSchools.com, HTML Audio Sounds
[2] HTML5 audio tag
[3] jPlayer
[4] flashsound 
[5] Conditional Comments [if IE] : IE 專用 (IE only) 條件式 HTML 註解的語法
[6] Audio and Video processing in HTML5