Wavesurfer.js waveform not showing

Retired Boards Appdev Store Design
,

Topic summary

A developer is troubleshooting WaveSurfer.js integration on a Shopify custom page section where audio waveforms fail to display despite successful audio playback.

Current Status:

  • Audio files play correctly but waveform visualization is missing
  • Console logs confirm WaveSurfer is ready with no direct errors
  • Third-party cookie blocking warnings appear repeatedly (unclear if related)

Technical Details:

  • WaveSurfer.js loaded via theme.liquid
  • Implementation includes initialization code with configuration for waveform appearance (colors, height, responsive settings)
  • Test page available at thevocalmarket.com/pages/wavesurfer-test-page

Note: The provided JavaScript code snippet appears corrupted or reversed, making detailed code review difficult.

The developer seeks guidance from those with similar WaveSurfer.js experience, particularly regarding potential third-party cookie impact on JavaScript functionality. The issue remains unresolved with no responses yet.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

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

)

<!-- 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!