Generating and manipulating audio in the browser is easier than ever thanks to the Web Audio API. So, changing the “tone” of our oscillator is as simple as: oscillator. Most browsers support at least three other options: 'sawtooth', 'triangle', and 'square'. The waveform is represented by the type property of the OscillatorNode interface. Our oscillator uses a periodic waveform to emit its tone. currentTime + 10 ) Bonus: adjusting the periodic waveform exponentialRampToValueAtTime ( 466.16 ,ĪudioContext. Or /* Slowly transition to Bb4 over the span of 10 seconds */ If we want our oscillator to emit a “Bb” instead of an “A”, we should do something like this: /* The frequency (in Hz) of Bb4 is 466.16 */ However, direct reassignment to the AudioParam value property has been deprecated in favor of helper methods. The sound of an AudioNode such as oscillator can be manipulated via its AudioParam properties. The frequency value of our oscillator implements the AudioParam interface. The property that matters most for our purposes is equency: console. Type: 'sine' | 'sawtooth' | 'triangle' | 'square' Logging the oscillator object, we get something like this (specific property values are omitted as they may be different depending on the device/browser): console. Let’s conclude by manipulating our oscillator to make different sounds. currentTime + 10 ) /* Cancel the signal 10 seconds after that */ The parameter value is used to schedule the start/stop events: /* Emit a signal 10 seconds from now */ The start and stop methods both accept a single parameter of type number.
Once an AudioNode has been stopped, it cannot be started again! A new AudioNode will need to be created to resume playback. You can stop our oscillator this way: oscillator. Congratulations, you’re making music with the Web Audio API! Of course, no one wants to hear the same pitch forever and ever. You should hear a sound comparable to a dial tone. We pipe our input signal (the oscillator) into a digital power amp (the audioContext), which then passes the signal to the speakers (the destination). The Web Audio API attempts to mimic an analog signal chain. But first, we need to “wire” the oscillator to our audioContext: oscillator. This is all we need to make sound with the browser–an AudioContext and an OscillatorNode. To see what sorts of sounds it can generate on its own, let’s use audioContext to create an OscillatorNode: const oscillator = audioContext. Instances of the AudioContext can create audio sources from scratch.The AudioContext is a master “time-keeper.” All signals should be scheduled relative to audioContext.currentTime.Here are some more things to keep in mind when working with the AudioContext: It might be helpful to imagine audioContext-our instance of the AudioContext-as a sort of DJ: it coordinates a collection of audio sources and ensures that the sources play through the user’s speakers at the right time and with the right “sound.” And like a DJ, we can think of audioContext as a mediator between sources of sound and a “sound system,” the host machine’s audio hardware. Prep workĪs mentioned, support for the Web Audio API is not universal, so it’s best to verify that the API is available in the user’s browser: let audioContext try Īfter this simple check, we’re safe to use the Web Audio API’s functionality.
Osculator tutorial code#
In this short introduction, you’ll learn about the Web Audio API’s AudioContext, and the ability of AudioContext instances to create simple oscillators which can be used to transform your browser into a retro synthesizer! This tutorial’s code snippets have been tested in Chrome, but you can probably follow along using the console of your favorite browser’s developer tools. The Web Audio API is an abstraction layer which aims to simplify audio programming for the web.
0 kommentar(er)
