small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2lNXax3">CSS-Tricks</a> | Greg Hovanesyan 
Web Audio API let&#8217;s us make sound right in the browser. It makes your sites, apps, and games more fun and engaging. You can even build music-specific applications like drum machines and synthesizers. In this article, we&#8217;ll learn about working with the Web Audio API by building some fun and simple projects.

<h3>Getting Started</h3>
Let&#8217;s do some terminology. All audio operations in Web Audio API are handled inside an audio context. Each basic audio operation is performed with audio nodes that are chained together, forming an audio routing graph. Before playing any sound, you&#8217;ll need to create this audio context. It is very similar to how we would create a context to draw inside with the <code>&lt;canvas&gt;</code> element. Here&#8217;s how we create an audio context: 
<pre><code>var context = new (window.AudioContext || window.webkitAudioContext)();</code></pre>
Safari requires a webkit prefix to support AudioContext, so you should use that line instead of <code>new AudioContext();</code>
Normally the Web Audio API workflow looks like this:
<img src="http://ift.tt/2lSKo0Y" alt="Create audio context - srcset="> create source -&gt; connect filter nodes -&gt; connect to destination&#8221; /&gt;
There are three types of sources: 
<ol>
<li>Oscillator &#8211; mathematically computed sounds</li>
<li>Audio Samples &#8211; from audio/video files</li>
<li>Audio Stream &#8211; audio from webcam or microphone</li>
</ol>
<h3>Let&#8217;s start with the oscillator</h3>
An oscillator is a repeating waveform. It has a frequency and peak amplitude. One of the most important features of the oscillator, aside from its frequency and amplitude, is the shape of its waveform. The four most commonly used oscillator waveforms are sine, triangle, square, and sawtooth. 
<img src="http://ift.tt/2lSwKuT" alt="">
It is also possible to create custom shapes. Different shapes are suitable for different synthesis techniques and they produce different sounds, from smooth to harsh.
The Web Audio API uses <code>OscillatorNode</code> to represent the repeating waveform. We can use all of the above shown waveform shapes. To do so, we have to assign the value property like so:
<pre><code>OscillatorNode.type = 'sine'|'square'|'triangle'|'sawtooth';</code></pre>
You can create a custom waveform as well. You use the <code>setPeriodicWave()</code> method to create the shape for the wave, that will automatically set the type to custom. Let&#8217;s listen how different waveforms produce different sounds:
<a href="http://ift.tt/2lSGK7t">See the Pen.</a>
Custom waveforms are created using Fourier Transforms. If you want to learn more about custom waveform shapes (like how to make a police siren, for example) you can learn it from <a href="http://ift.tt/2mvCZZd">this</a> good resource.
<h3>Running the oscillator</h3>
Let&#8217;s try to make some noise. Here&#8217;s what we need for that:
<ol>
<li>We have to create a Web Audio API context</li>
<li>Create the oscillator node inside that context</li>
<li>Choose waveform type</li>
<li>Set frequency</li>
<li>Connect oscillator to the destination</li>
<li>Start the oscillator</li>
</ol>
Let&#8217;s convert those steps into code.
<pre><code>var context = new (window.AudioContext || window.webkitAudioContext)(); 
 
var oscillator = context.createOscillator(); 
 
oscillator.type = 'sine'; 
oscillator.frequency.value = 440; 
oscillator.connect(context.destination); 
oscillator.start();</code></pre>
Note how we define the audio context. Safari requires the <code>webkit</code> prefix, so we make it cross-browser compatible.
Then we create the oscillator and set the type of the waveform. The default value for type is <code>sine</code>, so you can skip this line, I just like to add it to make it more clear and easy to update. We set the frequency value to 440, which is the A4 note (which is also the default value). The frequencies of musical notes C0 to B8 are in the range of 16.35 to 7902.13Hz. We will check out an example where we play a lot of different notes later in this article.
Now when we know all of that, let&#8217;s make the volume adjustable as well. For that we need to create the gain node inside of the context, connect it to the chain, and connect gain to the destination.
<pre><code>var gain = context.createGain(); 
oscillator.connect(gain); 
gain.connect(context.destination); 
 
