Tag Archives: Audio API

Video: Ukulele Hero


One of the things that make video games awesome is that you can use anything to make a game. One of the things that make being a web developer awesome is that you have a lot of amazing APIs at your disposal.

Why not combine both for maximum effect? Like using the Web Audio API to make your own music driven game using a real life ukulele as controller? I’d like to show you how, why and on top you’ll learn some music theory.

Creating an Accessible Breakout Game Using Web Audio and SVG


via Creating an Accessible Breakout Game Using Web Audio and SVG.

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

As the co-author of Babylon.js, a WebGL gaming engine, I was always felt a little uneasy listening to folks discuss accessibility best practices at web conferences. The content created with Babylon.js is indeed completely inaccessible to blind people. Making the web accessible to everyone is very important. I’m more convinced than ever about that as I’m personally touched via my own son. And so I wanted to contribute to the accessibility of the web in some way.

AudioKeys: Prototyping Synth designs using Kyle Stetz AudioKeys library


via AudioKeys –.

Welome to another segment on web audio! We here at Sonoport hope you have found our previous tutorials fun and informative! Today, we will showcase a great new library that will take a lot of the nitty gritty of JavaScript and allow us musicians faster access to sound experimentation!

Kyle Stetz, designer and developer for P’unk Avenue in Philadelphia, has created a great library for using key input to play notes on a scale, which he has aptly namedAudiokeys. In this post, we will walk you through setting up AudioKeys as well as creating a playable custom synth using the diatonic scale. Mr. Stetz is the webaudio wizard who gave us typedrummer, and if you have yet to check it out we highly recommend it.

In this tutorial we will walk you through the setup, and along the way explain a few of the ins and outs of JavaScript. WebAudio is a great tool, but to best harness and make the most of it one must know JavaScript as well.

Audio Sampling and the Delay Node with AudioKeys


via Audio Sampling and the Delay Node with AudioKeys – sounDesign.

This post originally appeared on Sonoport Tech Blog.


Welcome to another tutorial on Web Audio API! Last week we did a tutorial on theAudioKeys library, utilizing it to make a qwerty keyboard syntheszier. Now, let’s turn that synthesizer into a sampler, and add a delay effect to it. While simple in theory, we will see that audio playback in web audio is a bit more involved than creating oscillators.

But never fear, with a little understanding of both JavaScript and signal flow, we will have ourselves a sweet sampler and a decadent delay. See what I did there?

First, let me explain how the webaudio API handles audio playback. When we want to play an audio file, we must decode that audio file. Our internet browser is only a piece of software that connects us to the world wide web, nothing more (well maybe a bit more…) and nothing less. Because the browser will not understand us when we say “Hey, Chrome, play this fat kick!”, we need to speak to the browser in a language it can understand, the beautiful prose of binary.

The Web Audio API: What Is It?


via The Web Audio API: What Is It? – Tuts+ Code Tutorial.

This post is part of a series called The Web Audio API.
The Web Audio API: Adding Sound to Your Web App

Don’t worry, it’s here! An API that will not only whiten your teeth and improve your posture, but will add sound to your website in a wonderful way*. It’s the Web Audio API! Never heard of it? Don’t worry. This tutorial will get you up and running in no time.

The Web Audio API is a high-level way of creating and manipulating sound directly in the browser via JavaScript. It allows you to either generate audio from scratch or load and manipulate any existing audio file you may have. It’s extremely powerful, even having its own timing system to provide split-second playback.

“Can’t I just use the <audio> element?” Well, yes, but it really depends on what your use-case is. The <audio> element is perfect for embedding and playing audio clips such as music or podcasts, but if you require a bit more control, such as programmatically controlling volume or adding effects, then the Web Audio API will be right up your Tin Pan Alley.

Onwards with our Web Audio Journey: Oscillators, Filters and Gain Nodes


via Onwards with our Web Audio Journey: Oscillators, Filters and Gain Nodes – sounDesign.

This post is part of the series Make Noise with Web Audio API and originally appeared on Sonoport Tech Blog.


To help guide you on your web audio journey this segment will be about the Audio Context, how to create Oscillators, Filters, and Gain nodes. Previously we have complied a bunch of information that would be useful for anyone to start on web audio here, then we went through the basics of making sound and the brief history of Web Audio API here, now for this post, we are going to talk more about… nodes!

Inside of the API, everything is a node! NODE! NODE! node… What is a node? A node, or specifically an AudioNode, is the unit of processing inside WebAudio. We as developers, have to connect these AudioNodes in various patterns to generate, process and analyse audio. Such a connected set of AudioNodes is called an AudioGraph. Think of it as a tree. At the base of the tree (the trunk of the tree?) is the Audio Context.

The Web Audio API: Adding Sound to Your Web App


via The Web Audio API: Adding Sound to Your Web App – Tuts+ Code Tutorial.

What happened to audio on the web? For a time the web was the platform to show off your taste in tunes. From MIDI versions of The Final Countdown bubbling in the background, to autoplaying MySpace mp3s being thrown in your face, sound was everywhere.

Not anymore. Having been burned by these user experience atrocities, web developers stay well away from it. Sadly sound has taken a backseat on the web, while native apps flourish.

Think of the notification sound your hear when receiving an email, or the little pop when you pull to refresh the Twitter app. Such apps show how sound can be integral to a great user experience.

In this tutorial I’ll show you how to bring sound back to the web, in a good way!