Home  Web-development   The web aud ...

The Web Audio API example in browser

The Web Audio API is a powerful tool for creating and manipulating audio content directly in the browser. It allows developers to control audio playback, apply effects, and create complex audio visualizations. Below is a basic example demonstrating how to use the Web Audio API to play an audio file and apply a simple gain (volume) control.

Example: Playing an Audio File with Gain Control

1. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Audio API Example</title>
</head>
<body>
  <h1>Web Audio API Example</h1>
  <input type="file" id="audioFileInput" accept="audio/*">
  <button id="playButton">Play</button>
  <button id="stopButton">Stop</button>
  <label for="volumeControl">Volume:</label>
  <input type="range" id="volumeControl" min="0" max="2" step="0.01" value="1">
  
  <script src="script.js"></script>
</body>
</html>

2. JavaScript Code (script.js)

let audioContext;
let audioBuffer;
let sourceNode;
let gainNode;

// Function to initialize the audio context and nodes
function initAudioContext() {
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
  gainNode = audioContext.createGain();
  gainNode.gain.value = 1;
  gainNode.connect(audioContext.destination);
}

// Function to load the selected audio file
function loadAudioFile(file) {
  const reader = new FileReader();
  
  reader.onload = function(e) {
    audioContext.decodeAudioData(e.target.result, function(buffer) {
      audioBuffer = buffer;
    }, function(err) {
      console.error('Error decoding audio data:', err);
    });
  };
  
  reader.readAsArrayBuffer(file);
}

// Function to play the audio
function playAudio() {
  if (audioBuffer) {
    sourceNode = audioContext.createBufferSource();
    sourceNode.buffer = audioBuffer;
    sourceNode.connect(gainNode);
    sourceNode.start(0);
  }
}

// Function to stop the audio
function stopAudio() {
  if (sourceNode) {
    sourceNode.stop(0);
  }
}

// Event listeners
document.getElementById('audioFileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    initAudioContext();
    loadAudioFile(file);
  }
});

document.getElementById('playButton').addEventListener('click', playAudio);
document.getElementById('stopButton').addEventListener('click', stopAudio);

document.getElementById('volumeControl').addEventListener('input', function(event) {
  const volume = event.target.value;
  gainNode.gain.value = volume;
});

Explanation

  1. HTML Structure:

    • An <input> element of type file allows the user to select an audio file.
    • Two buttons, "Play" and "Stop", control audio playback.
    • A <input> element of type range is used to control the volume.

  2. JavaScript Code:

    • Audio Context Initialization: The initAudioContext function creates an AudioContext and a gain node to control the volume.
    • Loading the Audio File: The loadAudioFile function reads the selected file as an ArrayBuffer and decodes it into an audio buffer.
    • Playing the Audio: The playAudio function creates a buffer source node, sets its buffer to the decoded audio data, and connects it to the gain node.
    • Stopping the Audio: The stopAudio function stops the buffer source node.
    • Volume Control: The volume control slider adjusts the gain node's gain value.
Published on: Jul 25, 2024, 02:44 AM  
 

Comments

Add your comment