In addition to viewing the web pages themselves, read the underlying HTML source file and the JavaScipt script file as plain text in a "smart" text editor such as Atom or Sublime Text.
Basics of HTML
Playing a Sound File
User Interface Basics
Web Audio API Basics
The essential elements of HTML are demonstrated and explained.
The appearance of a web page can be established in a stylesheet that describes the fonts, sizes, weightings, alignments, colors, etc.
The difference between a "type", a "class", and an "id" is explained; those can be used to manage and interact with HTML elements.
There's an HTML element specifically for opening and playing a sound file.
Play Audio with a Simple Button
There are user interface HTML elements, such as buttons, text fields, sliders, etc. Here we put a button element and an audio element in a web page, then use JavaScript to interact with them: load a sound file, set the audio properties, get the "click" event from the button, and handle that event to start or stop playing the file.
Create and Play an HTMLAudioElement in JavaScript
You can create and control an HTML element within JavaScript as an object. This shows how to create an audio element within JavaScript, and how to control its playback rate from the Web page.
It's also possible to play sound files using the Web Audio API. See the examples "Use an HTMLMediaElement as an AudioNode in Web Audio" and "Buffer and play a sound in Web Audio", under Web Audio API Basics below.
Play Audio with a Simple Button
Make a basic button in HTML with the <button> element, then handle its "onclick" event. (This is the same as the example of the same name, above.)
You can make a button look however you want, using image files. Here we're just switching back and forth between a "play" image and a "stop" image, to play or stop the audio.
An <input> element of type "text" is normally used to allow the user to enter some information. Here, however, (in a rather atypical usage) we're just using it to get keystrokes, and play specific sounds in response to specific keys. The "oninput" event is triggered each time a new character is entered in the field.
You can use a slider (a.k.a. a fader) to adjust the audio volume. This example also demonstrates how to automate a timed fade-in or fade-out.
The decibel scale corresponds pretty well to our subjective sense of loudness. A linear increase in decibels results in an exponential increase in actual amplitude. So, a linear fade-in or fade-out in decibels, as done in this example, usually sounds more elegant than a linear fade of amplitude, as was done in the preceding example, especially for slow fades.
Play a Tone When the Web Page is Opened
This web page does nothing more than play a 440 Hz sine tone (at full volume, so beware) when the page is loaded, and stops only when the page is closed.
Play a Test Tone with a Simple Button
This is very much like the previous example, except we've given the user a button to turn the tone on and off. We've also used the OscillatorNode's frequency property to set the oscillator's frequency to 1000 Hz instead of the default of 440 Hz. (Technically the frequency property of an OscillatorNode is an AudioParam object, which in turn has a value property; that's what you have to set.)
Control an oscillator's waveform, pitch, and loudness with input elements on the web page.
Control an oscillator's detune parameter with a low-frequency modulating oscillator. Vibrato rate depends on the frequency of the modulating oscillator. Control the depth of the vibrato, in cents, by adjusting its amplitude (controlled with a Gain node).
Schedule sound events to take place at a specific time using the setInterval() global function.
Schedule Timed Notes in Web Audio
In the Web Audio API, a parameter of an audio node (an AudioParam) can be changed with sample-accurate timing.
Use an HTMLMediaElement as an AudioNode in Web Audio
In the WebAudio API, you can use an HTMLAudioElement in an AudioNode (specifically, a MediaElementSourceNode) in a signal chain of an AudioContext. That gives you the ability to process the sound as it's being played.
Buffer and play a sound in Web Audio
You can also load a sound into RAM from a sound file, which potentially gives you even more processing versatility, because you can easily access any part of the sound at any time.