要在網頁上播放音樂有很多方式，在[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
