How to Load an Audio Buffer & Play it using the Audio Tag ?
Playing audio files on a web page is something people often need when making websites. One way to do this is by loading the audio into a buffer and playing it using the HTML <audio> tag. This method makes it easy to handle and play audio files right in the web browser.
Approach
- Firstly we select a file input element (fileInput) from the DOM and attach a change event listener to it.
- When a file is selected (change event), we retrieve the selected file from the event object.
- We create a new instance of FileReader (reader) to read the contents of the selected file.
- Upon successful reading (reader.onload), the file contents are available in event.target.result as an ArrayBuffer.
- Finally, we can then decode the ArrayBuffer into an audio buffer for playback or further processing.
Example: Implementation of Loading an Audio buffer and playing it using the audio tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Audio Player - Loading Audio Buffer</title>
<style>
body {
margin: auto;
margin-top: 10%;
margin-left: 40vw;
}
h1,
h3 {
text-align: justify;
color: green;
margin: 20px;
}
.audioele {
margin-left: 10vw;
}
</style>
</head>
<body>
<h3>Load an Audio Buffer and
Play it using the Audio Tag?
</h3>
<div class="audioele">
<input type="file" id="fileInput"
accept="audio/*">
</div>
<script>
let fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function (event) {
let file = event.target.files[0];
let reader = new FileReader();
reader.onload = function (event) {
let audioContext = new (window.AudioContext ||
window.webkitAudioContext)();
audioContext.decodeAudioData(event
.target.result, function (buffer) {
let audioPlayer = document.createElement('audio');
audioPlayer.controls = true;
audioPlayer.src = URL.createObjectURL(file);
document.body.appendChild(audioPlayer);
});
};
reader.readAsArrayBuffer(file);
});
</script>
</body>
</html>
Output:
Contact Us