#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); }
相關資源