Archive for the 'WebAudio' Category

WebAudio Deep Note, part 5: gain node

Nov 9th, 2019

Previously on “Deep Note via WebAudio”: intro play a sound 2.1. boots and cats loop and change pitch multiple sounds nodes In part 4 we figured out how to play all 30 sounds of the Deep Note at the same time. The problem is that’s way too loud. Depending on the browser and speakers you […]

 

WebAudio Deep Note, part 5: nodes

Nov 3rd, 2019

Previously on “Deep Note via WebAudio”: intro play a sound 2.1. boots and cats loop and change pitch multiple sounds Nodes WebAudio makes a heavy use of the concept of nodes. A node is something that does a thing (I know, very helpful), for example makes noise or manipulates sound somehow. Then you connect the […]

 

WebAudio Deep Note, part 4: multiple sounds

Oct 20th, 2019

Previously in this series: intro play a sound 2.1. kick and snare (a fun distraction from the main series) loop and change pitch We need to play 30 sounds at the time, that is 30 instances of the same cello sample, all pitched all over the place and over time. (If that sounds odd, please […]

 

WebAudio Deep Note, part 3: loop and change pitch

Oct 11th, 2019

This journey started here, then continued, then took a slight turn, just for giggles, and now we’re back. After you learned how to play a sound, now let’s loop it, because the DeepNote goes on for about 25 seconds and we play the exact same sample of a cello that is under a second long. […]

 

WebAudio Deep Note, part 2.1: Boots and Cats

Oct 3rd, 2019

In the previous installment we came across the idea of creating noise via an oscillator and via a buffer filled with your own values (as opposed to values being read from a pre-recorded file). I thought a bit of elaboration is in order, even though we’re not going to use these ideas for the Deep […]

 

WebAudio Deep Note, part 2: play a sound

Sep 28th, 2019

(Part 1 (intro) is here.) Now that we know what to do, let’s go for it! First rule of business: load an audio file and play it. UI Let’s build a simple HTML page (demo) to test things: <button onclick=”play()”>▶ play</button> <button onclick=”stop()”>STOP!!!!</button> Now let’s implement this play() function. Fetch… Loading means fetching from the […]

 

WebAudio Deep Note, part 1: intro

Sep 18th, 2019

You’ve heard of WebAudio, but have you done any experimenting with it? This is a series of posts on exploring and discovering various APIs that WebAudio has to offer, by doing something concrete, namely recreate the THX Deep Note sound. If you cannot wait for me to write up everything, the code and slides (these […]

 

WebMIDI test page

Mar 3rd, 2017

Yesterday I had to plug in my keyboard to the computer and wasn’t sure if it was working. How do I test? Well, I had to look up an older post, copy and paste some code to the console… what a drag. I though it would be cool to have a page where you can […]

 

Nightmare scenarios with WebMIDI

Nov 2nd, 2016

In the spirit of Halloween… allow me to entertain you with some security and privacy nightmares with the way WebMIDI is implemented in Chrome currently. The spec says: “The suggested security model explicitly allows user agents to require the user’s approval before giving access to MIDI devices, although it is not currently required to prompt […]

 

Hello WebMIDI

Oct 30th, 2016

Inspired by this talk by Jean-Philippe Côté I saw at Web Unleashed in Toronto last month, I thought I should dust off the old midi cable. MIDI? MIDI is a protocol that various music and lighting devices use to talk to each other. Believe it or not v1.0 of the spec from 1983 is still […]

 

WebAudio: live input

Oct 28th, 2012

Live input, aka getUserMedia: it exists in Chrome Canary for audio too. Great times to be a web developer, right? Let’s check it out. Here’s the demo, but first a prerequisite: go chrome://flags, search for “Web Audio Input” and enable it. Restart Chrome Canary. With a guitar I wanted to have a little trickier setup […]

 

WebAudio: oscillator in JS

Oct 27th, 2012

How about generating some noise in JavaScript? Demo is here: oscillator. How does this work? Using HTML Web Audio you can synthesize audio with a given frequency. E.g. 440Hz is A (“la” in solfège) This means you don’t need an <audio> element or any mp3, ogg, wav, etc, no external files. Let’s see how. Capable […]