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
Accessing metadata from an audio files using JavaScript
Audio files contain embedded metadata such as title, artist, album, genre, and year. This metadata is valuable for media players, music libraries, and cataloging applications. JavaScript provides several approaches to access this information, ranging from basic HTML5 audio properties to dedicated libraries for extracting ID3 tags.
Approaches to Access Audio Metadata
Using the HTML5 Audio Element
The HTML5 audio element provides basic metadata access like duration and playback information. However, it cannot directly access ID3 tags (title, artist, album).
The audio element only provides technical metadata like duration. For ID3 tags, a dedicated library is required.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Metadata with HTML5</title>
</head>
<body>
<h1>Audio Metadata</h1>
<audio id="audioElement" controls>
<source src="https://www.soundjay.com/misc/sounds/magic-chime-02.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div id="metadata">
<p id="duration">Duration: Loading...</p>
<p id="currentTime">Current Time: 0</p>
</div>
<script>
const audioElement = document.getElementById("audioElement");
audioElement.addEventListener("loadedmetadata", () => {
const duration = audioElement.duration;
document.getElementById("duration").textContent = `Duration: ${duration.toFixed(2)} seconds`;
});
audioElement.addEventListener("timeupdate", () => {
const currentTime = audioElement.currentTime;
document.getElementById("currentTime").textContent = `Current Time: ${currentTime.toFixed(2)} seconds`;
});
</script>
</body>
</html>
Output
This displays an audio player with duration information that updates as the audio loads and plays.
Using Web Audio API
The Web Audio API provides more detailed audio buffer information and precise duration data. While it doesn't access ID3 tags directly, it offers more control over audio processing.
Web Audio API is primarily for audio manipulation and processing, not metadata extraction.
Example
<!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 Metadata</title>
</head>
<body>
<h1>Audio Buffer Information</h1>
<input type="file" id="audioFile" accept="audio/*">
<div id="audioInfo">
<p id="duration">Duration: Not loaded</p>
<p id="sampleRate">Sample Rate: Not loaded</p>
<p id="channels">Channels: Not loaded</p>
</div>
<script>
const fileInput = document.getElementById("audioFile");
fileInput.addEventListener("change", async (event) => {
const file = event.target.files[0];
if (file) {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const arrayBuffer = await file.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
document.getElementById("duration").textContent = `Duration: ${audioBuffer.duration.toFixed(2)} seconds`;
document.getElementById("sampleRate").textContent = `Sample Rate: ${audioBuffer.sampleRate} Hz`;
document.getElementById("channels").textContent = `Channels: ${audioBuffer.numberOfChannels}`;
} catch (error) {
console.error("Error decoding audio:", error);
document.getElementById("duration").textContent = "Error loading audio.";
}
}
});
</script>
</body>
</html>
Output
When a file is selected, this displays technical audio properties like duration, sample rate, and channel count.
Using ID3 Libraries (jsmediatags)
For comprehensive metadata extraction including title, artist, album, and genre, use dedicated libraries like jsmediatags. This library can parse various metadata formats including ID3v1, ID3v2, and others.
jsmediatags provides direct access to all embedded metadata tags in audio files.
Installation
Include jsmediatags via CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Metadata Extraction</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
</head>
<body>
<h1>Audio Metadata Extraction</h1>
<input type="file" id="audioFile" accept="audio/*">
<div id="metadata">
<p id="title">Title: Not available</p>
<p id="artist">Artist: Not available</p>
<p id="album">Album: Not available</p>
<p id="year">Year: Not available</p>
<p id="genre">Genre: Not available</p>
</div>
<script>
const fileInput = document.getElementById("audioFile");
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0];
if (file) {
jsmediatags.read(file, {
onSuccess: function(tag) {
const tags = tag.tags;
document.getElementById("title").textContent = `Title: ${tags.title || 'Unknown'}`;
document.getElementById("artist").textContent = `Artist: ${tags.artist || 'Unknown'}`;
document.getElementById("album").textContent = `Album: ${tags.album || 'Unknown'}`;
document.getElementById("year").textContent = `Year: ${tags.year || 'Unknown'}`;
document.getElementById("genre").textContent = `Genre: ${tags.genre || 'Unknown'}`;
},
onError: function(error) {
console.error("Error reading metadata:", error);
document.getElementById("title").textContent = "Error reading metadata";
}
});
}
});
</script>
</body>
</html>
Output
This extracts and displays comprehensive metadata including title, artist, album, year, and genre from uploaded audio files.
Comparison of Methods
| Method | Metadata Available | Library Required | Best For |
|---|---|---|---|
| HTML5 Audio | Duration, playback info | No | Basic audio properties |
| Web Audio API | Buffer info, sample rate | No | Audio processing data |
| jsmediatags | Full ID3 tags | Yes | Complete metadata extraction |
Conclusion
For basic audio properties, use HTML5 audio or Web Audio API. For comprehensive metadata including title, artist, and album information, libraries like jsmediatags are essential for accessing ID3 tags embedded in audio files.
3K+ Views
