Comments (15)
For music-metadata parsing, on the browser side, you better use this npm. That will get rid of the fs dependency.
But, there are some things you have to take care of, due to some Node specific dependencies which needs to be poly-filled:
Using Angular 6 you need to polyfill stream & assert in your tsconfig.json:
"paths": {
"stream": [ "node_modules/readable-stream" ],
"assert": [ "node_modules/assert" ]
}
An example can be found in audio-tag-analyzer.
Not so many projects are using music-metadata-browser @bfromager, so I am looking forward to hear if things work out for you.
from music-metadata-browser.
Thx for your quick reply.
Unfortunately, polyfills did'nt seem to have any effect (i tried with and without in both tsconfig.json and src/tsconfig?app.json) with the same errors:
[ng] ERROR in ./node_modules/music-metadata-browser/dist/fetch/Browser2NodeStream.js
[ng] Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata-browser\dist\fetch'
[ng] ERROR in ./node_modules/music-metadata/lib/aiff/AiffParser.js
[ng] Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata\lib\aiff'
[ng] ERROR in ./node_modules/music-metadata/lib/riff/RiffParser.js
[ng] Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata\lib\riff'
from music-metadata-browser.
Did you add stream-readable and assert as dependencies to your project?
You basically tell the TypeScript compilere where to look for the stream & assert dependency.
Compare your project with the audio-tag-analyzer. I
If you tell me where to find it I can have a look to your code.
from music-metadata-browser.
Since I just ran into this:
You need to
npm i assert buffer process readable-stream
and then polyfill some globals in polyfill.ts
:
import * as process from 'process';
(window as any).process = process;
(window as any).global = window;
import * as _buffer from 'buffer';
(window as any).Buffer = _buffer.Buffer;
in addition to the paths
setup described above.
from music-metadata-browser.
@wulfsberg thanks for sharing that, really useful!
Although I don't understand why you need to install assert, buffer and readable-stream since those are already dependencies of music-metadata-browser.
from music-metadata-browser.
Good question, really. I saw the compile sequence complain about missing them, and installed and polyfilled them without thinking about them already being dependencies.
As you say, it really should only be necessary to polyfill, since they are already there as dependencies, but running a couple of tests now, I seem to be getting a lot of obscure errors if don't install them explicitly.
The only things I can think of is that it's either pulling in different versions of subdependencies, or the installation somehow rejigs some import sequence.
So something seems brittle, though I'll not forswear that it is my brain currently.
from music-metadata-browser.
It it is tricky, I know.
I think these polyfill dependencies, which probably prevent music-metadata-browser from working straight away, is the main reason for the larger audience not to use it.
from music-metadata-browser.
I have this same problem. I followed these steps, but the error remains.
I don't have tsconfig.json, but in my project I have tsconfig.app.json and tsconfig.spec.json. Both I put "paths".
And I followed the trick by @wulfsberg as well.
Is there more change to do?
from music-metadata-browser.
@lucaskawasaki Can you check in your code so I can replicate your issue?
from music-metadata-browser.
Thanks for the answer. Well, I followed the steps at https://www.npmjs.com/package/music-metadata-browser
First I ran npm install music-metadata-browser
And I tried to run:
mm.parseReadableStream(readableStream, 'audio/mpeg', { fileSize: 26838 }) .then( metadata => { console.log(util.inspect(metadata, { showHidden: false, depth: null })); someReadStream.cancel(); });
And so these errors appeared:
ERROR in ./node_modules/strtok3/lib/FsPromise.js
Module not found: Error: Can't resolve 'fs' in 'C:\Instore\manager-ui\node_modules\strtok3\lib'
ERROR in ./node_modules/music-metadata/lib/index.js
Module not found: Error: Can't resolve 'path' in 'C:\Instore\manager-ui\node_modules\music-metadata\lib'
ERROR in ./node_modules/music-metadata/lib/id3v2/ID3Stream.js
Module not found: Error: Can't resolve 'stream' in 'C:\Instore\manager-ui\node_modules\music-metadata\lib\id3v2'
So, I changed the:
- tsconfig.app.json;
- tsconfig.spec.json;
And changed the polyfills.ts:
from music-metadata-browser.
One thing I notice is that you are using es2015 modules, while I use common.js.
This is not much more then a of wild guess what potentially could go wrong.
I think I need to be able to reproduce the issue to give you better guidance.
To clarify the architecture a bit, music-metadata is module written for Node.js. music-metadata-browser aims to adapt/wraps it in a module suitable to be used to be executed in the browser. Typically not directly imported by the browser, but first pre-processed with a module-bundler like webpack, into a single downloadable and optimized JavaScript file.
from music-metadata-browser.
I also ran into this problem, however the only way I managed to fix it was by manually changing the reference from global
to window
in the index.js(line 43) file in your lib.
Edit: ran into some more issues involving global so I manually changed all references to window and now it's working like a charm. Could you maybe update it eventually? It's quite useful for my project.
I'm using Angular 8
from music-metadata-browser.
I also ran into this problem, however the only way I managed to fix it was by manually changing the reference from global to window in the index.js(line 43) file in your lib.
I think you are referring to line 43 from buffer version 4.3.0, released on 12 Jan 2016, included by webpack/node-libs-browser.
As you can see I have already proposed to update assert in that same library, and it seems it is not very likely any change is done.
You can find a working Angular 8 sample here.
from music-metadata-browser.
@Borewit thanks! I'm sorry I thought it was a problem with your things. Still a beginner to the angular/ts world.
from music-metadata-browser.
No problem, those poly-fills are tricky.
from music-metadata-browser.
Related Issues (20)
- Uncaught ReferenceError: `Buffer` is not defined HOT 7
- Get rid of assert dependency
- Bug with in-browser implementation HOT 6
- Uncaught ReferenceError: exports is not defined HOT 2
- 2.5.0 Version updates Break Some Features on Safari HOT 5
- 'TypeError: this.parseReadableStream is not a function' on latest version 2.5.1 HOT 2
- Broken data in metadata result HOT 3
- Incompatibility with Webpack 5 HOT 3
- TypeError: can't access property "call", Stream is undefined HOT 9
- No title or artist metadata from URL streams HOT 4
- Add MusicSource to online demos HOT 1
- fetchFromUrl doesn't include credentials HOT 1
- Can't use this package with vite 3 HOT 9
- Source map warnings.
- Using music-metadata 7.x instead on 8.x HOT 2
- use Range header to fetch metadata instead of whole file? HOT 1
- Nuxt 3 compatibility HOT 2
- Multiple blobs at once not parsing in WebWorker in Firefox HOT 5
- Wrong "Sample-rate" in "Audio Tag Analyzer" demo
- Option to avoid parsing entire file? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from music-metadata-browser.