Browser ID3 Writer

This is a library for writing ID3v2.3 tag to audio files in browsers. It can not read tag so use another lib to do it.

Note: the library removes existing ID3 tag (v2.2, v2.3 and v2.4).

Browser requirements

• ArrayBuffer
• Uint8Array
• Blob
• URL
• TextEncoder

Demo

Demonstration is available here: egoroof.github.io/browser-id3-writer

Installation

You can include library via npmcdn:

<script src="//npmcdn.com/[email protected]/dist/browser-id3-writer.min.js"></script>

Or you can install via npm and get it from dist folder:

npm install browser-id3-writer

Or you can include it using browser module loaders like webpack or browserify:

var ID3Writer = require('browser-id3-writer');

Usage

You should first get arrayBuffer of the song you would like to add ID3 tag.

For example you can create file input and use FileReader:

<input type="file" id="file" accept="audio/mpeg">
<script>
    document.getElementById('file').addEventListener('change', function () {
        if (!this.files.length) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function () {
            var arrayBuffer = reader.result;
            // go next
        };
        reader.onerror = function () {
            // handle error
            console.error('Reader error', reader.error);
        };
        reader.readAsArrayBuffer(this.files[0]);
    });
</script>

To get arrayBuffer from remote server you can use XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', urlToSongFile, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
    if (xhr.status === 200) {
        var arrayBuffer = xhr.response;
        // go next
    } else {
        // handle error
        console.error(xhr.statusText + ' (' + xhr.status + ')');
    }
};
xhr.onerror = function() {
    // handle error
    console.error('Network error');
}
xhr.send();

Then init ID3Writer object, set frames and add a tag:

var writer = new ID3Writer(arrayBuffer);
writer.setFrame('TIT2', 'Home')
    .setFrame('TPE1', ['Eminem', '50 Cent'])
    .setFrame('TPE2', 'Eminem')
    .setFrame('TALB', 'Friday Night Lights')
    .setFrame('TYER', 2004)
    .setFrame('TRCK', '6/8')
    .setFrame('TPOS', '1/2')
    .setFrame('TCON', ['Soundtrack'])
    .setFrame('USLT', 'This is unsychronised lyrics')
    .setFrame('APIC', coverArrayBuffer);
writer.addTag();

// now you can save it to file as you wish
var arrayBuffer = writer.arrayBuffer;
var blob = writer.getBlob();
var url = writer.getURL();

For example you can save file using FileSaver.js:

saveAs(blob, 'song with tags.mp3');

If you are writing chromium extension you can save file using Downloads API:

chrome.downloads.download({
    url: url,
    filename: 'song with tags.mp3'
});

Memory control

When you generate URLs via writer.getURL() you should know that whole file is kept in memory until you close the page or move to another one. So if you generate lots of URLs in a single page you should manually free memory after you finish downloading file:

URL.revokeObjectURL(url); // if you know url or
writer.revokeURL(); // if you have access to writer

Supported frames

Currently you can set next frames:

array of strings:

• TPE1 (song artists)
• TCOM (song composers)
• TCON (song genre)

string

• TIT2 (song title)
• TALB (album title)
• TPE2 (album artist)
• TRCK (song number in album): 5 or '5/10'
• TPOS (album disc number): 1 or '1/3'
• USLT (unsychronised lyrics)

integer

• TLEN (song duration in milliseconds)
• TYER (album release year)

arrayBuffer

• APIC (song cover): works with jpeg, png, gif, webp, tiff, bmp and ico