Pick up music track information with JS

Question

I’m making a music player using only HTML, CSS and Javascript. I can do everything except grab track information. I can get the length of the track and also the current time, the information I need are things like author, year of release, album art, album name... Does anyone know how to do that and, if you know, how? :)

Answer 1

You can get this data through tags ID3 mp3 files, but to read this information you will need to use Apis Filereader and Dataview.

Here is an example:

document.querySelector('input[type="file"]').onchange = function(e) {
  var reader = new FileReader();

  reader.onload = function(e) {
    var dv = new jDataView(this.result);

    // "TAG" starts at byte -128 from EOF.
    // See http://en.wikipedia.org/wiki/ID3
    if (dv.getString(3, dv.byteLength - 128) == 'TAG') {
      var title = dv.getString(30, dv.tell());
      var artist = dv.getString(30, dv.tell());
      var album = dv.getString(30, dv.tell());
      var year = dv.getString(4, dv.tell());
    } else {
      // no ID3v1 data found.
    }
  };

  reader.readAsArrayBuffer(this.files[0]);
};

Code excerpt taken from Reading . mp3 ID3 tags in Javascript

Note that the above example makes use of library jDataView to facilitate handling with the API DataView

If you are using nodejs can use one of many Node packages to assist you in the process. Example with the package id3-parser:

import { parse } from 'id3-parser';
import { convertFileToBuffer, fetchFileAsBuffer } from 'id3-parser/lib/universal/helpers';
import universalParse from 'id3-parser/lib/universal';

// You have a File instance in browser
convertFileToBuffer(file).then(parse).then(tag => {
    console.log(tag);
});
// Or a remote mp3 file url
fetchFileAsBuffer(url).then(parse).then(tag => {
    console.log(tag);
});

// Or a smarter parse
universalParse(file|url|bytes).then(tag => {
    console.log(tag);
});