[FEATURE] Avoid having to read the entire file into memory

[jimmywarting]

Is your feature request related to a problem? Please describe.
Your lib require reading the entire file into memory and using it as such:

    // MP3Tag Usage
    const mp3tag = new MP3Tag(buffer)
    mp3tag.read()

// want to have this
const mp3tag = await MP3Tag.fromBlob(blob)

Describe the solution you'd like
I wish there where a built read method that can accept a File/Blob where your library slice the file to read only the segments that are necessary.

I have some that are 1.5h long and is 216 mb
i just want to read, write, update, remove metadata.

I wish images where described as such:

{
  format: 'image/jpeg',
  type: 3,
  description: 'Content description',
  data: new File([ this.mp3.slice(star, end) ], 'front-conver.jpg', { type: 'image/jpeg' })
}

and i wish i could change the front/back cover using a Blob or a File myself.

and just like the getAudio() function i also wish it could just return a slice of the mp3 file without reading it into memory:

function getAudio() {
  return this.mp3.slice(start, end, type)
}

assemble

But how do you build / save the file afterwards then?
glad you asked: Just create a new file with all the parts

const result = new File([ id3header, blobCover, audioBlob, footer ], this.mp3.name, { type: this.mp3.type })

[eidoriantan]

Yeah, support for Blob and using streams for reading and writing seems a good idea especially for huge files without breaking the current implementations of the library. We want to keep the support for both browsers and Node environments. Will definitely look into this as I'm having the same issue with large files on some of the projects I've been working on.

Thank you for submitting an issue!

[jimmywarting]

We want to keep the support for both browsers and Node environments.

Supporting NodeJS would be as easy as just doing:

import { openAsBlob } from 'node:fs';

const path = 'insert path here'
const blob = await openAsBlob(path);

I looked at so many different id3 parser on npm - did not find anyone that i was really happy with, so i started coding my own 🤪

It's a really low level parser - with a design goal of being editable.

the idea was that if you have a playCount and want to update it, you would not have to rewrite the entire file again and again.
you would only have to change some few bytes at the correct location. that's why i included a offset in each and every frame i created.
no frame is also never parsed - the idea was that you should read what you need when you need it. not parse everything at once. thus making it really really fast and very memory efficient.

import { openAsBlob } from 'node:fs';

const path = 'insert path here'
const blob = await openAsBlob(path);

// Define a symbol to describe frames, to avoid name collisions.
const ID3_FRAME_DESCRIPTION = Symbol('description');

