Media Tags Reader (ID3, MP4, FLAC)
The next version of https://github.com/aadsm/JavaScript-ID3-Reader.
A few people have asked me about donations (or even crowdfunding). I would prefer you to consider making a donation to the "Girls Who Code" NPO. If you do please send me a message so I can add you as a contributor.
Run npm install jsmediatags --save to install.
// Simple API - will fetch all tags
var jsmediatags = require("jsmediatags");
jsmediatags.read("./music-file.mp3", {
onSuccess: function(tag) {
console.log(tag);
},
onError: function(error) {
console.log(':(', error.type, error.info);
}
});// Advanced API
var jsmediatags = require("jsmediatags");
new jsmediatags.Reader("http://www.example.com/music-file.mp3")
.setTagsToRead(["title", "artist"])
.read({
onSuccess: function(tag) {
console.log(tag);
},
onError: function(error) {
console.log(':(', error.type, error.info);
}
});Copy the dist/jsmediatags.min.js file into your web application directory and include it with a script tag.
This library is also available on cdnjs at https://cdnjs.com/libraries/jsmediatags.
UMD will give you multiple usage options to use it:
// As a global Object
var jsmediatags = window.jsmediatags;// As a CommonJS Module
var jsmediatags = require("jsmediatags");It supports loading files from remote hosts, Blob and File objects:
// From remote host
jsmediatags.read("http://www.example.com/music-file.mp3", {
onSuccess: function(tag) {
console.log(tag);
},
onError: function(error) {
console.log(error);
}
});Note that the URI has to include the scheme (e.g.: https://), as relative URIs are not supported.
// From Blob
jsmediatags.read(blob, ...);// From File
inputTypeFile.addEventListener("change", function(event) {
var file = event.target.files[0];
jsmediatags.read(file, ...);
}, false);You can find more about UMD usage options here.
React Native support requires some additional dependencies:
npm install --save jsmediatags buffer react-native-fsWith these dependencies installed, usage with React Native should remain the same:
…This is an example of the object passed to the jsmediatags.read's onSuccess callback.
…{
type: "MP4",
ftyp: "M4A",
version: 0,
tags: {
"©too": {
id: "©too",
size: 35,
description: 'Encoding Tool',
data: 'Lavf53.24.2'
}
}
}{
type: "FLAC",
version: "1",
tags: {
title: "16/12/95",
artist: "Sam, The Kid",
album: "Pratica(mente)",
track: "12",
picture: ...
}
}The tags property includes all tags that were found or specified to be read.
Since each tag type (e.g.: ID3, MP4) uses different tag names for the same type of data (e.g.: the artist name) the most common tags are also available under human readable names (aka shortcuts). In this example, artist will point to TPE1.data, album to TALB.data and so forth.
The expected tag object depends on the type of tag read (ID3, MP4, etc.) but they all share a common structure:
{
type:
tags: {
:
: {
id: ,
data:
}
}
}These are the supported shortcuts.
titleartistalbumyearcommenttrackgenrepicturelyricsThe picture tag contains an array buffer of all the bytes of the album artwork image as well as the content type of the image. The data can be converted and displayed as an image using:
…javascript require('babel-core/register');
var NodeFileReader = require('./src/NodeFileReader'); var ID3v2TagReader = require('./src/ID3v2TagReader'); ...
### NodeJS (With Compiled Code (faster))
Run `npm run build` to generate proper JavaScript code into the `build2` directory.
```javascript
var NodeFileReader = require('./build2/NodeFileReader');
var ID3v2TagReader = require('./build2/ID3v2TagReader');
...
…
javascript
ID3.loadTags("filename.mp3", function() {
var tags = ID3.getAllTags("filename.mp3");
alert(tags.artist + " - " + tags.title + ", " + tags.album);
});jsmediatags:
jsmediatags.read("filename.mp3", {
onSuccess: function(tag) {
var tags = tag.tags;
alert(tags.artist + " - " + tags.title + ", " + tags.album);
}
});JavaScript-ID3-Reader:
ID3.loadTags("filename.mp3", function() {
var tags = ID3.getAllTags("filename.mp3");
alert(tags.COMM.data + " - " + tags.TCON.data + ", " + tags.WXXX.data);
},
{tags: ["COMM", "TCON", "WXXX"]});jsmediatags:
new jsmediatags.Reader("filename.mp3")
.setTagsToRead(["COMM", "TCON", "WXXX"])
.read({
onSuccess: function(tag) {
var tags = tag.tags;
alert(tags.COMM.data + " - " + tags.TCON.data + ", " + tags.WXXX.data);
}
});JavaScript-ID3-Reader:
ID3.loadTags("http://localhost/filename.mp3", function() {
var tags = ID3.getAllTags("http://localhost/filename.mp3");
alert(tags.comment + " - " + tags.track + ", " + tags.lyrics);
},
{
tags: ["comment", "track", "lyrics"],
onError: function(reason) {
if (reason.error === "xhr") {
console.log("There was a network error: ", reason.xhr);
}
}
});jsmediatags:
new jsmediatags.Reader("filename.mp3")
.setTagsToRead(["comment", "track", "lyrics"])
.read({
onSuccess: function(tag) {
var tags = tag.tags;
alert(tags.comment + " - " + tags.track + ", " + tags.lyrics);
},
onError: function(error) {
if (error.type === "xhr") {
console.log("There was a network error: ", error.xhr);
}
}
});No open issues yet, or sync has not completed.