var now = context.currentTime; 
gain.gain.setValueAtTime(1, now); 
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.5); 
oscillator.start(now); 
oscillator.stop(now + 0.5);</code></pre>
Now you have some knowledge of working with the oscillator, here&#8217;s a good exercise. <a href="http://ift.tt/2lSFCk9">This Pen</a> has the oscillator code setup. Try to make a simple app that changes the volume when you move the cursor up and down your screen, and changes the frequency when you move the cursor left and right.
<h3>Timing of Web Audio API</h3>
One of the most important things in building audio software is managing time. For the precision needed here, using the JavaScript clock is not the best practice, because it&#8217;s simply not precise enough. However the Web Audio API comes with the <code>currentTime</code> property, which is an increasing double hardware timestamp, which can be used for scheduling audio playback. It starts at 0 when the audio context is declared. Try running <code>console.log(context.currentTime)</code> to see the timestamp.
For example, if you want the Oscillator to play immediately you should run <code>oscillator.start(0)</code> (you can omit the 0, because it&#8217;s the default value). However you may want it to start in one second from now, play for two seconds, then stop. Here&#8217;s how to do that:
<pre><code>var now = context.currentTime; 
oscillator.play(now + 1); 
oscillator.stop(now + 3);</code></pre>
There are two methods to touch on here.
The <code>AudioParam.setValueAtTime(value, startTime)</code> method schedules change of the value at the precise time. For example, you want to change frequency value of the oscillator in one second:
<pre><code>oscillator.frequency.setValueAtTime(261.6, context.currentTime + 1);</code></pre>
However, you also use it when you want to instantly update the value, like <code>.setValueAtTime(value, context.currentTime)</code>. You can set the value by modifying the value property of the <code>AudioParam</code>, but any updates to the value are ignored without throwing an exception if they happen at the same moment as the automation events (events scheduled using <code>AudioParam</code> methods).
The <code>AudioParam.exponentialRampToValueAtTime(value, endTime)</code> method schedules gradual change of the value. This code will exponentially decrease the volume of the oscillator in one second, which is a good way to stop sound smoothly:
<pre><code>gain.gain.exponentialRampToValueAtTime(0.001, context.currentTime + 1);</code></pre>
We can&#8217;t use 0 as the value because the value needs to be positive, so we use a very small value instead.
<h3>Creating the Sound class</h3>
Once you stop an oscillator, you cannot start it again. You didn&#8217;t do anything wrong, it&#8217;s the feature of the Web Audio API that optimizes the performance. What we can do is to create a sound class that will be responsible from creating oscillator nodes, and play and stop sounds. That way we&#8217;ll be able to call the sound multiple times. I&#8217;m going to use ES6 syntax for this one:
<pre><code>class Sound { 
 
 constructor(context) { 
 this.context = context; 
 } 
 
 init() { 
 this.oscillator = this.context.createOscillator(); 
 this.gainNode = this.context.createGain(); 
 
 this.oscillator.connect(this.gainNode); 
 this.gainNode.connect(this.context.destination); 
 this.oscillator.type = 'sine'; 
 } 
 
 play(value, time) { 
 this.init(); 
 
 this.oscillator.frequency.value = value; 
 this.gainNode.gain.setValueAtTime(1, this.context.currentTime); 
 
 this.oscillator.start(time); 
 this.stop(time); 
 
 } 
 
 stop(time) { 
 this.gainNode.gain.exponentialRampToValueAtTime(0.001, time + 1); 
 this.oscillator.stop(time + 1); 
 } 
 
}</code></pre>
We pass the context to the constructor, so we can create all of the instances of the <code>Sound</code> class within same context. Then we have the <code>init</code> method, that creates the oscillator and all of the necessary filter nodes, connects them, etc. The <code>Play</code> method accepts the value (the frequency in hertz of the note it&#8217;s going to play) and the time when it shall be played. But first, it creates the oscillator, and that happens every time we call the <code>play</code> method. The <code>stop</code> method exponentially decreases the volume in one second until it stops the oscillator completely. So whenever we need to play the sound again, we create a new instance of the <code>sound</code> class and call the play method. Now we can play some notes:
<pre><code>let context = new (window.AudioContext || window.webkitAudioContext)(); 
let note = new Sound(context); 
let now = context.currentTime; 
note.play(261.63, now); 
note.play(293.66, now + 0.5); 
note.play(329.63, now + 1); 
note.play(349.23, now + 1.5); 
note.play(392.00, now + 2); 
note.play(440.00, now + 2.5); 
note.play(493.88, now + 3); 
note.play(523.25, now + 3.5);</code></pre>
That will play C D E F G A B C, all within the same context. If you want to know the frequencies of notes in hertz, you can find them <a href="http://ift.tt/NppDsd">here</a>.
Knowing all of this makes us able to build something like a xylophone! It creates a new instance of <code>Sound</code> and plays it on <code>mouseenter</code>. You can check the example and try make one by yourself as an exercise. 
See the Pen <a href="http://ift.tt/2lSEM6S">Play the Xylophone (Web Audio API)</a> by Greg Hovanesyan (<a href="http://codepen.io/gregh">@gregh</a>) on <a href="http://codepen.io">CodePen</a>.
I&#8217;ve created a playground, containing all the required HTML and CSS, and the <code>Sound</code> class we&#8217;ve created. Use the <code>data-frequency</code> attribute to obtain the note values. <a href="http://ift.tt/2mvAMgd">Try here</a>.
<h3>Working with a recorded sound</h3>
Now that you&#8217;ve built something with an oscillator, let&#8217;s now see how to work with a recorded sound. Some sounds are very hard to reproduce using the oscillator. In order to use realistic sounds in many cases, you&#8217;ll have to use recorded sounds. This can be `.mp3`, `.ogg`, `.wav`, etc. See the <a href="http://ift.tt/1obMWDZ">full list</a> for more info. I like to use `.mp3` as it&#8217;s lightweight, widely supported, and has pretty good sound quality.
You can&#8217;t simply get sound by a URL like you do with images. We have to run an <code>XMLHttpRequest</code> to get the files, decode the data, and put into the buffer.
<pre><code>class Buffer { 
 
 constructor(context, urls) { 
 this.context = context; 
 this.urls = urls; 
 this.buffer = []; 
 } 
 
 loadSound(url, index) { 
 let request = new XMLHttpRequest(); 
 request.open('get', url, true); 
 request.responseType = 'arraybuffer'; 
 let thisBuffer = this; 
 request.onload = function() { 
 thisBuffer.context.decodeAudioData(request.response, function(buffer) { 
 thisBuffer.buffer[index] = buffer; 
 updateProgress(thisBuffer.urls.length); 
 if(index == thisBuffer.urls.length-1) { 
 thisBuffer.loaded(); 
 } 
 }); 
 }; 
 request.send(); 
 }; 
 
 loadAll() { 
 this.urls.forEach((url, index) =&gt; { 
 this.loadSound(url, index); 
 }) 
 } 
 
 loaded() { 
 // what happens when all the files are loaded 
 } 
 
 getSoundByIndex(index) { 
 return this.buffer[index]; 
 } 
 
}</code></pre>
Let&#8217;s take a look at the constructor. We receive our context there as we did in the <code>Sound</code> class, receive the list of URLa that will be loaded, and an empty array for the buffer.
The we have two methods: <code>loadSound</code> and <code>loadAll</code>. <code>loadAll</code> loops through the list of URLs and calls the <code>loadSound</code> method. It&#8217;s important to pass the index, so that we put the buffered sound into the correct element of the array, regardless of which request loads first. This also let&#8217;s us see which request is the last, which means that on its completion the buffer is loaded.
Then you can call the <code>loaded()</code> method, which can do something like hiding the loading indicator. And finally the <code>getSoundByIndex(index)</code> method gets the sound from the buffer by index for playback.
The <code>decodeAudioData</code> method has a newer Promise-based syntax, but it doesn&#8217;t work in Safari yet:
<pre><code>context.decodeAudioData(audioData).then(function(decodedData) { 
 // use the decoded data here 
});</code></pre>
Then we have to create the class for the sound. Now we have our complete class to work with the recorded sound:
<pre><code>class Sound() { 
 
 constructor(context, buffer) { 
 this.context = context; 
 this.buffer = buffer; 
 } 
 
 init() { 
 this.gainNode = this.context.createGain(); 
 this.source = this.context.createBufferSource(); 
 this.source.buffer = this.buffer; 
 this.source.connect(this.gainNode); 
 this.gainNode.connect(this.context.destination); 
 } 
 
 play() { 
 this.setup(); 
 this.source.start(this.context.currentTime); 
 } 
 
 stop() { 
 this.gainNode.gain.exponentialRampToValueAtTime(0.001, this.context.currentTime + 0.5); 
 this.source.stop(this.context.currentTime + 0.5); 
 } 
 
}</code></pre>
The constructor accepts the context and the buffer. We create by calling <code>createBufferSource()</code> method, instead of <code>createOscillator</code> as we did before. The buffer is the note (element from the buffer array) that we get using the <code>getSoundByIndex()</code> method. Now instead of the oscillator we create a buffer source, set the buffer, and then connect it to the destination (or gain and other filters).
<pre><code>let buffer = new Buffer(context, sounds); 
buffer.loadAll(); 
 
sound = new Sound(context, buffer.getSoundByIndex(id)); 
sound.play();</code></pre>
Now we have to create an instance of buffer and call the <code>loadAll</code> method, to load all of the sounds into the buffer. We also have the <code>getSoundById</code> method to grab the exact sound we need, so we pass the sound to the <code>Sound</code> and call <code>play()</code>. The <code>id</code> can be stored as a data attribute on the button that you click to play the sound.
Here&#8217;s a project that uses all of that: the buffer, the recorded notes, etc:
See the Pen <a href="http://ift.tt/2mvFlqS">The Bluesman &#8211; You Can Play The Blues (Web Audio API)</a> by Greg Hovanesyan (<a href="http://codepen.io/gregh">@gregh</a>) on <a href="http://codepen.io">CodePen</a>.
You can use that example for for reference, but for your own exercise, <a href="http://ift.tt/2lSJ6mT">here&#8217;s a playground</a> I&#8217;ve created. It has all the necessary HTML and CSS and the URLs to the notes that I have recorded on a real electric guitar. Try writing your own code!
<h3>Intro to Filters</h3>
The Web Audio API lets you add different filter nodes between your sound source and destination. <code>BiquadFilterNode</code> is a simple low-order filter which gives you control over what parts of the frequency parts shall be emphasized and which parts shall be attenuated. This lets you build equalizer apps and other effects. There are 8 types of biquad filters: highpass, lowpass, bandpass, lowshelf, highshelf, peaking, notch, and allpass.
Highpass is a filter that passes higher frequencies well, but attenuates lower frequency components of signals. Lowpass passes lower frequencies, but attenuates higher frequencies. They are also called &#8220;low cut&#8221; and &#8220;high cut&#8221; filters, because that explains what what happens to the signal.
Highshelf and Lowshelf are filters are used to control the bass and treble of the sound. They are used to emphasize or reduce signals above or below the given frequency.
You will find a Q property <code>BiquadFilterNode</code> interface, which is a double representing the Q Factor. Quality Factor or <a href="http://ift.tt/1D84wmC">Q Factor</a> control the bandwidth, the number of frequencies that are affected. The lower the Q factor, the wider the bandwidth, meaning the more frequencies will be affected. The higher the Q factor, that narrower the bandwidth.
You can find more info about filters <a href="http://ift.tt/2lSFKQu">here</a>, but we can already build a parametric equalizer. It&#8217;s an equalizer that gives full control for adjusting the frequency, bandwidth and gain.
Let&#8217;s build a parametric equalizer.
<a href="http://ift.tt/2mvCIFG">See the Pen.</a>
Let&#8217;s take a look on how we can apply distortion to the sound. If you wonder what makes an electric guitar sound like one, it is the distortion effect. We use the WaveShaperNode interface to represent a non-linear distorter. What we need to do is to create a curve that will shape the signal, distorting and producing the characteristic sound. We don&#8217;t have to spend a lot of time to create the curve, as it&#8217;s already <a href="http://ift.tt/2lSLeL9">done for us</a>. We can adjust the amount of distortion as well:
<a href="http://ift.tt/2mvQ1py">See the Pen.</a>
<h3>Afterword</h3>
Now that you&#8217;ve seen how to work with the Web Audio API, I recommend playing with it on your own and making your own projects!
Here are some libraries for working with web audio:
<ul>
<li><a href="http://ift.tt/1ZlBmXt">Pizzicato.js</a> &#8211; Pizzicato aims to simplify the way you create and manipulate sounds via the Web Audio API</li>
<li><a href="http://ift.tt/1kVSIqm">webaudiox.js</a> &#8211; webaudiox.js is a bunch of helpers that will make working with the WebAudio API easier</li>
<li><a href="http://ift.tt/TbFDP8">howler.js</a> &#8211; Javascript audio library for the modern web</li>
<li><a href="http://ift.tt/1fEGBOb">WAD</a> &#8211; Use the HTML5 Web Audio API for dynamic sound synthesis. It&#8217;s like jQuery for your ears</li>
<li><a href="http://ift.tt/2i8CDWY">Tone.js</a> &#8211; A Web Audio framework for making interactive music in the browser</li>
</ul>
<hr>
<a href="http://ift.tt/2lNXax3">Introduction to Web Audio API</a> is a post from <a href="https://css-tricks.com">CSS-Tricks</a>

Introduction to Web Audio API

Introduction to Web Audio API

Top Stories