mp3tag.js

mp3tag.js is an open sourced JavaScript library used to edit the metadata of audio files. It currently can read both ID3v2.3 and ID3v2.4 tags, write tags and remove tags.

Visit https://mp3tag.js.org to learn more about the library and view it in action through an editor.

Features

• Read ID3v2.3 and ID3v2.4 tags
• Write ID3v2.3 and ID3v2.4 tags
• Remove tags
• Write multiple frames with the same kind
• Supports reading unsynchronization flag
• Input validation following the standards

Installation

You can clone this repository by using git

git clone https://github.com/eidoriantan/mp3tag.js

You can also install this package by using npm to your projects by running this command:

npm install --save mp3tag.js

Usage

You should get the ArrayBuffer of the audio file you would like to modify. You can achieve this by using FileReader on your scripts.

For example,

<input type="file" id="input-file" accept="audio/mpeg">
<script>
const inputFile = document.getElementById('input-file')
inputFile.onchange = function () {
  const reader = new FileReader()
  reader.onload = function () {
    const buffer = this.result
    const mp3tag = new MP3Tag(buffer)
    mp3tag.read()
  }

  reader.readAsArrayBuffer(this.files[0])
}
</script>

Reading frames

You can read the frames of the audio files by accessing the property MP3tag.frames before running the read method.

It is an array type and should follow this format for frames depending on its type

Text Information and URL Frames

[
  { id: 'TIT1', value: 'string' } // text
  { id: 'TYER', value: 2020 } // numerical strings
  { id: 'TPE1', value: ['artist'] } // arrays
  { id: 'TPOS', value: { position: 1, total: 10 }} // sets
]

User-defined Text Frames

[{
  id: 'TXXX',
  value: {
    description: 'DESCRIPTION',
    text: 'TEXT'
  }
}]

User-defined URL frames

[{
  id: 'WXXX',
  value: {
    description: 'DESCRIPTION',
    url: 'https://example.com'
  }
}]

Comments and Unsynced Lyrics Frames

[{
  id: 'COMM',
  value: {
    language: 'eng',
    descriptor: 'descriptor',
    text: 'text'
  }
}]

Album Cover Frames

[{
  id: 'APIC',
  value: {
    format: 'image/jpeg',
    type: 3,
    description: 'DESCRIPTION',
    data: [] // Uint8Array of image data
  }
}]

If you wanted a detailed descriptions of the frame, access the property MP3Tag.tagger.frames. Frame objects include its size and flags.

Writing frames

You can edit, modify or add frames by changing the value of the property MP3Tag.frames. It is then validated to make sure that you are following the same format and standards of the frame.

mp3tag.frames = [{
  id: 'TIT1',
  value: 'Title'
}]

mp3tag.frames.push({
  id: 'TPE1',
  value: ['ARTIST1']
})

mp3tag.save() // Returns the new audio bytes
// MP3Tag.buffer also returns the new audio bytes

Saving Audio

After you'd modified the audio file, you might want to download/save it. To achieve this by getting the Blob object of the buffer, then save it.

Here's a script on how to save a Blob object

// octet/stream so the browser downloads the file instead of playing it
// defaults to "audio/mpeg"
const blob = mp3tag.getBlob('octet/stream')
const url = URL.createObjectURL(blob)
const a = document.createElement('a')

a.style.display = 'none'
a.href = url
a.download = 'filename.mp3'
a.click()

URL.revokeObjectURL(url)

Support

If you had found a bug or any unexpected behavior, you can submit an issue through GitHub issues.