Hands-on session on Web Audio API - Part 1

Name: Hands-on session on Web Audio API - Part 1
Rating: 4.3 (58 reviews)

Learn How to Use Key Web Audio API From the Ground Up Through Hands-On Demos and Detailed Use Cases!

Created byDurgaprasad Budhwani

Last updated 1/2022

English

English [Auto],

What you'll learn

Take the first step in your Web Audio API journey
Understand difference between analog and digital sounds
Understand characteristics of sound
Explore on capturing and playing audio sound using Web Audio API
How to processing captured sound by changing volume or filtering frequencies
How to visualize audio on browser

Course content

3 sections • 33 lectures • 1h 58m total length

History of Audio on Web1:11
Trace the history of audio on the web and learn to play audio in HTML pages, implement basic Web Audio API concepts, and apply low-pass and high-pass filters.
Selection of Code Editor0:32
Familiarize yourself with HTML and JavaScript; write code in JavaScript, and choose your preferred editor, from VS Code, Sublime Text, WebStorm, to online editors like CodePen and JSBin.
Basic HTML Page Setup2:29
Create a new web audio project in an IDE with an empty HTML5 template, then build a centered index.html using CSS flex to show 'Hello Web Audio API'.
Audio Player using HTML5 Audio Element1:16
Learn to build a browser audio player with an HTML5 audio element by linking a royalty-free file via URL or local file, adding controls, and playing music.
Properties of HTML5 Audio Element3:20
Explore essential HTML5 audio element properties, including muted, loop, autoplay, and preload (auto, metadata, none), and verify compatibility on Mozilla's site to ensure immediate, seamless playback.
How to handle unknown audio file formats in HTML5 Audio Element2:08
Learn to handle unknown audio formats in HTML5 audio elements by providing multiple sources (wav, mp3, ogg) and using a fallback message when formats are unsupported.
Audio Player using HTML5 Audio Object3:15
Learn to control music playback with the HTML5 audio object using JavaScript, create a new audio instance, load a file, and wire play and pause buttons with event listeners.
Limitations of HTML5 Audio Element and Audio Object1:12
Explore the limitations of the HTML5 audio element and audio object, including latency and buffering. Discover the one-track constraint, and the lack of real-time filtering or mixing across multiple tracks.

Introduction to Web Audio API and Audio Context3:14
Discover how the Web Audio API provides a high level JavaScript interface for processing and synthesizing audio, using an audio context and a directed graph of nodes.
OscillatorNode5:12
Learn how the Web Audio API uses an audio context and oscillator node to generate sound, connect to the default speaker, and start or stop a basic single-tone.
OscillatorNode Types3:01
Explore oscillator node properties by selecting oscillator type, switching between sine, triangular, square, and sawtooth waves, then verify wave shapes with Audacity.
Audio Context Property - CurrentTime4:02
Learn how the Web Audio API uses an AudioContext's currentTime to schedule precise timing and stop audio after two seconds, avoiding setTimeout.
Frequency Basics2:38
Explore what sound is and how frequency and amplitude shape loudness and pitch in web audio. Frequency measures wave cycles per second, while amplitude indicates loudness.
Audio Params4:30
Explore the Web Audio API's audio param interface, focusing on the value property and setValueAtTime to schedule oscillator frequency changes with audioContext.currentTime.
Live (Microphone) Input5:44
Capture microphone input and play it back through the default speaker with a single capture button, using audio context, suspend and resume, getUserMedia, and a MediaStream to the destination.
AudioBuffer and AudioBufferSourceNode3:49
Explore how audio buffers store PCM 32-bit floating-point data with samples from -1 to 1. Learn AudioBufferSourceNode playback; buffers are reusable while sources are single-use.
Audio Sampling Rate4:08
Explore how sampling rate, governed by the nyquist shannon sampling theorem, converts analog audio to discrete data and sets practical rates for voice and streaming.
AudioBufferNode - Hands-on session7:51
Engage in a hands-on session creating a white noise audio buffer with two channels and two seconds at 44.1 kHz, then play it via an audio buffer source node.

