Wavesurfer-js with Typescript waves hidden

I am using wavesurferjs with Angular version 8, so when I use this url this and loaded into wavesurferjs with this configuration

generateWaveform(): void {
// Write TypeScript code!
const DEFAULT_AUDIO_HEIGHT: number = 300;
const DEFAULT_MEDIA_TYPE: string = "audio";

let userObj = this.app_ser.getCurrentUser()
console.log('token =', userObj.token);
Promise.resolve(null).then(() => {
this.wave = WaveSurfer.create({
container: '#waveform',
waveColor: '#D2EDD4',
progressColor: '#46B54D',
skipLength: 2,
audioRate: 1,
height: DEFAULT_AUDIO_HEIGHT,
cursorColor: "#2196F3",
partialRender: true,
hideScrollbar: true,
plugins: [
TimelinePlugin.create({
container: '#wave-timeline',
notchPercentHeight: 70,
secondaryColor: "#BDBDBD",
primaryColor: "#c5c5c5",
secondaryFontColor: "#BDBDBD",
primaryFontColor: "#c5c5c5"
}),
Regions.create({
regions: [
{
start: 1,
end: 3,
loop: false,
color: 'hsla(400, 100%, 30%, 0.5)'
}, {
start: 5,
end: 7,
loop: false,
color: 'hsla(200, 50%, 70%, 0.4)'
}
],
dragSelection: {
slop: 5
}
})
],
drawingContextAttributes: {
desynchronized: false
}
});

this.wave.on('ready', () => {
this.wave.play();
});

this.wave.on("error", function(error){
console.log("error = ", error);
});


onPreviewPressed(url: string): void {
if (!this.wave) {
this.generateWaveform();
}

this.cdr.detectChanges();

Promise.resolve().then(() =>
// this.wave.load('http://localhost/test/media_files/tes.mp3')
this.wave.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'));
}


It's working fine without any error, but when I am using my own server that has file and URL look like http://localhost/test/media_files/tes.mp3, it's telling me cors origin problem so I added the required configuration to avoid this problem like that

...//
xhr: {
"cache":"default",
"mode":"no-cors",
"method":"GET",
"credentials":"same-origin",
"redirect":"follow",
"referrer":"client",
}
...//



The cross origin is solved but another error appears in the console:

Error: HTTP error status: 0
at wavesurfer.js:2803
at ZoneDelegate.invoke (zone-evergreen.js:359)
at Object.onInvoke (core.js:39699)
at ZoneDelegate.invoke (zone-evergreen.js:358)
at Zone.run (zone-evergreen.js:124)
at zone-evergreen.js:855
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)


and the wavesurfer is not playing.

So while I am reading on documentation of the library, I notice to add this element:

this.wave = WaveSurfer.create({
container: '#waveform',
waveColor: '#D2EDD4',
progressColor: '#46B54D',
backend: 'MediaElement', // this element


so wavesurfer player worked but waves are not showing and the same error in the console has not disappeared:

Error: HTTP error status: 0
at wavesurfer.js:2803
at ZoneDelegate.invoke (zone-evergreen.js:359)
at Object.onInvoke (core.js:39699)
at ZoneDelegate.invoke (zone-evergreen.js:358)
at Zone.run (zone-evergreen.js:124)
at zone-evergreen.js:855
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)


What is wrong with me? Any help please

Continue reading...