Introduction to Web Audio

Web Audio is also a relatively new JavaScript API, which is different from the <audio> in HTML5, which simply means that the,<audio> tag is designed to embed an audio file in a Web page. Like the player, it has an interface, while web audio gives developers the ability to process and analyze audio data, such as mixing, filtering, and so on, similar to PS for audio data.

General Web applications should not fall into these APIs, but some types of web sites such as game engines or online music editors should be used.

The Web audio API is tightly wrapped around a conceptual design: audio context, which is like a graph, each node in the way is an audio node, and the audio data from the source node follows the specified edge of the program in step-by-step destination nodes.
If you've been exposed to DirectShow development, audio context is like Filter manager, and audio node is a variety of filter, and of course, if you're a Linux developer, it looks like a pipe. There can be a lot of audio node in an audio context, which is the simplest form. and audio node includes four kinds,
1. SOURCE Node
2. Processing nodes (gain node, Panner node, wave shaper node, oscillator node, delay node, convolver node, etc.)
4. Destination nodes (destination node)

Initialize Audio context

Only Firefox and WebKit browsers (Chrome, Safari, Opera) now support the Web Audio API, but as with any new standard, each browser uses a specific prefix, so consider this when calling the API.

?

123456

window. Audiocontext = (window. Audiocontext | | Window.webkitaudiocontext); if      var context = new window. Audiocontext (); " else {      Console.log ( }

An audio context object can support multiple nodes, including the source and destination nodes, each newly created audio context has a default destination node, which typically represents the default audio output device on the current machine. can be obtained by context.destination.

Create Audio node?

123456789101112131415

//Create source node var source = Context.createbuffersource (); //Create gain node var gain = Context.creategain (); #### audio node, break operation # # # #   //Connect Source to gain source.connect (gain); //Connect gain to node gain.connect (context.destination);  //disconnect source from gain Source.disconect (0); //disconnect gain from destination gain.disconnect (0);

　　

Play sound

The so-called paddle, no sound and no good API can not come out. So how do we get audio data? Now that you've become a Web Audio, the data is definitely from the web. Here is the code snippet that downloads the audio file from the server and then decodes the playback.

?

12345678910111213141516

var context = createAudioContext();var audioURl = ‘http://...‘; // 这里替换为音频文件URLvar xhr = new XMLHttpRequest();xhr.open(‘GET‘, audioURL, true);xhr.responseType = ‘arraybuffer‘; // XMLHttpRequest 2的新东西xhr.onload = function() {    // 音频数据在request.response中，而不是request.requestText    context.decodeAudioData(request.response, function (buffer) {        source = context.createBufferSource();        source.buffer = buffer;        source.connect(context.destination);        source.start(0); // 0是当前audio context中的同步时间    }}xhr.send();

Time Control

Web Audio provides very precise time control, and all the time is counted in seconds. Yes, you're right, it's the second, but the seconds here are stored using high-precision floating-point numbers at the bottom, and the actual accuracy is high. There is a synchronization system in the audio context that is created to provide absolute time to the outside, which can be obtained by context.currenttime. This absolute time starts from 0, and once the context is created, it starts to go.

In code Source.start (time), it is required to start playback at absolute times and, of course, if the time is less than context.currenttime, so the Source.start (0) in the code snippet above, In fact, it means to play immediately, if you want to specify to play after N seconds, use Source.start (Context.currenttime + N).

Source.start can also specify two additional parameters, one is the start time of the audio, the duration of an audio, such as a one-minute video, you can use Source.start (10, 20, 30) to specify 10 seconds after the audio file playback 20 seconds to 20 + The content between 30 seconds. As for the pause, continue function, you need to manually record the time point, the web audio itself does not provide these features, the other point is that the Web audio timing function is not canceled, married girl, spilled water ah.

?

12345678910111213141516171819202122

var startOffset = 0; // audio file offsetvar startTime = 0; // web audio absolute timefunction start() {    startTime = context.currentTime;    var source = context.createBufferSource();    source.buffer = buffer;    source.loop = true;    source.connect(context.destination);    source.start(0, startOffset % buffer.duration);}function pause() {    source.stop();    // 已经播放了多长时间    startOffset += context.currentTime - startTime;}function resume() {    // 和<audio>标签嵌入的音频文件不同，source node是不能重复播放的，所以继续功能其实就是play    play();}

This is the most basic application of web audio. Of course, Web audio is more than just that, with other types of audio node, you can basically complete a small mixing room.

Introduction to Web Audio