How to Extract Metadata from Music Files with JavaScript using jsmediatags

Have you ever wondered how to extract the media tags (aka album cover, song title, album name, genre, etc.) from a music file? It’s not as easy as inputting the file and grabbing the value like you would with an input of type text field. Well, let me take that back, it is as easy as using an input field but it’s not so easy to extract the media tags without quickly making things very complicated. Fortunately there exists a library called jsmediatags that makes accessing this data rather easy. In this tutorial, I’m going to teach you how to use.

BEWARE: Most illegally downloaded music doesn’t contain media tags, so if this code doesn’t return anything it’s not because it doesn’t work. If you want your music files to have meta data you can either purchase the music from accredited sources like Apple Music, Amazon Music, etc., or you can manually add media tags to your files through the use of free software like mp3tag .

Alright, let’s get right into the tutorial.

HTML:

In order for us to use jsmediatags in our project, we have to include the following script in between the ‘head’ tags. This is simply a link to the CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>

Now create an input field of type file to allow the user to input the song. Also create a ‘div’ to display the album cover and one ‘p’ element for the song title, artist name, album name, and genre.

<input type="file" id="input" accept=".mp3, .wav"><div id="cover"></div>
<p id="title"></p>
<p id="artist"></p>
<p id="album"></p>
<p id="genre"></p>

CSS:

Select the element with an id of cover and add the CSS properties bellow. I used a width and height of 375px x 375px but go ahead and change these values to your taste. No matter what values you choose, I recommend keeping the shape of a square because most album covers are in that shape.

#cover{
width: 375px;
height: 375px;
background-position: center;
background-size: cover;
}

JavaScript:

Let’s bring in the jsmediatags libray first so we can actually use it.

const jsmediatags = window.jsmediatags;

So far, so good, now we’re going to add a change event that grabs the music file from the user and stores it in a variable named file. (Note: we’re going to build on this event)

document.querySelector("#input").addEventListener("change", (event) => {
const file = event.target.files[0];
});

Now that we have the file, let’s use jsmediatags to access the file metadata. At this point, we can either successfully retrieve the data or not. If the process is not successful, let’s output a console log message with the error containing the reason why. If it’s indeed successful, we can simply output the data by using `tag.tags`. This is what a console log of ‘tag.tags’ outputs for my particular file:

As you can see, we have an object with all sorts of useful data, such as album, artist, genre, picture, etc. To access the song title, for example, use ‘tag.tags.title’. Now that we know how to access the data, let’s use the DOM to attach this data to the elements we created in the HTML file. Before we do, however, I want to point out that the album cover is currently an array buffer so before we can display it, we must first convert it to base64. Here is the code:

document.querySelector("#input").addEventListener("change", (event) => {
const file = event.target.files[0];
jsmediatags.read(file, {
// Success
onSuccess: function(tag) {
// Array buffer to base64
const data = tag.tags.picture.data;
const format = tag.tags.picture.format;
let base64String = "";
for (let i = 0; i < data.length; i++) {
base64String += String.fromCharCode(data[i]);
}
},
// Error
onError: function(error) {
console.log(error);
}
});

});

At this point all we have left to do is output the data. Here is the complete event:

document.querySelector("#input").addEventListener("change", (event) => {

const file = event.target.files[0];
jsmediatags.read(file, {
onSuccess: function(tag) {
// Array buffer to base64
const data = tag.tags.picture.data;
const format = tag.tags.picture.format;
let base64String = "";
for (let i = 0; i < data.length; i++) {
base64String += String.fromCharCode(data[i]);
}
// Output media tags
document.querySelector("#cover").style.backgroundImage = `url(data:${format};base64,${window.btoa(base64String)})`;

document.querySelector("#title").textContent = tag.tags.title;
document.querySelector("#artist").textContent = tag.tags.artist;
document.querySelector("#album").textContent = tag.tags.album;
document.querySelector("#genre").textContent = tag.tags.genre;
},
onError: function(error) {
console.log(error);
}
});
});

Now you know how to access the metadata of a music file with JavaScript.

Explanation not good enough? Check out my tutorial video below.

--

--

--

Passionate software developer with an eye for design and detail. Contact me: https://miguelznunez.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript

Getting Started with React Three Renderer

Why Webpack? (or, How Not to Serve Javascript)

HTTPS and Create React App

Visualizing use cases using mermaid.js

WordPress + Create React App Integration

create-react-app & Tailwind CSS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Miguel Nunez

Miguel Nunez

Passionate software developer with an eye for design and detail. Contact me: https://miguelznunez.com/

More from Medium

JavaScript Overview Part 2 — Values and data types

Revelations: How JavaScript Works Behind The Scenes — part 03

How to Create a Linked List in JavaScript

How to implement your own Promise.