Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Generating sound on the fly with JavaScript/ HTML5
The Web Audio API is used to control audio, which allows you to choose audio sources. You can also add effects, create audio visualizations, panning, and generate sounds programmatically in web browsers.
Basic Sound Generation
To generate sound with the Web Audio API, you need three main components: an AudioContext, an oscillator (sound source), and a destination (speakers). Here's how to create a simple tone:
<!DOCTYPE html>
<html>
<head>
<title>Generate Sound</title>
</head>
<body>
<button onclick="playTone()">Play 500Hz Tone</button>
<script>
function playTone() {
// Create audio context (one per document)
var context = new (window.AudioContext || window.webkitAudioContext)();
// Create oscillator
var oscillator = context.createOscillator();
oscillator.type = 'sine'; // sine, square, sawtooth, triangle
oscillator.frequency.value = 500; // 500 Hz frequency
// Connect to destination (speakers)
oscillator.connect(context.destination);
// Start and stop the oscillator
oscillator.start();
oscillator.stop(context.currentTime + 2); // Play for 2 seconds
}
</script>
</body>
</html>
Different Waveform Types
The Web Audio API supports different oscillator waveform types, each producing a distinct sound character:
<!DOCTYPE html>
<html>
<head>
<title>Waveform Types</title>
</head>
<body>
<button onclick="playWave('sine')">Sine Wave</button>
<button onclick="playWave('square')">Square Wave</button>
<button onclick="playWave('sawtooth')">Sawtooth Wave</button>
<button onclick="playWave('triangle')">Triangle Wave</button>
<script>
function playWave(type) {
var context = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = context.createOscillator();
oscillator.type = type;
oscillator.frequency.value = 440; // A4 note
oscillator.connect(context.destination);
oscillator.start();
oscillator.stop(context.currentTime + 1);
}
</script>
</body>
</html>
Volume Control with GainNode
To control volume, use a GainNode between the oscillator and destination:
<!DOCTYPE html>
<html>
<head>
<title>Volume Control</title>
</head>
<body>
<button onclick="playWithVolume(0.1)">Quiet (10%)</button>
<button onclick="playWithVolume(0.5)">Medium (50%)</button>
<button onclick="playWithVolume(1.0)">Loud (100%)</button>
<script>
function playWithVolume(volume) {
var context = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = context.createOscillator();
var gainNode = context.createGain();
// Set up oscillator
oscillator.type = 'sine';
oscillator.frequency.value = 523; // C5 note
// Set volume (0.0 = silent, 1.0 = full volume)
gainNode.gain.value = volume;
// Connect: oscillator ? gainNode ? destination
oscillator.connect(gainNode);
gainNode.connect(context.destination);
oscillator.start();
oscillator.stop(context.currentTime + 1);
}
</script>
</body>
</html>
Key Points
- AudioContext: The main controller for all audio operations
- Oscillator: Generates waveforms (sine, square, sawtooth, triangle)
- Frequency: Measured in Hz, determines pitch (440Hz = A4 note)
- GainNode: Controls volume (0.0 to 1.0)
- Browser Support: Requires user interaction to start audio context
Browser Compatibility
The Web Audio API is supported in all modern browsers. Use the webkit prefix for older Safari versions. Note that most browsers require user interaction (like a button click) before allowing audio playback.
Conclusion
The Web Audio API provides powerful tools for generating sounds programmatically. By combining oscillators, gain nodes, and different waveform types, you can create complex audio experiences directly in the browser without external audio files.
457 Views
