borewit / music-metadata-browser Goto Github PK

Using music-metadata-browser with create-react-app (react-scripts version: 5.0.1) gives 21 console warnings in command line about source-maps for the package.

I am using vite.

i have added polyfills, but it still gives me this error

I am receiving this error:

I am importing the package like this:
import { parseBlob } from "music-metadata-browser"

I am calling the function like this:
const metadata = await parseBlob(audio)

I have already checked that I am passing a object of type File using instanceof.

I am using the latest version of music-metadata and Chrome.

Add an HTTP/XHR reader like for reading metadata based on an URL reference to an audio track. The track will be read based on range request to avoid to many is downloaded.

Download metadata using HTTP range requests.

This would reduced bandwith, because only the required data from the audio track shall be requested.

This functionality maybe added in a different module.

got errors in console that ReadableStream is locked, and can't be canceled

I think:

npm install music-metadata

Should be:

npm install music-metadata-browser

I've got error (SCRIPT1028: SCRIPT1028: Expected identifier, string or number) in production build for edge browser.
It crashes in file-type/core.js _check function with spread operator
I'am using ts-loader -> babel-loader with preset-env and @babel/plugin-proposal-object-rest-spread plugin to transpile down to es5 but it seems it doesn't.
Any suggestions.

Hey, I currently use music-metadata with a buffer polyfill and vite 2 in my project. I would like to switch to this package (which is intended for the use in the browser) and vite 3. Sadly, it does not work, and I get the following error. I tried to polyfill the events module, but that led to more similar errors and I got into polyfilling hell.

Uncaught Error: Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code.
    at Object.get (browser-external:events:9:13)
    at node_modules/readable-web-to-node-stream/node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:32:10)
    at __require (music-metadata-browser.js?v=8f4e2ce6:3:50)
    at node_modules/readable-web-to-node-stream/node_modules/readable-stream/readable-browser.js (readable-browser.js:1:28)
    at __require (music-metadata-browser.js?v=8f4e2ce6:3:50)
    at node_modules/readable-web-to-node-stream/lib/index.js (index.js:4:27)
    at __require (music-metadata-browser.js?v=8f4e2ce6:3:50)
    at node_modules/music-metadata-browser/lib/index.js (index.js:6:39)
    at __require (music-metadata-browser.js?v=8f4e2ce6:3:50)
    at dep:music-metadata-browser:1:16

I created a minimal reproduction of the issue here: https://github.com/lennyanders/music-metadata-browser-8-with-vite-3.
There you just need to execute npm i, after that npm start and then you can see the error in the browser console.

Thanks for looking into it and if I can be of any help, please let me know.

Replacement of issue Borewit/music-metadata#163 from @bfromager:

V3.1.6
Trying to use music-metadata.parseFile() under Ionic 4/Angular 6

Got the following errors:
ERROR in ./node_modules/strtok3/lib/FsPromise.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\strtok3\lib'
ERROR in ./node_modules/music-metadata/lib/index.js
Module not found: Error: Can't resolve 'path' in '...\node_modules\music-metadata\lib'
ERROR in ./node_modules/music-metadata/lib/aiff/AiffParser.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata\lib\aiff'
ERROR in ./node_modules/music-metadata/lib/riff/RiffParser.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata\lib\riff'

Not sure if i'm doing something wrong

Hi there,

I'm loving music-metadata-browser. Nice work!

Every so often, though, when processing a file, it throws an error like the below for certain songs:

RangeError: offset is not uint
    at checkOffset (index.js:1165)
    at Uint8Array.readUInt32LE (index.js:1218)
    at ID3v24TagMapper.postMap (ID3v24TagMapper.js:173)
    at ID3v24TagMapper.mapGenericTag (GenericTagMapper.js:78)
    at CombinedTagMapper.mapTag (CombinedTagMapper.js:42)
    at MetadataCollector.toCommon (MetadataCollector.js:239)
    at MetadataCollector.addTag (MetadataCollector.js:102)
    at ID3v2Parser.addTag (ID3v2Parser.js:195)
    at ID3v2Parser.parseId3Data (ID3v2Parser.js:189)

When I say "certain songs" I mean mp3 files, and that the error is consistent, in that it will always happen for some files and it will never happen on others.

What are some things to look at with regards to the file to determine why a problematic file is causing the error?

I've read through issue #15 but couldn't quite figure out how to troubleshoot the issue.

I dropped some of the files in question on the Audio Tag Analyzer, and compared those to "known good" files, but I'm not seeing thing that sticks out.

Any advice would be greatly appreciated.

P.S. I'm using "music-metadata-browser": "^1.1.1" in a create-react-app

The shown "Sample-rate" is off by a factor of 1000 (shows 44.1 Hz instead of 44.1 kHz or 44100 Hz).

Feature Request

As seen in the screenshot, all parsers are included in the music-metadata bundle. I'm curious if it's possible to reduce the bundle size when using a selection of parsers (such as ID3v2 and ID3v1). This is useful when you know what type of files you're dealing with beforehand.

Steps to reproduce

// src/index.js
const { parseFile } = require('music-metadata');

// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all'
        }
      }
    }
  }
}

webpack --mode production

Suggestion

I'm not entirely sure how feasible this suggestion is, but it would be nice if something like this would be possible:

const { parseFile } = require('music-metadata');

parseFile(file, { parsers: ['id3v1', 'id3v2'] })

This way you keep the flexibility of automatically grabbing the correct parser for the file, but limit the amount of parsers it should check for (and hopefully decrease the overall bundle size by doing so).

Hey @Borewit 👋
I finally got around to testing this package, sorry for the delay! 😄

I'm a little confused about the parser loading. So normally the parsers are lazy loaded, but how would that work in a browser? It doesn't seem to work for me (ie. I'm getting Cannot find module './mpeg/index' in the browser console). So what's the solution here? Copy all the parser files into the my javascript directory? Or manually import all the parsers I need into my bundle and then write a custom loadParser function?

Also, would it be possible to have a static browser build that works straight away without a javascript bundler? I'm not using a javascript bundler in version two of Diffuse. Totally cool if not.

Thanks! ✌️

Hello，
I just found when I put .m4a type of file in this https://audio-tag-analyzer.netlify.com/ website,
the result seems like miss some value: Bit-rate, Number of channels.....

I try different files, but it doesn't work

Sorry for my bad English, hope you can understand

I've decided to move the parsing logic to the web worker, so that the main thread and ui wouldn't be impacted by analyzing lots of files.

Consider following web worker code:

/// <reference lib="webworker" />

import * as Metadata from 'music-metadata-browser'

const parse = async (id: number, file: File) => {
  try {
    console.log(`[${id}] parsing...`)
    const metadata = await Metadata.parseBlob(file)
    console.log(`[${id}] metadata:`, metadata)
    postMessage({ 
      id,
      status: 'success',
      metadata, 
      coverUrl 
    })
  } catch (error) {
    console.error(error)
    postMessage({ 
      id,
      status: 'failure',
      error
    })
  }
}

// ...

Now, when I try to parse it the easiest way possible, only a few random files are parsed:

addEventListener('message', async (event) => {
  const id = event.data.id as number
  const file = event.data.file as File
  parse(id, file)
})

In that case, only files with id 3 and 4 have been parsed. Note that pausing, the web worker thread in the devtools does nothing until I send a new file to process to the worker. It then breaks on the addEventListener. The parseBlob never resolves nor rejects.

Also, before moving all the logic into the web worker I could start parsing all files at the same time without any problems like so:

await Promise.allSettled(files.map(async (file) => {
  return Metadata.parseBlob(file)
}))

The workaround that I need to introduce now is to wait until one file is parsed and then start parsing the next one. That's not really what I want to do as it would be much less performant.

const queue = []
let queuePromise = Promise.resolve()
addEventListener('message', async (event) => {
  const id = event.data.id as number
  const file = event.data.file as File

  queue.push(() => parse(id, file))
  queuePromise = queuePromise.then(() => queue.shift()())
})

Affected browser: Firefox 120, it works well on Chromium

Vite 4 with the ngmi-polyfill plugin as per #836 (comment)

Issue description

I am working on a music track uploader. The user is supposed to upload a music file, and the uploader is supposed to display the file metadata, once the upload is successful.

I have two mp3 files that both have the same kind of metadata, tracks A and B.

Track A's metadata are read and displayed fine.

Track B's displays no metadata.

I investigated on this, and the cause of the issue is that at some point, after the track has been translated into an array buffer, a checkOffset is called with an offset argument that is undefined, and as a result it throws (file location is node_modules/node-libs-browser/node_modules/buffer/index.js line 1097).

The best I could do, was check the initial array buffer for any undefined data inside of it, but the .some() I run on it returned false.

The stack trace is this:

checkOffset (index.js:1165)
readUInt32LE (index.js:1218)
postMap (ID3v24TagMapper.js:194)
mapGenericTag (GenericTagMapper.js:40)
mapTag (CombinedTagMapper.js:54)
toCommon (MetadataCollector.js:256)
addTag (MetadataCollector.js:115)
addTag (ID3v2Parser.js:409)
_callee4$ (ID3v2Parser.js:357)
tryCatch (runtime.js:63)
invoke (runtime.js:282)
prototype.(anonymous function) (runtime.js:116)
fulfilled (ID3v2Parser.js:13)
Promise.then (async)
step (ID3v2Parser.js:30)
(anonymous) (ID3v2Parser.js:33)
push../node_modules/music-metadata/lib/id3v2/ID3v2Parser.js.__awaiter (ID3v2Parser.js:10)
parseId3Data (ID3v2Parser.js:170)
_callee$ (ID3v2Parser.js:95)
tryCatch (runtime.js:63)
invoke (runtime.js:282)
prototype.(anonymous function) (runtime.js:116)
fulfilled (ID3v2Parser.js:13)
Promise.then (async)
step (ID3v2Parser.js:30)
(anonymous) (ID3v2Parser.js:33)
push../node_modules/music-metadata/lib/id3v2/ID3v2Parser.js.__awaiter (ID3v2Parser.js:10)
parse (ID3v2Parser.js:59)
_callee2$ (AbstractID3Parser.js:162)
tryCatch (runtime.js:63)
invoke (runtime.js:282)
prototype.(anonymous function) (runtime.js:116)
fulfilled (AbstractID3Parser.js:19)
Promise.then (async)
step (AbstractID3Parser.js:36)
(anonymous) (AbstractID3Parser.js:39)
push../node_modules/music-metadata/lib/id3v2/AbstractID3Parser.js.__awaiter (AbstractID3Parser.js:16)
tryReadId3v2Headers (AbstractID3Parser.js:141)
_callee$ (AbstractID3Parser.js:105)
tryCatch (runtime.js:63)
invoke (runtime.js:282)
prototype.(anonymous function) (runtime.js:116)
(anonymous) (AbstractID3Parser.js:39)
push../node_modules/music-metadata/lib/id3v2/AbstractID3Parser.js.__awaiter (AbstractID3Parser.js:16)
parseID3v2 (AbstractID3Parser.js:96)
parse (AbstractID3Parser.js:83)
_callee3$ (ParserFactory.js:287)
tryCatch (runtime.js:63)
invoke (runtime.js:282)
prototype.(anonymous function) (runtime.js:116)
fulfilled (ParserFactory.js:13)
Promise.then (async)
step (ParserFactory.js:30)
(anonymous) (ParserFactory.js:33)
push../node_modules/music-metadata/lib/ParserFactory.js.__awaiter (ParserFactory.js:10)
_parse (ParserFactory.js:272)
_callee$ (ParserFactory.js:138)
tryCatch (runtime.js:63)
invoke (runtime.js:282)
prototype.(anonymous function) (runtime.js:116)
(anonymous) (ParserFactory.js:33)
push../node_modules/music-metadata/lib/ParserFactory.js.__awaiter (ParserFactory.js:10)
parse (ParserFactory.js:92)
parseFromTokenizer (core.js:56)
parseBuffer (core.js:37)
(anonymous) (index.js:61)
Promise.then (async)
parseBlob (index.js:60)

Can you direct me to the right direction for solving this?

I can provide you with the track files as well if you ask.

Thank you, and thank you for this library.

mmb is throwing an error when trying to parseBlob. Could be fixed by polyfilling, but process.nextTick is also required by mmb but already set with a custom function from Nuxt, so polyfilling it is not an option.

ReferenceError: Buffer is not defined
    at ReadStreamTokenizer.peekToken (AbstractTokenizer.js:37:28)
    at FlacParser.tryReadId3v2Headers (AbstractID3Parser.js:52:48)
    at FlacParser.parseID3v2 (AbstractID3Parser.js:39:20)
    at FlacParser.parse (AbstractID3Parser.js:24:24)
    at parse (ParserFactory.js:38:50)

_stream_readable.js:490 Uncaught (in promise) TypeError: process.nextTick is not a function
    at emitReadable (_stream_readable.js:490:13)
    at addChunk (_stream_readable.js:284:29)
    at readableAddChunk (_stream_readable.js:262:11)
    at Readable.push (_stream_readable.js:228:10)
    at ReadableWebToNodeStream._read (index.js:44:18)

Add function to module which parses audio data from a File.

Depends on: Borewit/music-metadata#140.
In favor of: captbaritone/webamp#650

Bug description
There is an uncaught syntax error thrown in the console when using this library in a cordova app.
The syntax error is thrown by simply importing the library:

try {
    var MusicMetadata = require("music-metadata");
} catch(e) {
    // syntax error thrown when using music-metadata library with cordova
    // console output if not caught: 
    // Uncaught SyntaxError: Unexpected token function
}

Expected behavior
No syntax error should be thrown.

Audio file demonstrating the problem
This has nothing to do with a specific audio file.

Related images

Edit: was using music-metadata-browser in the above images but It is still the same issue with music-metadata. However the error is thrown on line 15 of index.js instead :

Edit: Through further investigation it seems that this bug only occurs in development if using android virtual device. running the app on a real device seems to work fine. I can live with this, but it would be nice if this bug is fixed though.

Is it possible to Identify if the mp3 is an ID3 tagging and parse just the required bytes instead of downloading the whole mp3 using fetch url and then parsing it for all tags available ?

Caused by: Borewit/test-audio#1

Not sure why unit tests failing frequently.
It may me be related to responsiveness of network connections, maybe a bug.

Related:

• Borewit/readable-web-to-node-stream#33
• Borewit/tokenizer-http#17

Possibly the same issue:

• karma-runner/karma-browserstack-launcher#152

While using music-metadata as a direct dependency (no longer use webpack post processing), prevent Node modules dependency inheritance of:

1. fs
2. path

Related:

1. Borewit/music-metadata#147
2. Borewit/strtok3#17

Hello!

I was working on an audioMotion update and realized it's not fetching metadata from any aac/m4a files anymore. parseBlob() still works fine, but not fetchFromUrl() or parseReadableStream(). No issues with other formats, like mp3, flac and ogg.

I'm not sure which version introduced the issue, since I use mostly flac. I had some old test code working with music-metadata-browser v1.4.0, and it stops working if I update to v1.5.0. The problem persists up to v1.9.1.

Below is the output with [email protected]:

After updating to 1.5.0, the metadata is returned empty for m4a files:

Here with debug info.. the parser seems to be working fine, but the collector returns an empty format/codec..

My test code:

const mm = require('music-metadata-browser');

let files = [ 'test.m4a', 'test.mp3', 'test.ogg', 'test.flac', 'http://a1rj.streams.com.br:7801/stream' ];

files.forEach( uri => {

	mm.fetchFromUrl( uri, { duration: false, skipCovers: true } ).then( metadata => {
		console.log( `${uri} via fetchFromUrl():`, metadata );
	}).catch( err => console.log( err ) );

	fetch( uri ).then( response => {
		return response.body;
	}).then( stream => {
		mm.parseReadableStream( stream, '', { duration: false, skipCovers: true } ).then( metadata => {
			console.log( `${uri} via parseReadableStream():`, metadata );
			stream.cancel();
		}).catch( err => console.log( err ) );
	});

});

I get this error

Uncaught ReferenceError: exports is not defined

after importing the module into my javascript file. Anyone else ran into this ?

music-metadata version: 4.8.0( I use [email protected], which depends on this version)
music file: https://resources-1257265876.cos.ap-beijing.myqcloud.com/debug/duration-parse-problem.m4a

the parsed duration is -1024.

metadata parsed:
format:
bitrate: -3387.5546875
codec: "AAC"
codecProfile: "AAC LC"
container: "ADTS/MPEG-4"
duration: -1024
lossless: false
numberOfChannels: 1
numberOfSamples: 1024
sampleRate: -1

Get rid of assert dependency to reduce dependencies required in a browser environment.

Dependency tree of assert:

Source: https://npm.broofa.com/?q=assert

Related: #419

Dependabot couldn't parse the config file at .dependabot/config.yml. The error raised was:

(<unknown>): did not find expected key while parsing a block mapping at line 3 column 5

Please ensure the config file is a valid YAML file. An online YAML linter is available here.

mp3-meta-test.zip

test code

const musicMetadata = require('music-metadata-browser');
const fs = require('fs')
const path = require('path')

async function start() {
    let mp3 = path.join(__dirname, 'A8E0CE2D6C590E51F225201FB021885F.mp3')
    let meta = await musicMetadata.parseNodeStream(fs.createReadStream(mp3))
    console.log(meta)
    meta = await musicMetadata.parseBuffer(fs.readFileSync(mp3))
    console.log(meta)
}

start()

output

PS C:\Users\y> node C:\Users\y\Desktop\mp3-meta-test\index.js
{
  format: {
    tagTypes: [ 'ID3v2.3' ],
    trackInfo: [],
    lossless: false,
    container: 'MPEG',
    codec: 'MPEG 1 Layer 3',
    sampleRate: 44100,
    numberOfChannels: 1,
    bitrate: 32000,
    codecProfile: 'CBR'
  },
  native: { 'ID3v2.3': [ [Object] ] },
  quality: { warnings: [ [Object], [Object] ] },
  common: {
    track: { no: null, of: null },
    disk: { no: null, of: null },
    movementIndex: {}
  }
}
{
  format: {
    tagTypes: [ 'ID3v2.3', 'ID3v1' ],
    trackInfo: [],
    lossless: false,
    container: 'MPEG',
    codec: 'MPEG 1 Layer 3',
    sampleRate: 44100,
    numberOfChannels: 1,
    bitrate: 32000,
    codecProfile: 'CBR',
    numberOfSamples: 688896,
    duration: 15.62122448979592
  },
  native: { 'ID3v2.3': [ [Object] ], ID3v1: [ [Object] ] },
  quality: { warnings: [ [Object], [Object] ] },
  common: {
    track: { no: null, of: null },
    disk: { no: null, of: null },
    movementIndex: {},
    genre: [ 'Blues' ]
  }
}

Use ffmpeg to view the audio duration should be 4.44 seconds.

PS C:\Users\y\Desktop\mp3-meta-test> ffprobe.exe .\A8E0CE2D6C590E51F225201FB021885F.mp3                                 ffprobe version N-93863-g58d167bcd5 Copyright (c) 2007-2019 the FFmpeg developers
  built with gcc 8.3.1 (GCC) 20190414
  configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libdav1d --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-amf --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth --enable-libopenmpt
  libavutil      56. 27.100 / 56. 27.100
  libavcodec     58. 52.101 / 58. 52.101
  libavformat    58. 27.103 / 58. 27.103
  libavdevice    58.  7.100 / 58.  7.100
  libavfilter     7. 53.100 /  7. 53.100
  libswscale      5.  4.101 /  5.  4.101
  libswresample   3.  4.100 /  3.  4.100
  libpostproc    55.  4.100 / 55.  4.100
[mp3 @ 000002085649c380] Estimating duration from bitrate, this may be inaccurate
Input #0, mp3, from '.\A8E0CE2D6C590E51F225201FB021885F.mp3':
  Metadata:
    genre           : Blues
    id3v2_priv.XMP  : <?xpacket begin="\xef\xbb\xbf" id="W5M0MpCehiHzreSzNTczkc9d"?>\x0a<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        ">\x0a <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">\x0a  <rdf
  Duration: 00:00:04.44, start: 0.000000, bitrate: 122 kb/s
    Stream #0:0: Audio: mp3, 44100 Hz, mono, fltp, 112 kb/s

I'm getting the following error when trying to read metadata from m4a files with fetchFromURL():

TypeError: 'cancel' can't be called on a locked stream.

It works fine with mp3 and flac files though.

parseBlob() does work with the same m4a files.

Just updated to version 1.2.0, but the problem persists.

Thanks!

I get this error when I import the project

Could not find module in path: 'assert/assert.js' relative to '/node_modules/peek-readable/lib/index.js'

https://codesandbox.io/s/cool-rain-jwecy

Usually pictures in FLAC are using the PICTURE block-type (type 6).

In case a VORBIS COMMENT (type 4) block is used, with a base-64 encoded METADATA_BLOCK_PICTURE tag, the way pictures are embedded in Ogg/Vorbis, it will cause a crash.

Although I suspect using the METADATA_BLOCK_PICTURE in FLAC files is non-standard, I will consider the issue as a bug.

Caused by: Borewit/music-metadata#266 (please put comments here)
Blocks: audio-tag-analyze#21

Currently its fetching the whole file

Looks like this markdown file documenting common tag mappings was removed recently:
common_metadata.md

Yet it's still linked to in the README.

Is this documentation still around somewhere?

The function
export async function fetchFromUrl(audioTrackUrl: string, options?: IOptions): Promise<IAudioMetadata> {

Does a fetch without including the credentials or cors mode. When enabled, I can use it to fetch data from an url that needs a web session (login) to download the data.

I think it should be as simple as

await fetch(audioTrackUrl, {
    credentials: 'include',
    mode: 'cors'
})

Hi, there!

In react framework, I got some problem with i.e. browser..

It throws an error " SCRIPT1004: Expected ';' " and points to where the error occurred.

Any advice would be greatly appreciated.

Issue:

After updating this package to the latest 2.5.0 version within our team's app, the functionality we had around audio files being uploaded was completely broken on Safari alone. All other browsers were unaffected by the update

Looking at the changelog, looks like the issue might be within the return of the parseBlob function:

if (blob instanceof File) {
  fileInfo.path = (blob as File).name;
}

return parseReadableStream(blob.stream(), {.....);

That switching of the blob from being a Uint8Array to a ReadableStream comes with an issue with the Default Reader of the ReadableStream -> https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader

Within the readable-web-to-node-stream package, the class constructor calls the ReadableStream.getReader() method, which returns the ReadableStreamDefaultReader that Safari has issues with ->

https://github.com/Borewit/readable-web-to-node-stream/blob/e81a7c91b1fa73cb11dc50bac41a9f033e0d030e/lib/index.ts#L27

Caused by TypeStrong/dts-bundle#60

Hi,

Currently using music-metadata-browser (what an incredibly good project), I am facing a warning in Vite:

node_modules/file-type/core.js (1419:16) Use of eval in "node_modules/file-type/core.js" is strongly discouraged as it poses security risks and may cause issues with minification.

After seeking the reason of this warning, I saw that music-metadata-browser currently depends on "music-metadata": "^7.13.3", which depends on "file-type": "^16.5.4", which uses an eval in its code base.

Since "music-metadata": "8.1.4" depends on "file-type": "^18.2.1" (not uning eval anymore), I would suggest to update the dependencies to "music-metadata": "8.1.4";

I could help creating pull request if want me to.

Thanks.

Hi,

I have integrated music-metadata-browser in my Angular 8 project and its working fine on local server of my system but when I uploaded the project on server then getting error on the component in which music-metadata-browser is used. Error that I am getting is:

core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Class extends value undefined is not a constructor or null
TypeError: Class extends value undefined is not a constructor or null
at Object../node_modules/music-metadata/lib/id3v2/ID3Stream.js (ID3Stream.js:8)
at webpack_require (bootstrap:84)
at Object../node_modules/music-metadata/lib/aiff/AiffParser.js (AiffParser.js:12)
at webpack_require (bootstrap:84)
at Object../node_modules/music-metadata/lib/ParserFactory.js (ParserFactory.js:9)
at webpack_require (bootstrap:84)
at Object../node_modules/music-metadata/lib/core.js (core.js:5)
at webpack_require (bootstrap:84)
at Object../node_modules/music-metadata-browser/lib/index.js (index.js:5)

When trying to use the music-metadata-browser with webpack 5 serveral errors will appear.

1. Several *.js.map files can't be found anymore.

This can be fixed temporarly by setting the enviroment variable
GENERATE_SOURCEMAP=false

2. Parsing won't be working anymore since buffer isn't supported anymore (?)
   https://stackoverflow.com/questions/67009449/after-upgrading-webpack-to-version-5-getting-run-time-error-buffer-is-not-defin

Uncaught (in promise) ReferenceError: Buffer is not defined at new MpegParser (MpegParser.js:218:1) at Function.loadParser (ParserFactory.js:148:1) at parse (ParserFactory.js:36:1) at Function.parse (ParserFactory.js:79:1) at Function.parseOnContentType (ParserFactory.js:55:1) at async parseReadableStream (index.js:31:1)

This error makes it nearly impossible to use this libary with the newest CRA of React or any other projects which rely on webpack5.

To reproduce the error you just have to setup the basic react-app and try to implement music-metadata-browser.

I'm working on a music app using Vue framework, currently my app is on localhost server .I'm unable to parse the audio files which is .in .mp3 format located inside 'src/assets/songs' folder, the webpack seems to load the files without any issues but the 'fetchFromUrl' function throws 'Type Error: Failed to fetch' error in catch block. I've also checked the Network tab in chrome ,the status seems to be pending for a while but fails eventually how can I rectify this?

Updated to version 2.5.1 and I'm getting this error: TypeError: this.parseReadableStream is not a function.

I'm actually using the fetchFromUrl() method in my code. If I revert to 2.5.0 it works as intended.

Thanks.

I'm seeing the following message in my browser with builds and local dev (Node16, Typescript 4, Vite, VueJS)

_stream_readable.js:529 Uncaught (in promise) TypeError: process.nextTick is not a function
    at emitReadable (_stream_readable.js:529)
    at addChunk (_stream_readable.js:303)
    at readableAddChunk (_stream_readable.js:280)
    at ReadableWebToNodeStream.Readable.push (_stream_readable.js:241)
    at ReadableWebToNodeStream._read (index.js:44)

Here's the full trace:

Before I say ANYTHING else, I just want to say THANK YOU for all the difficult and thoughtful work you put into building and maintaining this library. I also want to add that I've spent a few hours googling and experimenting with potential fixes before coming here to ask for help. 😀

In my project, I do the following shimming:

src/shim.ts

// source: https://github.com/Azure/azure-sdk-for-js/issues/14496
import * as process from 'process'
import * as events from 'events'
import { Buffer } from 'buffer'
import { Readable } from 'readable-stream'

Object.assign(self, {
  process,
  Buffer,
  Readable,
  EventEmitter: events,
  global: self,
})

This is my "main" file (entrypoint) ==> src/main.ts

import 'shim.ts'
import 'vue-global-api'
import devalue from '@nuxt/devalue'
import { ViteSSG } from 'vite-ssg'

.... and then EVERYTHING else after that

and I have a file called src/components/helpers.ts (where I use music-metadata-browser)

/* eslint-disable no-console */
import * as musicMetadata from 'music-metadata-browser'


interface FileToBeUploaded extends File {
  audioMeta?: musicMetadata.IAudioMetadata | null
}

const parseMeta = async(audioFilesToParse: FileToBeUploaded[]) => {
  try {
    const metaArray = Promise.all(
      audioFilesToParse.map(async(file) => {
        const metaForFile = await musicMetadata.parseBlob(file)

        if (metaForFile.common.title && (metaForFile.common.artist || metaForFile.common.artists))
          console.log('GOT META: ', metaForFile)
        else console.warn('NO Artist or Song Meta! for ', file.name)

        return Object.assign(file, {
          audioMeta: metaForFile || null,
        })
      }),
    )

    return metaArray
  }
  catch (error) {
    console.error(error)
  }
}

const sanitizeFilenames = (newFiles: FileToBeUploaded[]) => {
  return newFiles.map((item) => {
    // Replace any spaces in filename with underscore
    const sanitizedName = item.name.split(' ').join('_')

    return Object.defineProperty(item, 'name', {
      writable: true,
      value: sanitizedName,
    })
  })
}

export const prepareFiles = async(filesToPrepare: FileToBeUploaded[]) => {
  const sanitizedFileArray = sanitizeFilenames(filesToPrepare)
  const parsedMetaFileArray = await parseMeta(sanitizedFileArray)

  return parsedMetaFileArray
}

Any help would be MUCH appreciated! Thank you so much!

Dependabot encountered the following error when parsing your .dependabot/config.yml:

The property '#/update_configs/0/automerged_updates/1/match/update_type' value "semver::minor" did not match one of the following values: all, security:patch, semver:patch, semver:minor, in_range

Please update the config file to conform with Dependabot's specification using our docs and online validator.

I am trying to use this package in an angular application to read metadata about streaming radio stations using an URL, however it seems the library is not able to catch the title and artist data.
I tried running both in my own Angular project and the demo here that you provided.
By dragging the stream URL on the drop box, some metadata about bitrate etc. is extracted however there is no title or artist name as you can see here:

At the same time an application like foobar2000 is able to get the artist and song title from the stream as you can see:

Here are some example streams i used:
https://stream.open.fm/3
https://listen6.myradio24.com/walcon

From what I understand it should be possible to gather this information using this package

Hi, today we found that metadata parse doesn't work anymore in our case,

package versions were tested: 2.2.6, 2.5.4.
browser chrome latest version

const metadata = mm.parseReadableStream(file.stream());

metadata.then(result => {
    console.log(result);
});

https://github.com/Borewit/music-metadata-browser#parseblob-function

nothing else to say 🤷

Hello @Borewit,
This is not an issue, but repository discussions are not enabled so I take the liberty to contact you this way.
I have release an open source project that heavily relies on music-metadata-browser: MusicSource.
You might want to take a look. Thank you for your work!