HTML5音頻API Web Audio

此文介紹HTML5音頻API的主要框架和工做流程，由於音頻處理模塊不少，所以只簡單介紹幾種音頻處理模塊，並經過例子來展現效果。後續會介紹利用HTML5音頻API實現的項目，歡迎你們關注，敬請期待。

HTML5音頻API的主要框架和工做流程以下圖，在 AudioContext 音頻上下文中，把音頻文件轉成 buffer 格式，從音頻源 source 開始，通過 AuidoNode 處理音頻，最後到達 destination 輸出音樂。這裏造成了一個音頻通道，每一個模塊經過 connect 方法連接並傳送音頻。

AudioContext

AudioContext 是一個音頻上下文，像一個大工廠，全部的音頻在這個音頻上下文中處理。

let audioContext = new(window.AudioContext || window.webkitAudioContext)();

AudioContext 音頻上下文提供了不少屬性和方法，用於建立各類音頻源和音頻處理模塊等，這裏只介紹一部分，更多屬性和方法可到MDN查閱文檔。

屬性

AudioContext.destination

返回 AudioDestinationNode 對象，表示當前 AudioContext 中全部節點的最終節點，通常表示音頻渲染設備。

方法

AudioContext.createBufferSource()

建立一個 AudioBufferSourceNode 對象, 他能夠經過 AudioBuffer 對象來播放和處理包含在內的音頻數據。

AudioContext.createGain()

建立一個 GainNode,它能夠控制音頻的總音量。

AudioContext.createBiquadFilter()

建立一個 BiquadFilterNode，它表明表明一個雙二階濾波器，能夠設置幾種不一樣且常見濾波器類型：高通、低通、帶通等。

createOscillator()

建立一個 OscillatorNode, 它表示一個週期性波形，基本上來講創造了一個音調。

音頻轉換成Buffer格式

使用decodeAudioData()方法把音頻文件編譯成buffer格式。

function decodeAudioData(audioContext, url) {
    return new Promise((resolve) => {
        let request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';
        request.onload = () => {
            audioContext.decodeAudioData(request.response, (buffer) => {
                if (!buffer) {
                    alert('error decoding file data: ' + url);
                    return;
                } else {
                    resolve(buffer);
                }
            })
        }
        request.onerror = function() {
            alert('BufferLoader: XHR error');
        }
        request.send();
    })
}

let buffer = decodeAudioData(audioContext, './sounds/music.mp3');

AudioNode

音頻節點接口是一個音頻處理模塊。包括音頻源，音頻輸出，中間處理模塊。

方法

AudioNode.connect()

連接兩個 AudioNode 節點，把音頻從一個 AudioNode 節點輸出到另外一個 AudioNode 節點，造成一個音頻通道。

AudioNode.disconnect()

把 AudioNode 節點與其餘節點斷開連接。

AudioBufferSourceNode

音頻源有多種，這裏只介紹 buffer 的音頻源，buffer 的音頻源經過 AudioContext 接口的 createBufferSource 方法來建立。音頻源節點繼承 AudioNode 音頻節點。

let bufferSource = audioContext.createBufferSource();

建立了 AudioBufferSourceNode 對象後，把 buffer 格式的音頻數據賦值給 AudioBufferSourceNode 對象的 buffer 屬性，此時音頻已經傳遞到音頻源，能夠對音頻進行處理或輸出。

bufferSource.buffer = buffer;

方法

AudioBufferSourceNode.start(when[, duration])

開始播放。

• when：延遲播放時間，單位爲秒。

• offset：定位音頻到第幾秒開始播放。

• duration：從開始播放結束時長，當通過設置秒數後自動結束音頻播放。

AudioBufferSourceNode.stop([when])

• when：延遲中止時間，單位爲秒。

中止播放，注意調用該方法後，沒法再次調用 AudioBufferSourceNode.start 播放。

AudioDestinationNode

音頻終點是經過 AudioContext 接口的 destination 屬性訪問的。音頻終點繼承 AudioNode 音頻節點，

AudioDestinationNode 節點沒法再把音頻信息傳遞給下一個音頻節點，即沒法再連接其餘音頻節點，由於他已是終點，沒有輸出，也能夠理解爲他本身就是輸出。

let audioDestinationNode = audioContext.destination;

此時咱們有音頻起點 AudioBufferSourceNode 和音頻終點 AudioDestinationNode ，使用 AudioNode.connect() 方法把起點和終點連接起來，就造成了一條有輸入輸出的音頻通道，能夠把音頻直接播放出來。

bufferSource.connect(audioDestinationNode);

戳我看栗子

GainNode

用於音量變化。它是一個 AudioNode 類型的音頻處理模塊。

let gainNode = audioContext.createGain();

把音頻源、音頻輸出和音頻處理模塊連接一塊兒，造成可控制音量大小的音頻。

bufferSource.connect(gainNode);
gainNode.connect(audioDestinationNode);

let controlVolume = value => {
    gainNode.gain.value = value);
}

// 兩倍音量播放
controlVolume(2);

戳我看栗子

BiquadFilterNode

表示一個簡單的低頻濾波器，可控制聲調。它是一個 AudioNode 類型的音頻處理模塊。

let filterNode = audioContext.createBiquadFilter();

輸出一個變調的音頻：

bufferSource.connect(filterNode);
filterNode.connect(audioDestinationNode);

let controlFrequency = function(value) {
    filterNode.frequency.value = value;
}

// 音頻爲1000變調
controlFrequency(1000);

多個音頻源

在一個音頻上下文中，能夠有多個音頻處理通道，即多個音頻源同時輸出。各個音頻處理通道內的操做是獨立的，不影響其餘音頻通道。

戳我看栗子

多個音頻處理模塊

一個音頻源能夠通過多個音頻處理模塊處理，音頻處理模塊疊加效果後輸出。

戳我看栗子

歡迎關注：Leechikit
原文連接：segmentfault.com

到此本文結束，歡迎提問和指正。寫原創文章不易，若本文對你有幫助，請點贊、推薦和關注做者支持。