// This object can either be a static property in the class or a global constant.
// For simplicity, and since it is static data, it can be outside the class.
const frameDescriptions = {
  // Text frames (T***)
  'AENC': 'Audio encryption',
  'APIC': 'Attached picture',
  'COMM': 'Comments',
  'COMR': 'Commercial frame',
  'ENCR': 'Encryption method registration',
  'EQUA': 'Equalisation',
  'ETCO': 'Event timing codes',
  'GEOB': 'General encapsulated object',
  'GRID': 'Group identification registration',
  'IPLS': 'Involved people list',
  'LINK': 'Linked information',
  'MCDI': 'Music CD identifier',
  'MLLT': 'MPEG location lookup table',
  'OWNE': 'Ownership frame',
  'PRIV': 'Private frame',
  'PCNT': 'Play counter',
  'POPM': 'Popularimeter',
  'POSS': 'Position synchronisation frame',
  'RBUF': 'Recommended buffer size',
  'RVAD': 'Relative volume adjustment',
  'RVRB': 'Reverb',
  'SYLT': 'Synchronized lyric/text',
  'SYTC': 'Synchronized tempo codes',
  'TALB': 'Album/Movie/Show title',
  'TBPM': 'Beats per minute',
  'TCOM': 'Composer',
  'TCON': 'Content type (Genre)',
  'TCOP': 'Copyright message',
  'TDAT': 'Date',
  'TDLY': 'Playlist delay',
  'TENC': 'Encoded by',
  'TEXT': 'Lyricist/Text writer',
  'TFLT': 'File type',
  'TIPL': 'Involved people list',
  'TIT1': 'Content group description',
  'TIT2': 'Title/songname/content description',
  'TIT3': 'Subtitle/Description refinement',
  'TKEY': 'Initial key',
  'TLAN': 'Language(s)',
  'TLEN': 'Length',
  'TMED': 'Media type',
  'TOAL': 'Original album/movie/show title',
  'TOFN': 'Original filename',
  'TOLY': 'Original lyricist(s)/text writer(s)',
  'TOPE': 'Original artist(s)/performer(s)',
  'TOWN': 'File owner/licensee',
  'TPE1': 'Lead performer(s)/Soloist(s)',
  'TPE2': 'Band/orchestra/accompaniment',
  'TPE3': 'Conductor/performer refinement',
  'TPE4': 'Interpreted, remixed, or otherwise modified by',
  'TPOS': 'Part of a set',
  'TPRO': 'Produced notice',
  'TPUB': 'Publisher',
  'TRCK': 'Track number/Position in set',
  'TRDA': 'Recording dates',
  'TRSN': 'Internet radio station name',
  'TRSO': 'Internet radio station owner',
  'TSIZ': 'Size',
  'TSRC': 'ISRC (international standard recording code)',
  'TSSE': 'Software/Hardware and settings used for encoding',
  'TYER': 'Year',
  'TXXX': 'User defined text information frame',

  // URL frames (W***)
  'WCOM': 'Commercial information',
  'WCOP': 'Copyright/Legal information',
  'WOAF': 'Official audio file webpage',
  'WOAR': 'Official artist/performer webpage',
  'WOAS': 'Official audio source webpage',
  'WORS': 'Official internet radio station homepage',
  'WPAY': 'Payment',
  'WPUB': 'Publishers official webpage',
  'WXXX': 'User defined URL link frame',

  // Other frames
  'PRIV': 'Private frame',
  'PCNT': 'Play counter',
  'POPM': 'Popularimeter',
  'COMM': 'Comments',
  'MCDI': 'Music CD identifier',
  'ETCO': 'Event timing codes',
  'SYLT': 'Synchronized lyric/text',
  'USLT': 'Unsynchronized lyric/text transcription',
  'GEOB': 'General encapsulated object',
  'SIGN': 'Signature frame',
  'SEEK': 'Seek frame',
  'RVRB': 'Reverb',
  'EQU2': 'Equalization (2)',
  'RBUF': 'Recommended buffer size',
  'AENC': 'Audio encryption',
  'ASPI': 'Audio seek point index',

  // Frames specific to ID3v2.4
  'MCDI': 'Music CD identifier',
  'TIPL': 'Involved people list',
  'TMCL': 'Musician credits list',
  'IPLS': 'Involved people list',

  // Obsolete or rarely used
  'TDEN': 'Encoding time',
  'TDOR': 'Original release time',
  'TDRC': 'Recording time',
  'TDRL': 'Release time',
  'TDTG': 'Tagging time',

  // Miscellaneous
  'USER': 'Terms of use',
  'COMR': 'Commercial frame',
  'ENCR': 'Encryption method registration',
  'GRID': 'Group identification registration',
  'SEEK': 'Seek frame',
  'SIGN': 'Signature frame',
  'PRIV': 'Private frame',
  'PCNT': 'Play counter',
  'POPM': 'Popularimeter',
  'RBUF': 'Recommended buffer size',
  'RVAD': 'Relative volume adjustment',
  'RVRB': 'Reverb',
  'SYTC': 'Synchronized tempo codes',
  'TDRC': 'Recording time',
  'TDRL': 'Release time',
  'TDTG': 'Tagging time',
  'TIPL': 'Involved people list',
  'TMCL': 'Musician credits list',
  'TSOA': 'Album sort order',
  'TSOP': 'Performer sort order',
  'TSOT': 'Title sort order',
  'TSRC': 'ISRC',
  'TSSE': 'Software/Hardware and settings used for encoding',
  'TSST': 'Set subtitle',
};

/**
 * A class for parsing and handling ID3 tags (v1 and v2) in audio files (Blobs/Files).
 */
class ID3Parser {
  // Private properties to store parsed data
  v1 = null;
  v2 = null;
  frames = [];
  audioData = null;
  padding = null;
  #mp3 = null;

  /**
   * Constructs an ID3Parser instance.
   * @param {Blob | File} fileBlob - The audio file or blob to parse.
   * @param {string} [fileName='audio.mp3'] - The name of the file, used for reconstruction.
   * @throws {Error} If input is not a Blob or File.
   */
  constructor(fileBlob) {
    if (!(fileBlob instanceof Blob)) {
      throw new Error("Input must be a Blob or File.");
    }
    this.#mp3 = fileBlob;
  }