Introduction About Modifications Nodes0:42
Explore the modification node in the Web Audio API, routing audio through a processing engine to apply gain node, delayed node, biquad filter node, convolver node, and dynamic compressor node.
GainNode - Introduction1:47
Demonstrates the gain node as the primary volume control in the Web Audio API, explains immediate changes to gain and spikes, and shows exponential interpolation to adjust volume smoothly.
GainNode - Hands-On10:00
Gain hands-on with the Web Audio API by wiring an oscillator through a gain node, using sliders to adjust volume smoothly from 0 to 1 and prevent audio spikes.
Delay Node4:53
Explore the delay node and its delayTime control with a maximum delay time of up to 180 seconds. Route an oscillator or audio source through it to create echoes.
DelayNode - Echo Effect4:58
Implement an echo effect by feeding audio through a delay node of about 0.5 seconds, using an audio context and a microphone input connected to destination to hear the echo.
BiQuadFilterNode - Introduction4:37
Explore how BiQuadFilterNode with the Web Audio API shapes the audio spectrum by emphasizing or deemphasizing frequencies, focusing on human voice from 300 Hz to 3.1 kHz.
AudioBufferNode - Store Audio File3:46
Learn to store and play audio using the Web Audio API with an audio buffer, decode audio data, and compare playback via an audio buffer approach versus an audio tag.
BiQuadFilter - Low Pass Filter Hands On3:31
Explore designing a biquad low-pass filter in the Web Audio API, setting a cutoff frequency and applying it to an audio buffer to observe attenuation of higher frequencies.
BiQuadFilter - High Pass Filter Introduction2:25
Explore BiQuadFilter high pass filter fundamentals within the web audio API, contrasting it with low pass filtering, understanding cutoff frequency and resulting changes in signal frequencies and amplitude.
BiQuadFilter - High Pass Filter Hands-On1:23
Explore the Web Audio API's BiQuadFilter by hands-on high-pass filter experiments, transforming a pop song's spectrum and validating changes in real time.
BiQuadFIlter - Properties - Q Factor2:42
Explore biquad filter properties, including q factor and center frequency, to create low pass, high pass, and band pass effects, set cutoffs, and shape attenuation.
BiQuadFilter - Band Pass Filter Hands-On4:13
Apply a biquad band-pass filter with the Web Audio API to shape a sound's spectrum and observe how target frequencies around 1000 Hz and 1500 Hz influence bandwidth using Audacity.
Types of BiQuadFilter0:26
Explores the types of biquad filters in web audio, including the band-pass filter and other filter types, and discusses their roles in audio processing.
ConvolverNode Intro2:52
Explore the convolver node, applying linear convolution on an audio buffer to generate high-quality reverb via impulse responses. Discover how impulse responses define acoustic spaces and shape sound across environments.
ConvolverNode - Hands-on10:21
Explore hands-on ConvolverNode usage in the Web Audio API to create reverb by applying an impulse response generated from white noise.

Requirements

Basic knowledge about HTML5, JavaScript and CSS.

Description

The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.

This course is more focused on how to capture or play audio from audio sources, how to apply multiple filters (low pass filter, high pass filter, bandpass filter), how to delay the sound and create an echo effect and also focus on how to change the volume of capture sound.

For web developers, this course can understand the audio concepts effectively and how to create digital audio workstation applications in web applications using Web Audio API without knowing the complex digital signal processing algorithm like convolution, Fast Fourier Transform (FFT).

For the audio engineer, this course is the opportunity to understand how to convert desktop-based audio processing applications into web-based applications using Web Audio API.

This course also covers the basics of audio and audio properties like frequency and amplitude.

This course is divided into 3 Parts.

Audio Player HTML Element and Object
Web Audio API - Audio Sources
- Audio Source Generator - Oscillator
- Live Input Capture - Microphone Input
Web Audio API - Modification Node.
1. GainNode
2. DelayNode
3. BiQuardFilters

Join me in this course if you're ready to dive into Web Audio API. You won't be disappointed!

Who this course is for:

Any developer looking to get started with Web Audio API
Any audio engineering who wants to port existing music production app to web application.

Hands-on session on Web Audio API - Part 1

What you'll learn

Explore related topics

Course content

HTML 5 Audio Player8 lectures • 15min

Web Audio API - Audio Sources10 lectures • 44min

Web Audio API - Modification Nodes15 lectures • 59min

Requirements

Description

Who this course is for: