music-metadata-browser: Offset is not uint

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.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (10 by maintainers)

Most upvoted comments

Ok, there is something very strange happening, and I would like your assistance to confirm my findings.

Here is the sandbox I created. It is very simple; it’s a create-react-app project, the only dependency is music-metadata-browser, and all it does is show the cover art of the track you uploaded (use the 2 files from here)

As you can hopefully see, this example, running on codesandbox.io, works fine.

Now, here is the more involved part, as you will have to create a new create-react-app project, locally, on your machine. (instructions here in case you don’t remember, so that you don’t need to search).

Then copy paste, from codesandbox to your local project, the contents of the following files:

src/index.js
package.json

And finally yarn/npm install and yarn start. You do not need to eject.

I have executed the above steps on 3 separate machines (2 running macOS and 1 running Ubuntu) and the buffer package is always getting pulled from the wrong place. Check the included screenshot and see the path of checkOffset(). It should be pulled from node_modules/buffer (which has v5.2) instead it gets pulled from node_modules/node-libs-browser/node_modules/buffer (which has v4.9)

Can you confirm that it does not work locally for you either?

Btw, you are right this doesn’t look like a yarn/npm issue, I should file this to webpack, if it comes to this.

Thank you for your time. Screen Shot 2019-04-04 at 13 42 47

mkarajohn on Apr 4, 2019