  /**
   * Helper function to parse an ID3v1 tag from a Uint8Array.
   * @param {Uint8Array} view - Uint8Array containing the ID3v1 tag.
   * @returns {object | null} The parsed ID3v1 tag data, or null if not found.
   */
  static #parseID3v1(view) {
    // Check "TAG" identifier at the beginning of the view
    if (view[0] !== 0x54 || view[1] !== 0x41 || view[2] !== 0x47) {
      return null;
    }
    const decoder = new TextDecoder("iso-8859-1");

    return {
      title: decoder.decode(view.slice(3, 33)).replace(/\0/g, '').trim(), // Remove null bytes and trim
      artist: decoder.decode(view.slice(33, 63)).replace(/\0/g, '').trim(),
      album: decoder.decode(view.slice(63, 93)).replace(/\0/g, '').trim(),
      year: decoder.decode(view.slice(93, 97)).replace(/\0/g, '').trim(),
      comment: decoder.decode(view.slice(97, 127)).replace(/\0/g, '').trim(),
      genreByte: view[127]
    };
  }

  /**
   * Helper function to decode text bytes based on encoding byte.
   * @param {Uint8Array} bytes - Bytes to decode.
   * @param {number} encodingByte - The encoding type (0=ISO-8859-1, 1=UTF-16 with BOM, 2=UTF-16BE, 3=UTF-8).
   * @returns {string} The decoded text.
   */
  static #decodeText(bytes, encodingByte) {
    switch (encodingByte) {
      case 0: // ISO-8859-1 (Latin-1)
        return new TextDecoder('latin1').decode(bytes).replace(/\0/g, '').trim();
      case 1: // UTF-16 with BOM
        return new TextDecoder('utf-16').decode(bytes).replace(/\0/g, '').trim();
      case 2: // UTF-16BE without BOM
        return new TextDecoder('utf-16be').decode(bytes).replace(/\0/g, '').trim();
      case 3: // UTF-8
        return new TextDecoder('utf-8').decode(bytes).replace(/\0/g, '').trim();
      default:
        console.warn(`Unknown text encoding byte: ${encodingByte}. Reverting to default TextDecoder.`);
        return new TextDecoder().decode(bytes).replace(/\0/g, '').trim();
    }
  }

  static #synchsafeInteger(bytes) {
    return (bytes[0] << 21) | (bytes[1] << 14) | (bytes[2] << 7) | bytes[3];
  }

  describeFrame(id) {
    return frameDescriptions[id] ?? 'Unknown frame';
  }

  /**
   * Helper function to parse an ID3v2 header from a Uint8Array.
   * @param {Uint8Array} view - Uint8Array containing the ID3v2 header.
   * @returns {object | null} The parsed ID3v2 header data, or null if it is not an ID3v2 header.
   */
  static #parseID3v2Header(view) {
    // Check "ID3" identifier
    if (view[0] !== 0x49 || view[1] !== 0x44 || view[2] !== 0x33) {
      return null;
    }
    const version = view[3];
    const revision = view[4];
    const flags = view[5];
    // ID3v2 tag size is encoded in 4 bytes, where the most significant bit in each byte is 0 (synchsafe integer).
    const size =
      ((view[6] & 0x7f) << 21) |
      ((view[7] & 0x7f) << 14) |
      ((view[8] & 0x7f) << 7) |
      (view[9] & 0x7f);

    const result = {
      versionMajor: version,
      versionMinor: revision,
      flags,
      tagSize: size, // The initially parsed tag size
      totalSize: 10 + size, // Header size (10 bytes) + Tag data size
      blob: null // This will be set dynamically after frames have been parsed
    };

    return result;
  }

  /**
   * Reads and decodes the content of a text frame.
   * @param {object} frame - The blob containing the raw frame data (including encoding byte).
   * @returns {Promise<string>} A promise that resolves with the decoded text.
   */
  static async readTextFrame(frame) {
    if (!frame || !frame.data) {
      throw new Error("Invalid frame object provided.");
    }
    const frameBytes = await frame.bytes();
    const encodingByte = frameBytes[0];
    const textBytes = frameBytes.slice(1);
    return ID3Parser.#decodeText(textBytes, encodingByte);
  }

  /**
   * Initializes the parsing process. This method should be called after instantiation.
   * @returns {Promise<void>} A promise that resolves when parsing is complete.
   */
  async init() {
    const blob = this.#mp3
    const { size } = blob

    // Read the first 10 bytes for the ID3v2 header and the last 128 bytes for the ID3v1 tag.
    const combinedBlob = new Blob([
      blob.slice(0, 10),
      blob.slice(size - 128)
    ]);

    const bytes = await combinedBlob.bytes();
    const headerBytes = bytes.slice(0, 10);
    const footerBytes = bytes.slice(10); // This is the potential ID3v1 tag

    this.v2 = ID3Parser.#parseID3v2Header(headerBytes);
    this.v1 = ID3Parser.#parseID3v1(footerBytes);

    // If ID3v1 tag is found, store its blob for potential rewriting
    if (this.v1) {
      this.v1.blob = blob.slice(size - 128, size);
    }

    let offset = 10; // Start reading frames after the ID3v2 header

    if (this.v2) {
      const frames = this.frames; // Capture this.frames for closure

      // Loop through the blob to find and parse ID3v2 frames
      while (offset < this.v2.totalSize) {
        // Read the next 10 bytes for the frame header
        const frameHeaderBytes = await blob.slice(offset, offset + 10).bytes();
        const frameId = new TextDecoder("iso-8859-1").decode(frameHeaderBytes.slice(0, 4));

        // Stop if frameId is padding (all zeros) or invalid
        if (/^\0{4}$/.test(frameId)) {
          this.padding = {
            [ID3_FRAME_DESCRIPTION]: 'Padding',
            offset: offset,
            data: blob.slice(offset, this.v2.totalSize)
          };
          break; // End of frames, the rest is padding
        }

        // Frame size is 4 bytes, non-synchsafe integer
        const frameSize =
          (frameHeaderBytes[4] << 24) |
          (frameHeaderBytes[5] << 16) |
          (frameHeaderBytes[6] << 8) |
          frameHeaderBytes[7];

        // If frameSize is 0 or extends beyond the ID3v2 tag, stop reading
        if (frameSize <= 0 || offset + 10 + frameSize > this.v2.totalSize) {
          // If there is still data between the current offset and totalSize, it's padding
          if (offset < this.v2.totalSize) {
            this.padding = {
              [ID3_FRAME_DESCRIPTION]: 'Padding',
              offset: offset,
              data: blob.slice(offset, this.v2.totalSize)
            };
          }
          break;
        }

        frames.push({
          [ID3_FRAME_DESCRIPTION]: frameDescriptions[frameId] || 'Unknown frame',
          frameId: frameId,
          // Flags are 2 bytes
          flags: (frameHeaderBytes[8] << 8) | frameHeaderBytes[9],
          offset: offset + 10, // Data starts after the 10-byte header
          data: blob.slice(offset + 10, offset + 10 + frameSize)
        });

        offset += 10 + frameSize; // Move offset to the beginning of the next frame
      }


      Object.defineProperties(this.v2, {
        // Add dynamic getters for tagSize and totalSize to the ID3v2 object
        // This ensures that sizes are updated if frames change.
        tagSize: {
          get() {
            let calculatedSize = 0;
            for (const frame of frames) {
              calculatedSize += frame.data.size + 10; // 10 bytes for the frame header
            }
            return calculatedSize;
          },
          enumerable: true
        },
        totalSize: {
          get() {
            return this.tagSize + 10; // Header size + tag size
          },
          enumerable: true
        },
        // Dynamically add a getter to the #v2 object to reconstruct its blob
        blob: {
          get() {
            const calculatedTagSize = this.v2.tagSize; // Use the dynamic tag size
  
            // Use the original header bytes to modify the size
            // Update the tag size in the header (synchsafe integer)
            headerBytes[6] = (calculatedTagSize >> 21) & 0x7f;
            headerBytes[7] = (calculatedTagSize >> 14) & 0x7f;
            headerBytes[8] = (calculatedTagSize >> 7) & 0x7f;
            headerBytes[9] = calculatedTagSize & 0x7f;
  
            const frameBlobs = frames.map(frame => {
              const frameHeader = new Uint8Array(10);
  
              // Set Frame ID
              for (let i = 0; i < 4; i++) {
                frameHeader[i] = frame.frameId.charCodeAt(i);
              }
  
              // Set frame size (4 bytes, big-endian, NOT synchsafe for ID3v2.3/2.4)
              const size = frame.data.size;
              frameHeader[4] = (size >> 24) & 0xFF;
              frameHeader[5] = (size >> 16) & 0xFF;
              frameHeader[6] = (size >> 8) & 0xFF;
              frameHeader[7] = size & 0xFF;
  
              // Set flags
              frameHeader[8] = (frame.flags >> 8) & 0xFF;
              frameHeader[9] = frame.flags & 0xFF;
  
              return new Blob([frameHeader, frame.data]);
            });
  
            // The ID3v2 tag blob consists of the updated header and all frame blobs
            return new Blob([headerBytes, ...frameBlobs]);
          }
        })
      }
    }

    // Determine the audio data blob
    const audioStartOffset = this.v2 ? this.v2.totalSize : 0;
    const audioEndOffset = this.v1 ? blob.size - 128 : blob.size;

    this.audioData = {
      [ID3_FRAME_DESCRIPTION]: 'Audio data',
      offset: audioStartOffset,
      data: blob.slice(audioStartOffset, audioEndOffset)
    };

    return this
  }

  static async readPictureFrame(frame) {
    const blob = frame.data;
    const size = blob.size;
    const decoderLatin1 = new TextDecoder("iso-8859-1");
    const decoderUtf16 = new TextDecoder("utf-16");
    const chunkSize = 512;

    let readBytes = 0;
    let buffer = new Uint8Array(0);
    let found = false;

    while (readBytes < size && !found) {
      const chunk = new Uint8Array(await blob.slice(readBytes, readBytes + chunkSize).arrayBuffer());

      const merged = new Uint8Array(buffer.length + chunk.length);
      merged.set(buffer);
      merged.set(chunk, buffer.length);
      buffer = merged;

      // Try to find the end of the description
      const encoding = buffer[0];
      const mimeEnd = buffer.indexOf(0x00, 1);
      if (mimeEnd === -1) {
        readBytes += chunkSize;
        continue;
      }

      let i = mimeEnd + 1 + 1; // after mime + pictureType
      if (encoding === 0x00) {
        const descEnd = buffer.indexOf(0x00, i);
        if (descEnd !== -1) found = true;
      } else if (encoding === 0x01) {
        for (let j = i; j < buffer.length - 1; j += 2) {
          if (buffer[j] === 0x00 && buffer[j + 1] === 0x00) {
            found = true;
            break;
          }
        }
      }
      readBytes += chunkSize;
    }

    if (!found) throw new Error("Could not find end of metadata.");

    // --- Parsing phase (now synchronous and clean) ---
    let i = 0;
    const encoding = buffer[i++];
    const mimeEnd = buffer.indexOf(0x00, i);
    const mimeType = decoderLatin1.decode(buffer.slice(i, mimeEnd));
    i = mimeEnd + 1;

    const pictureType = buffer[i++];

    let description = "", offset;
    if (encoding === 0x00) {
      const descEnd = buffer.indexOf(0x00, i);
      description = decoderLatin1.decode(buffer.slice(i, descEnd));
      offset = descEnd + 1;
    } else if (encoding === 0x01) {
      for (let j = i; j < buffer.length - 1; j += 2) {
        if (buffer[j] === 0x00 && buffer[j + 1] === 0x00) {
          description = decoderUtf16.decode(buffer.slice(i, j));
          offset = j + 2;
          break;
        }
      }
    }

    const imageBlob = blob.slice(offset);
    const fileName = `image.${mimeType.split("/").pop() || "bin"}`;

    return {
      pictureType,
      data: new File([imageBlob], fileName, { type: mimeType }),
      description,
      offset,
    };
  }

  /**
   * Sets a frame's data. This can be used to update the frame's content.
   * NOTE: This does not automatically update tag sizes.
   * Call the `file` getter to reconstruct the file with the new sizes.
   * @param {object} frame - The frame object to update.
   * @param {Blob} newData - The new data blob for the frame.
   */
  setFrameData(frame, newData) {
    const existingFrameIndex = this.frames.findIndex(f => f === frame);
    if (existingFrameIndex !== -1) {
      this.frames[existingFrameIndex].data = newData;
      // v2.tagSize and v2.totalSize getters will now reflect this when called.
    } else {
      console.warn("Attempt to set data for a frame not found in the list of parsed frames.");
    }
  }

  /**
   * Updates the content of a text frame. Always saved in UTF-8
   * @param {object} frame - The frame object to update.
   * @param {string} newText - The new text content.
   */
  updateTextFrame(frame, newText) {
    const frameContentBytes = new TextEncoder().encode('\x03' + newText)
    this.setFrameData(frame, new Blob([frameContentBytes]));
  }

  /**
   * Reconstructs the entire audio file as a Blob.
   * This getter combines the updated ID3v2 tag, padding, audio data, and ID3v1 tag.
   * This is fast and sync - b/c no data is ever read. it just combines all chunks into one blob with a list of blob parts
   * @returns {File} return the reconstructed File object.
   */
  get file() {
    const parts = [];

    // Add the ID3v2 tag blob if it exists
    parts.push(this.v2?.blob || '');

    // Add padding if it exists
    parts.push(this.padding?.data || '');

    // Add audio data
    parts.push(this.audioData?.data || '');

    // Add the ID3v1 tag blob if it exists
    parts.push(this.v1?.blob || '');

    return new File(parts, this.#mp3.name || 'music.mp3', {
      type: 'audio/mpeg',
      lastModified: Date.now()
    });
  }
}







