Your Very First Web Audio API

Demo

Agenda

  1. What's Web Audio API ?
  2. Digital Audio Basics
  3. Web Audio API Overview
  4. Sample Codes
  5. Resources

What's Web Audio API

What's different from Audio element?

What's different from Audio Data API?

Typical usage of Web Audio API

Digital Audio Basics

Sound is vibration of air

How to digitize sound

Web Audio API Overview

Web Audio API is consisted of various modules

Primary interfaces

Most basic moduler structure

Various AudioNodes

Various AudioNodes

Demo

Sample Codes

Basic of plyaing sound

var c = new webkitAudioContext();
var source = c.createBufferSource(); // Generate BufferSourceNode
source.buffer = buffer; // Pre-loaded audio file
source.connect(c.destination); // Connect nodes
source.noteOn(0); // Play sound

Adding node

var g = c.createGainNode(); // Generate GainNode
g.gain.value = 0.5; // Turn down volume to 0.5
source.connect(g); // Connect sound source to GainNode
g.connect(c.destination); // Connect GainNode to destination

How to load audio file

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer'; // Load binary (arraybuffer)

// Decode loaded audio binary file asynchronously
xhr.onload = function() {
  context.decodeAudioData(xhr.response, function(buffer) {
    dogBarkingBuffer = buffer;
  }, onError);
}
xhr.send();

Resources

Spec, Tutorial

Related Libraries

Thank you!