Wavesurfer.js: Loading event doesn not trigger

[SGDAT]

Hi there. Thanks for this amazing plugin.

I too seem to be having an issue with this. This is for mp3 files as large as 60mb. My code is as follows:-

        wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'black',
            progressColor: 'purple',
            barWidth: 2,
            barHeight: 1, // the height of the wave
            barGap: null
        });

        document.getElementById('startsection').classList.add('d-none');
        document.getElementById('loadingsection').classList.remove('d-none');
        wavesurfer.on('ready', function () {
            wavesurfer.play();
            document.getElementById('playsection').classList.remove('d-none');
            document.getElementById('pausesection').classList.remove('d-none');
            document.getElementById('loadingsection').classList.add('d-none');
        });

        wavesurfer.on("loading", function (progress) {
            document.getElementById('loadingValue').innerText = progress + "%"
        });

        wavesurfer.load(url);

The ready event works fine. But not the loading event.

I have developed this project within a asp.net core blazor app. I'm not sure if blazor has its own loading event which it overwrites wavesurfer with?

Any help will be much appreciated.

_Originally posted by @SGDAT in https://github.com/katspaugh/wavesurfer.js/issues/1797#issuecomment-562101512_

[thijstriemstra]

Your server needs to expose the Content-Length header, otherwise the loading progress cannot be calculated. Can you verify this is being sent as well @SGDAT?

[SGDAT]

Thanks for the help. I updated my stream link to send back the content-length and it worked well. I now have a new issue (although this might be its own issue). The component no longer plays in Microsoft edge.

I think it has something to do with the loading event now being used but not certain. Prior to using the loading event, it worked fine in edge.

[thijstriemstra]

the component no longer plays in Microsoft edge.

follow these instructions: https://github.com/katspaugh/wavesurfer.js/issues/1832#issuecomment-568461053