// example usage on my machine
console.time('ID3Parser init');
new ID3Parser(blob).init().then(async id3 => {
  // frame1 is APIC
  const pic = await ID3Parser.readPictureFrame(id3.frames[1]).then(console.log)
  // pic.data is just another blob slice of the original - it's a references to the original, dose not take up much memory at all
  console.timeEnd('ID3Parser init')  // 5.507ms
  // you can now easily show it on a img, alternative could be to use createImageBitmap
  // i.m.o you almost never want the image in Uint8Array format - a blob is more suitable for images.
  URL.createObjectURL(pic.data) 
  console.log('ID3v1:', id3.v1);
  console.log('ID3v2:', id3.v2);
  console.log('Frames:', id3.frames);
  console.log('Audio data:', id3.audioData);
  console.log('Padding:', id3.padding);
  console.log('Reconstructed file:', id3.file);
})

Don't know if i should do a own npm package or if you would like to incorporate some of this logic yourself. lot of help came from AI (chatgpt, gemini and even copilot)

example log:

node id3.js
{
  pictureType: 0,
  data: File {
    size: 19878,
    type: 'image/jpg',
    name: 'image.jpg',
    lastModified: 1749873058884
  },
  description: 'image',
  offset: 18
}
ID3Parser init: 5.507ms
ID3v1: {
  title: 'title',
  artist: 'artist',
  album: '',
  year: '0000',
  comment: '',
  genreByte: 255,
  blob: Blob { size: 128, type: '' }
}
ID3v2: {
  versionMajor: 3,
  versionMinor: 0,
  flags: 0,
  tagSize: [Getter],
  totalSize: [Getter],
  blob: [Getter]
}
frames: [
  {
    frameId: 'TSSE',
    flags: 0,
    offset: 20,
    data: Blob { size: 29, type: '' },
    [Symbol(description)]: 'Software/Hardware and settings used for encoding'
  },
  {
    frameId: 'APIC',
    flags: 0,
    offset: 59,
    data: Blob { size: 19896, type: '' },
    [Symbol(description)]: 'Attached picture'
  },
  {
    frameId: 'TIT2',
    flags: 0,
    offset: 19965,
    data: Blob { size: 65, type: '' },
    [Symbol(description)]: 'Title/songname/content description'
  },
  {
    frameId: 'TPE1',
    flags: 0,
    offset: 20040,
    data: Blob { size: 31, type: '' },
    [Symbol(description)]: 'Lead performer(s)/Soloist(s)'
  }
]
Audio data: {
  offset: 20071,
  data: Blob { size: 12690294, type: '' },
  [Symbol(description)]: 'Audio data'
}
Padding: null
Rekonstruerad file: File {
  size: 12690422,
  type: 'audio/mpeg',
  name: 'music.mp3',
  lastModified: 1749873058889
}

Then you could read each frame with different blob methods such as using bytes, arrayBuffer, text & stream depending on what solution would be best to use.

[jimmywarting]

knowing the padding would also be useful information. then you could technically figure out if you can just edit the header or if you need to re-write the hole file. don't really see some information about this that you do expose.

one really good usecase for knowing the offset is that you could for instance store this information somewhere in you database (may it be indexeddb)

then you could store the image offset + size

const image_offset_in_mp3 = pic.offset + id3.frames[1].offset
// Another way to figure out pic offset (image is the last thing in the frame): 
const image_offset_in_mp3 = id3.frames[1].offset + id3.frames[1].data.size - pic.data.size

const { type, size } = pic.data

// later you could just do this without having to use the parser again. 
const imageData = mp3blob.slice(start, end, type)

[eidoriantan]

Thank you for providing your codes and insights on this issue, will work on this!