初探瀏覽器的audio

初探瀏覽器的audio

前言

  最近想要在引擎裡加入聲音相關的功能，但以前卻從來沒有在瀏覽器寫過聲音相關的功能，在此將學習的過程做個紀錄。

內容

  在瀏覽器要撥放聲音Web Audio API與Audio element，API的部分用起來比較複雜，但可以控制較多特性，element的部分用起比較簡單，但能控制的特性就比較有限。最後我選了element，因為簡單而且工能夠用。
  使用Audio element時，和使用Image element時很像，以下是範例

var audio=new audio();
var dataLoadEnd = false;
audio.onloaded = function(){
  console.log("Load end!");
  dataLoadEnd = true;
}
function playAudio(){
  if(!dataLoadEnd)
    return;
  audio.play();
} 
function pauseAudio(){
  if(!dataLoadEnd)
    return;
  audio.pause();
}
function replayAudio(){
  if(!dataLoadEnd)
    return;
  if(!audio.paused)
    audio.pause();
  audio.currentTime = 0;
  audio.play();
}

使用play()來啟動撥放，用pause()控制停止，如果需要重新撥放的話先pause()，再把"currentTime"這個property設成0，接著再play()即可。每個Audio element可以視為一個音軌，不會有同時只能撥放一個之類的問題，在實現聲音引擎的多音軌可說是相當方便。還有一些時用的property，像是"loop"，可以控制循環撥放，還有"volume"，用來控制音軌的音量。

參考資料

Audio element
Web Audio API