Wavesurfer.js waveform not showing

[baslefeber]

Hello Shopify Developer Community,

I am encountering an issue with integrating WaveSurfer.js into a custom page section on my Shopify store (https://thevocalmarket.com/). Despite successful implementation of the section, the waveform visualization isn't displaying.

URL to page to test: https://thevocalmarket.com/pages/wavesurfer-test-page

Issue Description: The WaveSurfer.js library is supposed to generate visual audio waveforms on the page linked above, but while the audio files can be played, no waveform is visible. The console logs indicate that WaveSurfer is ready and there are no errors directly pointing to WaveSurfer.js itself. However, I do see repeated messages about third-party cookies being blocked, though I'm unsure if this is related.

Here is the Liquid/JavaScript snippet where WaveSurfer is initialized and supposed to load and display waveforms:

(Wavesurfer.js is loaded via my theme.liquid. Also loaded it in the section liquid itself before with 

<script src="https://unpkg.com/wavesurfer.js"></script>

) 

<!-- WaveSurfer Initialization -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var players = {};

    {% for block in section.blocks %}
        players['{{ block.id }}'] = WaveSurfer.create({
            container: '#wave-{{ block.id }}',
            waveColor: '#4F4A85',
            progressColor: '#383351',
            cursorColor: 'transparent',
            barWidth: 2,
            height: 60,
            responsive: true,
            autoCenter: true
        });

        players['{{ block.id }}'].load('{{ block.settings.audio_url }}');

        players['{{ block.id }}'].on('ready', function() {
            console.log('WaveSurfer is ready for block ' + '{{ block.id }}');
        });

        players['{{ block.id }}'].on('error', function(e) {
            console.error('WaveSurfer error:', e);
        });
    {% endfor %}

    window.togglePlay = function(blockId) {
        var player = players[blockId];
        if (player) {
            player.playPause();
        }
    };
});
</script>

I would appreciate any guidance or suggestions to resolve this issue, particularly if anyone has experienced similar challenges with WaveSurfer.js or has insights into how third-party cookie warnings might impact JavaScript functionality.

Thank you in advance for your help!