blog.Ring.idv.tw
#2012-06-12 update - iOS6支援Web Audio API
Web Audio API是一個提供你方便處理或合成聲音的JavaScript API，它是最近這一年內才逐漸開始發展的標準，主要負責推動此標準的是W3C Audio Working Group，該組識是在去年3月25日才成立的，根據他們預期的規劃來看~ 2011年第2季會發佈初步的工作草案(Working Draft)，並預計在2012年第3季成為正式標準，不過直到去年2011年12月15日該組識才發佈初步的Web Audio API - Working Draft，談到這邊.. 那為何需要有此標準呢？HTML5不是已經定義好<audio>標籤了嗎？我想應該這麼說~ HTML5 <audio> Tag的主要目的是用於Media Playback，所以它允許你可以將聲音檔放在網路上，並透過瀏覽器直接播放而不需要仰賴其它的Plugin(如：Flash Player)，但...如果我們想動態製造些混音或聲音特效時該怎麼處理？為何當初Angry Birds Chrome的聲音功能還需要仰賴Flash呢？而這也就是為何需要有Web Audio API存在的原因。
P.S. Angry Birds Chrome開發人員使用Web Audio API後的心得
玩玩看吧! 改一下下述程式你也能很快的做出一些混音或聲音特效。
var audioContext;
var audioBuffer;
window.addEventListener('load', init, false);
function init()
{
try
{
audioContext = new webkitAudioContext();
loadSound("music.mp3");
}
catch(e) {
alert(e);
}
}
function loadSound(url)
{
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.onload = function()
{
audioContext.decodeAudioData(xhr.response, function(buffer)
{
audioBuffer = buffer;
playSound();
}, function(e){alert(e);}
);
};
xhr.send();
}
function playSound()
{
var source = audioContext.createBufferSource();
var gainNode = audioContext.createGainNode();
var filter = audioContext.createBiquadFilter();
source.connect(filter);
source.buffer = audioBuffer;
filter.connect(gainNode);
filter.type = 0; // Low-pass filter. See BiquadFilterNode docs
filter.frequency.value = 500; // Set cutoff to 500 HZ
gainNode.gain.value = 1.0;
gainNode.connect(audioContext.destination);
source.noteOn(0);
}
相關資源
