How to get Audio from an HTML Video File ?

Last Updated : 05 Feb, 2024

To extract audio from an HTML video file, we can use the Web Audio API. First, utilize a file input in HTML to allow users to select a video file. Then, employ JavaScript to read the selected video file, decode its audio data using the Web Audio API, and finally, play the extracted audio. This approach enables seamless audio extraction and playback directly within the web browser.

Preview

Screenshot-2024-02-05-110401

Approach

Create an HTML file containing a file input element (<input type=” file “>) with the ID “videoInput” to allow users to select a video file.
Apply simple CSS styles to enhance the visual appearance of the file input, including padding, font size, cursor, border, border-radius, and background color.
Implement a JavaScript script with an event listener to detect changes in the selected file. When a file is chosen, it triggers the handleFileSelect function.
In the handleFileSelect function, retrieve the selected video file and call the extractAndPlayAudio function, which uses the FileReader API to read the video file as an array buffer.
Utilize the Web Audio API to decode the audio data from the array buffer within the extractAndPlayAudio function.
Implement the playAudio function to create an AudioContext, BufferSource, set the buffer, connect it to the audio destination, and initiate audio playback using the Web Audio API.

Example: Implementation to show how to get audio from an HTML video file.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
          "width=device-width, initial-scale=1.0"> 
    <title>Audio Extractor</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
  
<body> 
    <input type="file"
           id="videoInput" 
           accept="video/*"> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* styles.css*/
body { 
    font-family: Arial, sans-serif; 
    text-align: center; 
    margin: 50px; 
} 
  
input[type="file"] { 
    padding: 10px; 
    font-size: 16px; 
    cursor: pointer; 
    border: 2px solid rgb(20, 20, 233); 
    border-radius: 5px; 
    background-color: #fff; 
    color: rgb(20, 20, 233); 
}

Javascript

// script.js 
document.getElementById('videoInput') 
    .addEventListener('change', handleFileSelect); 
  
function handleFileSelect(event) { 
    const file = event.target.files[0]; 
    if (file) { 
        extractAndPlayAudio(file); 
    } 
} 
  
function extractAndPlayAudio(videoFile) { 
    const audioContext =  
        new (window.AudioContext || window.webkitAudioContext)(); 
    const reader = new FileReader(); 
  
    reader.onload = function () { 
        const arrayBuffer = reader.result; 
        audioContext.decodeAudioData(arrayBuffer, function (buffer) { 
            playAudio(buffer); 
        }, function (error) { 
            console.error('Error decoding audio: ', error); 
        }); 
    }; 
  
    reader.readAsArrayBuffer(videoFile); 
} 
  
function playAudio(buffer) { 
    const audioContext =  
        new (window.AudioContext || window.webkitAudioContext)(); 
    const source = audioContext.createBufferSource(); 
    source.buffer = buffer; 
    source.connect(audioContext.destination); 
    source.start(); 
}