建站
咨詢
售后
建站咨詢
新聞中心
此文介紹HTML5音頻API的主要框架和工作流程，因?yàn)橐纛l處理模塊很多，因此只簡單介紹幾種音頻處理模塊，并通過例子來展示效果。后續(xù)會(huì)介紹利用HTML5音頻API實(shí)現(xiàn)的項(xiàng)目，歡迎大家關(guān)注，敬請期待。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,成都創(chuàng)新互聯(lián)公司依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！
HTML5音頻API的主要框架和工作流程如下圖，在 AudioContext 音頻上下文中，把音頻文件轉(zhuǎn)成 buffer 格式，從音頻源 source 開始，經(jīng)過 AuidoNode 處理音頻，***到達(dá) destination 輸出音樂。這里形成了一個(gè)音頻通道，每個(gè)模塊通過 connect 方法鏈接并傳送音頻。
AudioContext
AudioContext 是一個(gè)音頻上下文，像一個(gè)大工廠，所有的音頻在這個(gè)音頻上下文中處理。
- let audioContext = new(window.AudioContext || window.webkitAudioContext)();
AudioContext 音頻上下文提供了很多屬性和方法，用于創(chuàng)建各種音頻源和音頻處理模塊等，這里只介紹一部分，更多屬性和方法可到MDN查閱文檔。
屬性
AudioContext.destination
返回 AudioDestinationNode 對象，表示當(dāng)前 AudioContext 中所有節(jié)點(diǎn)的最終節(jié)點(diǎn)，一般表示音頻渲染設(shè)備。
方法
AudioContext.createBufferSource()
創(chuàng)建一個(gè) AudioBufferSourceNode 對象, 他可以通過 AudioBuffer 對象來播放和處理包含在內(nèi)的音頻數(shù)據(jù)。
AudioContext.createGain()
創(chuàng)建一個(gè) GainNode,它可以控制音頻的總音量。
AudioContext.createBiquadFilter()
創(chuàng)建一個(gè) BiquadFilterNode，它代表代表一個(gè)雙二階濾波器，可以設(shè)置幾種不同且常見濾波器類型：高通、低通、帶通等。
createOscillator()
創(chuàng)建一個(gè) OscillatorNode, 它表示一個(gè)周期性波形，基本上來說創(chuàng)造了一個(gè)音調(diào)。
音頻轉(zhuǎn)換成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
音頻節(jié)點(diǎn)接口是一個(gè)音頻處理模塊。包括音頻源，音頻輸出，中間處理模塊。
方法
AudioNode.connect()
鏈接兩個(gè) AudioNode 節(jié)點(diǎn)，把音頻從一個(gè) AudioNode 節(jié)點(diǎn)輸出到另一個(gè) AudioNode 節(jié)點(diǎn)，形成一個(gè)音頻通道。
AudioNode.disconnect()
把 AudioNode 節(jié)點(diǎn)與其他節(jié)點(diǎn)斷開鏈接。
AudioBufferSourceNode
音頻源有多種，這里只介紹 buffer 的音頻源，buffer 的音頻源通過 AudioContext 接口的 createBufferSource 方法來創(chuàng)建。音頻源節(jié)點(diǎn)繼承 AudioNode 音頻節(jié)點(diǎn)。
- let bufferSource = audioContext.createBufferSource();
創(chuàng)建了 AudioBufferSourceNode 對象后，把 buffer 格式的音頻數(shù)據(jù)賦值給 AudioBufferSourceNode 對象的 buffer 屬性，此時(shí)音頻已經(jīng)傳遞到音頻源，可以對音頻進(jìn)行處理或輸出。
bufferSource.buffer = buffer;
方法
AudioBufferSourceNode.start(when[, duration])
開始播放。
- when：延遲播放時(shí)間，單位為秒。
- offset：定位音頻到第幾秒開始播放。
- duration：從開始播放結(jié)束時(shí)長，當(dāng)經(jīng)過設(shè)置秒數(shù)后自動(dòng)結(jié)束音頻播放。
AudioBufferSourceNode.stop([when])
- when：延遲停止時(shí)間，單位為秒。
停止播放，注意調(diào)用該方法后，無法再次調(diào)用 AudioBufferSourceNode.start 播放。
AudioDestinationNode
音頻終點(diǎn)是通過 AudioContext 接口的 destination 屬性訪問的。音頻終點(diǎn)繼承 AudioNode 音頻節(jié)點(diǎn)，
AudioDestinationNode 節(jié)點(diǎn)無法再把音頻信息傳遞給下一個(gè)音頻節(jié)點(diǎn)，即無法再鏈接其他音頻節(jié)點(diǎn)，因?yàn)樗呀?jīng)是終點(diǎn)，沒有輸出，也可以理解為他自己就是輸出。
- let audioDestinationNode = audioContext.destination;
此時(shí)我們有音頻起點(diǎn) AudioBufferSourceNode 和音頻終點(diǎn) AudioDestinationNode ，使用 AudioNode.connect() 方法把起點(diǎn)和終點(diǎn)鏈接起來，就形成了一條有輸入輸出的音頻通道，可以把音頻直接播放出來。
- bufferSource.connect(audioDestinationNode);
GainNode
用于音量變化。它是一個(gè) AudioNode 類型的音頻處理模塊。
- let gainNode = audioContext.createGain();
把音頻源、音頻輸出和音頻處理模塊鏈接一起，形成可控制音量大小的音頻。
- bufferSource.connect(gainNode);
- gainNode.connect(audioDestinationNode);
- let controlVolume = value => {
- gainNode.gain.value = value);
- }
- // 兩倍音量播放
- controlVolume(2);
BiquadFilterNode
表示一個(gè)簡單的低頻濾波器，可控制聲調(diào)。它是一個(gè) AudioNode 類型的音頻處理模塊。
- let filterNode = audioContext.createBiquadFilter();
輸出一個(gè)變調(diào)的音頻：
- bufferSource.connect(filterNode);
- filterNode.connect(audioDestinationNode);
- let controlFrequency = function(value) {
- filterNode.frequency.value = value;
- }
- // 音頻為1000變調(diào)
- controlFrequency(1000);
多個(gè)音頻源
在一個(gè)音頻上下文中，可以有多個(gè)音頻處理通道，即多個(gè)音頻源同時(shí)輸出。各個(gè)音頻處理通道內(nèi)的操作是獨(dú)立的，不影響其他音頻通道。
多個(gè)音頻處理模塊
一個(gè)音頻源可以經(jīng)過多個(gè)音頻處理模塊處理，音頻處理模塊疊加效果后輸出。
標(biāo)題名稱：HTML5音頻API Web Audio
當(dāng)前地址：http://m.fisionsoft.com.cn/article/ccdcjdj.html
