Uncaught (in promise) DOMException: Failed to load because no supported source was found

[stefanoslig]

Hello, I tried to use this library into an angular 2 project but I get the following error:
Uncaught (in promise) DOMException: Failed to load because no supported source was found

At the app.component,ts of my app I added the following commands:

this.rythm = new Rythm();
this.rythm.setMusic('../assets/rythm.mp3');
this.rythm.start() 

Unfortunately, I'm not able to give you more information because I don't know which is the problem and I didn't find something to help me.

Has anyone the same problem or does anybody has any idea about this error?
Thank you!

[Okazari]

Gonna try an angular integration tomorrow to see if i can reproduce.

[stefanoslig]

ok, thanks

[Okazari]

I have doubts about your mp3 URL. it may be "/assets/rythm.mp3" or import mySong from '../assets/rythm.mp3' depending on the way you load statics into your app but i don't think relative could work here out of the box.

[stefanoslig]

I have tried to use an absolute path but didn't work

[Okazari]

Could you try with this one ? (just tell me if there is CORS) https://okazari.github.io/Rythm.js/samples/rythmC.mp3

[stefanoslig]

It's working on Edge with this url. I get the following error on Chrome:

MediaElementAudioSource outputs zeroes due to CORS access restrictions for https://okazari.github.io/Rythm.js/samples/rythmC.mp3

[Okazari]

As I suspect this looks like a loading issue with your URL. I don't know yet how to expose statics on Angular. I'll check tomorow. Anyway i should handle this error and output a better message in Rythm. If you can find the right URL to access your file in your browser, it should work with this same URL with Rythm.

[stefanoslig]

ok, thanks a lot for your time!

[nesvand]

Depending on your build chain @stefanos- I'd suggest using something like https://github.com/webpack-contrib/url-loader to generate the correct URL string to pass in to the library at run time

[Okazari]

I did try on my angular poc... I did eject the conf to add "mp3" in the url-loader regex into the webpack config but i'm still running into a build issue module "./rythmC.mp3" not found...
God i hate angular 😂

[Okazari]

So, the easiest solution that worked for me here is :
1 - Add your file into the "assets" folder
2 - You should be able to acces it at /assets/rythm.mp3 in your browser
3 - The call to rythm.setMusic("/assets/rythm.mp3") should now work.

[Okazari]

Closing, no activity in more than 1 month.