摘要:高動態范圍,采用進行內部處理。這最大限度地減少體積驟降音頻區域之間,從而導致更均勻的交叉衰減,可能是在電平略有不同區域之間。低通濾波器保持較低的頻率范圍,但丟棄高頻。
Introduction引用 Getting Started with Web Audio API
http://www.html5rocks.com/en/tutorials/webaudio/intro/
Audio on the web has been fairly primitive up to this point and until very recently has had to be delivered through plugins such as Flash and QuickTime. The introduction of the audio element in HTML5 is very important, allowing for basic streaming audio playback. But, it is not powerful enough to handle more complex audio applications. For sophisticated web-based games or interactive applications, another solution is required. It is a goal of this specification to include the capabilities found in modern game audio engines as well as some of the mixing, processing, and filtering tasks that are found in modern desktop audio production applications.
在網絡上的音頻已經相當普遍的時代,但直到最近我們想聽音頻,不得不通過如Flash和QuickTime的插件播放。在HTML5音頻元素的引入是非常重要的,音頻元素允許基本的流式音頻播??放。但是,它無法處理更復雜的音頻應用。對于復雜的基于Web的游戲或交互式應用,另一種解決方案是必需的。這是本說明書的目的,包括在現代游戲音頻引擎音頻混合處理,現代桌面音頻制作應用程序所包含的處理和過濾任務。
The APIs have been designed with a wide variety of use cases in mind. Ideally, it should be able to support any use case which could reasonably be implemented with an optimized C++ engine controlled via JavaScript and run in a browser. That said, modern desktop audio software can have very advanced capabilities, some of which would be difficult or impossible to build with this system. Apple"s Logic Audio is one such application which has support for external MIDI controllers, arbitrary plugin audio effects and synthesizers, highly optimized direct-to-disk audio file reading/writing, tightly integrated time-stretching, and so on. Nevertheless, the proposed system will be quite capable of supporting a large range of reasonably complex games and interactive applications, including musical ones. And it can be a very good complement to the more advanced graphics features offered by WebGL. The API has been designed so that more advanced capabilities can be added at a later time.
這些API已經設計可以滿足各種各樣的使用案例。理想的是,它應該能夠支持任何使用情況下它可以合理地具有優化C ++引擎通過JavaScript控制并在瀏覽器中運行來實現。這就是說,現代臺式音頻軟件可以有非常高級的功能,其中的一些將難以或不可能建立與該系統。蘋果公司的Logic音頻就是這樣一個應用程序,它具有外部MIDI控制器,??任意插件音頻效果和合成,高度優化的直接到磁盤的音頻文件讀取/寫入,支持緊密集成的時間伸縮,等等。盡管如此,所提出的系統將是相當能夠支持大范圍的相當復雜的游戲和交互式應用程序,包括音樂的。它可以是一個很好的補充,通過WebGL的提供更先進的圖形功能。該API被設計成使更高級的功能可以在以后的時間被加入。
FeaturesThe API supports these primary features:
Modular routing for simple or complex mixing/effect architectures,
including multiple sends and submixes.
High dynamic range, using 32bits floats for internal processing.
Sample-accurate scheduled sound playback with low latency for musical
applications requiring a very high degree of rhythmic precision such
as drum machines and sequencers. This also includes the possibility
of dynamic creation of effects.
模塊化路由簡單或復雜的混合/效果架構,包括多個發送和子混音。
高動態范圍,采用32bits floats進行內部處理。
采樣精確定時播放的聲音與音樂的低延遲 需要的節奏等精密程度非常高的應用 作為鼓機和定序。 這也包括了可能性動態創建的效果。
Automation of audio parameters for envelopes, fade-ins / fade-outs,
granular effects, filter sweeps, LFOs etc.
Flexible handling of channels in an audio stream, allowing them to be
split and merged.
Processing of audio sources from an audio or video media element.
自動化音頻參數信封,淡入/淡出,顆粒效果,過濾器掃描,低頻振蕩器等。
靈活的處理在音頻流的信道,使它們成為拆分和合并。
處理從音頻或視頻的媒體元素的音頻源。
Processing live audio input using a MediaStream from getUserMedia().
Integration with WebRTC Processing audio received from a remote peer
using a MediaStreamAudioSourceNode and [webrtc].
Sending a generated or processed audio stream to a remote peer using
a MediaStreamAudioDestinationNode and [webrtc].
Audio stream synthesis and processing directly in JavaScript.
使用MediaStream的getUserMedia()方法處理現場音頻輸入。
使用MediaStreamAudioSourceNode和[WebRTC],以實現將WebRTC從遠程對等體接收的音頻處理整合
利用發送生成或處理的音頻流發送到遠程對等 一個MediaStreamAudioDestinationNode和[WebRTC]。
在JavaScript中直接處理音頻流合成和加工。
Spatialized audio supporting a wide range of 3D games and immersive environments:
Panning models: equalpower, HRTF, pass-through
Distance Attenuation
Sound Cones
Obstruction / Occlusion
Doppler Shift
Source / Listener based
A convolution engine for a wide range of linear effects, especially very high-quality room effects. Here are some examples of possible effects:
Small / large room
Cathedral
Concert hall
Cave
Tunnel
Hallway
Forest
Amphitheater
Sound of a distant room through a doorway
Extreme filters
Strange backwards effects
Extreme comb filter effects
Dynamics compression for overall control and sweetening of the mix
Efficient real-time time-domain and frequency analysis / music visualizer support
Efficient biquad filters for lowpass, highpass, and other common filters.
A Waveshaping effect for distortion and other non-linear effects
Oscillators
立體音效支持多種3D游戲和沉浸式環境
卷積引擎廣泛的非線性效應,特別是非常高品質的室內效果。
動態壓縮混合的總體控制和甜味劑
高效的實時的時域和頻分析/音樂可視化支持
高效雙二階濾波器的低通,高通,和其他常用的過濾器
失真等非線性效應整波效應
Modular RoutingModular routing allows arbitrary connections between different AudioNode objects. Each node can have inputs and/or outputs. A source node has no inputs and a single output. A destination node has one input and no outputs, the most common example being AudioDestinationNode the final destination to the audio hardware. Other nodes such as filters can be placed between the source and destination nodes. The developer doesn"t have to worry about low-level stream format details when two objects are connected together; the right thing just happens. For example, if a mono audio stream is connected to a stereo input it should just mix to left and right channels appropriately.
模塊化路由允許不同的對象AudioNode之間的任意連接。每個節點可以具有輸入和/或輸出。
源節點沒有輸入和一個輸出。目的節點有一個輸入和沒有輸出,最常見的例子是AudioDestinationNode最終目的地到音頻硬件。如過濾器的其他節點可以放置在源和目的地節點之間。開發人員不必擔心低級別的流格式的細節時,兩個物體連接在一起;正確的事情只是發生。
例如,如果一個單聲道的音頻流被連接到立體聲輸入應該只是混合到左和右聲道適當。
In the simplest case, a single source can be routed directly to the output. All routing occurs within an AudioContext containing a single AudioDestinationNode:
在最簡單的情況下,單個源可直接路由到輸出??。所有的路由時包含一個AudioDestinationNode的AudioContext內
AudioContext一個AudioContext是用于管理和播放所有的聲音。為了生產使用Web音頻API聲音,創建一個或多個聲源,并將它們連接到由所提供的聲音目的地AudioContext 實例。這方面并不需要是直接的,并且可以通過任何數量的中間的AudioNodes充當用于音頻信號處理的模塊。
AudioContext的單個實例可以支持多個聲音輸入和復雜的音頻圖表,所以我們只需要其中的一個,因為我們創建的每一個音頻應用程序。
許多有趣的網絡音頻API的功能,如創建AudioNodes和音頻文件數據進行解碼的AudioContext的方法
下面的代碼片段創建了一個AudioContext:
var context; window.addEventListener("load", init, false); function init() { try { // Fix up for prefixing window.AudioContext = window.AudioContext||window.webkitAudioContext; context = new AudioContext(); } catch(e) { alert("Web Audio API is not supported in this browser"); } }Loading sounds
網絡音頻API使用AudioBuffer用于中短長度的聲音。
其基本方法是使用XMLHttpRequest進行提取聲音文件。
API支持加載多種格式的音頻文件數據,如WAV,MP3,AAC,OGG等。
針對不同的音頻格式支持的瀏覽器有所不同。
var dogBarkingBuffer = null; // Fix up prefixing window.AudioContext = window.AudioContext || window.webkitAudioContext; var context = new AudioContext(); function loadDogSound(url) { var request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "arraybuffer"; // Decode asynchronously request.onload = function() { context.decodeAudioData(request.response, function(buffer) { dogBarkingBuffer = buffer; }, onError); } request.send(); }
音頻文件數據為二進制(非文本),所以我們設置要求responseType是“arraybuffer”。
有關ArrayBuffers的更多信息,
一旦(未譯碼)的音頻文件數據已被接收,則可以保持左右購買解碼,或者它可被解碼馬上使用AudioContext decodeAudioData()方法。
這種方法需要存儲在request.response音頻文件數據的ArrayBuffer并異步進行解碼(不阻塞主JavaScript的執行線程)。
當decodeAudioData()完成后,它調用的回調函數,它提供解碼PCM音頻數據作為AudioBuffer。
一旦被加載一個或多個AudioBuffers,那么我們就可以播放聲音。
讓我們假設我們剛剛加載的AudioBuffer有狗叫的聲音,并且已完成加載過程。
然后我們就可以玩這個緩沖區用下面的代碼。
// Fix up prefixing window.AudioContext = window.AudioContext || window.webkitAudioContext; var context = new AudioContext(); function playSound(buffer) { var source = context.createBufferSource(); // creates a sound source source.buffer = buffer; // tell the source which sound to play source.connect(context.destination); // connect the source to the context"s destination (the speakers) source.start(0); // play the source now // note: on older systems, may have to use deprecated noteOn(time); }Dealing with time: playing sounds with rhythm
網絡音頻API允許開發者精確安排播放。為了證明這一點,讓我們建立一個簡單的節奏軌道。
其中hihat是發揮每一個八分音符,又踢又網羅玩法交替每季度,在4/4的時間。
假設我們已經加載了踢,圈套和hihat緩沖區,要做到這一點的代碼很簡單:
for (var bar = 0; bar < 2; bar++) { var time = startTime + bar * 8 * eighthNoteTime; // Play the bass (kick) drum on beats 1, 5 playSound(kick, time); playSound(kick, time + 4 * eighthNoteTime); // Play the snare drum on beats 3, 7 playSound(snare, time + 2 * eighthNoteTime); playSound(snare, time + 6 * eighthNoteTime); // Play the hi-hat every eighth note. for (var i = 0; i < 8; ++i) { playSound(hihat, time + i * eighthNoteTime); } }
不要輕易嘗試 那畫面太美 我不敢直視
Changing the volume of a sound一,你可能想要做一個聲音的最基本的操作是改變它的音量。
通過GainNode才能使用Web API的音頻,我們可以路由我們的源到目的地操縱量:
此連接建立可以實現如下:
// Create a gain node. var gainNode = context.createGain(); // Connect the source to the gain node. source.connect(gainNode); // Connect the gain node to the destination. gainNode.connect(context.destination);
經過圖已經成立,你可以通過編程操縱gainNode.gain.value如下改變音量:
// Reduce the volume. gainNode.gain.value = 0.5;
你們試下調個幾千倍 那場面不敢直視
Cross-fading between two sounds現在,假設我們有一個稍微復雜的情況,我們正在玩多種聲音,但要跨越二者之間褪色。
這是在一個DJ狀的應用,其中,我們有兩個唱盤和希望能夠從一個聲源到平移到另一種常見的情況。
要使用這樣的功能設置此,我們簡單地創建兩個GainNodes,并通過連接節點每個源
function createSource(buffer) { var source = context.createBufferSource(); // Create a gain node. var gainNode = context.createGain(); source.buffer = buffer; // Turn on looping. source.loop = true; // Connect source to gain. source.connect(gainNode); // Connect gain to destination. gainNode.connect(context.destination); return { source: source, gainNode: gainNode }; }Equal power crossfading
一個天真的線性淡入淡出的方式表現出你的樣本之間平移量暢游。
為了解決這一問題,我們使用一個等功率曲線,其中所述相應增益曲線是非線性的,并相交以更高的幅度。
這最大限度地減少體積驟降音頻區域之間,從而導致更均勻的交叉衰減,可能是在電平略有不同區域之間。
另一種常見的平滑轉換應用是一個音樂播放器應用。
當一首歌曲的變化,我們希望在淡出當前曲目了,褪去了新的,避免了不和諧的過渡。
要做到這一點,安排交叉淡入淡出的未來。
雖然我們可以使用的setTimeout執行此調度,這是不準確的。
隨著Web API的音頻,我們可以使用AudioParam界面安排為參數的未來值,如GainNode的增益值。
因此,給定播放列表,我們可以軌道之間通過調度當前播放的曲目上的增益下降,并在接下來的一個增益提高升學,雙雙小幅之前,當前曲目播放結束:
function playHelper(bufferNow, bufferLater) { var playNow = createSource(bufferNow); var source = playNow.source; var gainNode = playNow.gainNode; var duration = bufferNow.duration; var currTime = context.currentTime; // Fade the playNow track in. gainNode.gain.linearRampToValueAtTime(0, currTime); gainNode.gain.linearRampToValueAtTime(1, currTime + ctx.FADE_TIME); // Play the playNow track. source.start(0); // At the end of the track, fade it out. gainNode.gain.linearRampToValueAtTime(1, currTime + duration-ctx.FADE_TIME); gainNode.gain.linearRampToValueAtTime(0, currTime + duration); // Schedule a recursive track change with the tracks swapped. var recurse = arguments.callee; ctx.timer = setTimeout(function() { recurse(bufferLater, bufferNow); }, (duration - ctx.FADE_TIME) * 1000); }Applying a simple filter effect to a sound
該網絡音頻API允許從一個音頻節點到另一個你管的聲音,創造一個潛在的復雜的處理器鏈復雜的效果添加到您的soundforms。
這樣做的一個方法是把你的聲源和目的地之間BiquadFilterNodes。
這種類型的音頻節點可以做各種的可用于構建圖形均衡器,甚至更復雜的效果,主要是為了做選擇其中的聲音的頻譜的部分強調并制服低階濾波器。
支持的類型的過濾器包括:
Low pass filter
High pass filter
Band pass filter
Low shelf filter
High shelf filter
Peaking filter
Notch filter
All pass filter
和所有的過濾器所包含的參數,指定一定量的增益,在該應用過濾器的頻率和品質因數。
低通濾波器保持較低的頻率范圍,但丟棄高頻。
折斷點由頻率值確定,并且Q因子是無單位,并確定該圖的形狀。
增益只影響特定的過濾器,如低貨架和峰值濾波器,而不是本低通濾波器。
在一般情況下,頻率控制需要進行調整工作在對數標度,因為人的聽覺本身的工作原理相同(即,A 4為440Hz的,和A5是880hz)。
欲了解更多詳細信息,請參閱上面的源代碼鏈接FilterSample.changeFrequency功能。
最后,請注意,示例代碼,您可以連接和斷開濾波器,動態變化的AudioContext圖。
我們可以通過調用node.disconnect(outputNumber)斷開圖AudioNodes。
例如,要重新路線圖從去通過一個過濾器,以直接連接,我們可以做到以下幾點:
// Disconnect the source and filter. source.disconnect(0); filter.disconnect(0); // Connect the source directly. source.connect(context.destination);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85912.html
摘要:其實這個能做的事不光是音頻可視化。其實這次寫博客之前還完善了一下,給加上了通過設備的麥克風獲取音頻并可視化的方法。世界晚安參考基于實現音頻可視化效果本文作者本文鏈接利用實現音頻可視化 音頻可視化實現之后真的很酷,雖然這次只是跟著MDN上的教程學習了一下,照著Demo敲了一遍而已。但收獲頗多,記錄于此。 web audio api 先來感受一下 web audio api 的基礎概念,下...
摘要:前言本文翻譯自上的利用,這是中的的一個入門教程。原文是英文,但有日本同志翻譯的日文版。這是為了提供一個基本的低音増幅效果在這個例子中可以設定過濾器的種類,周波數,甚至的值。如果是過濾器的話,可以提供一個比指定周波數低的低音増幅。 前言 本文翻譯自MDN上的《Web Audio APIの利用》,這是HTML5中的Web Audio API的一個入門教程。原文是英文,但有日本同志翻譯的日文...
摘要:屬性返回對象,表示當前中所有節點的最終節點,一般表示音頻渲染設備。包括音頻源,音頻輸出,中間處理模塊。延遲停止時間,單位為秒。音頻終點是通過接口的屬性訪問的。各個音頻處理通道內的操作是獨立的,不影響其他音頻通道。 此文介紹HTML5音頻API的主要框架和工作流程,因為音頻處理模塊很多,因此只簡單介紹幾種音頻處理模塊,并通過例子來展示效果。后續會介紹利用HTML5音頻API實現的項目,歡...
閱讀 2158·2021-11-15 11:36
閱讀 1485·2021-09-23 11:55
閱讀 2493·2021-09-22 15:16
閱讀 2030·2019-08-30 15:45
閱讀 1867·2019-08-29 11:10
閱讀 1032·2019-08-26 13:40
閱讀 919·2019-08-26 10:44
閱讀 3173·2019-08-23 14:55