How to get Audio from an HTML Video File ? - Coding

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(); 
}

Output: Here, the audio will played as soon as you choose any video file from your computer.

fgt

Reffered: https://www.geeksforgeeks.org

HTML

Related
How does the <audio> Element work in HTML5?
How to implement the Forms in HTML ?
Latest Version of HTML
How to use <ul> Tag in HTML ?
What is the difference between the <br> Tag and the <p> Tag ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	15