Greetings to the Stockoverflow Community,
I am facing a challenge with integrating WaveSurfer.js into a customized section on my Shopify store. Even though I have successfully implemented the section, the waveform visualization is not appearing.
Link to the test page:
Description of the Problem: The WaveSurfer.js library is intended to generate visual audio waveforms on the provided page, but while the audio files can be played, the waveform remains invisible. The console logs indicate that WaveSurfer is ready and there are no direct errors pointing to WaveSurfer.js itself. However, there are repeated notifications about third-party cookies being blocked, although it's uncertain if this is related.
Below is the Liquid/JavaScript snippet where WaveSurfer is initialized and expected to load and display waveforms:
(WaveSurfer.js is loaded via my theme.liquid. It was also previously loaded in the section liquid itself with
<script src="https://unpkg.com/wavesurfer.js"></script>liquidCopy code
<!-- 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 greatly appreciate any guidance or recommendations to address this issue, especially if anyone has encountered similar difficulties with WaveSurfer.js or has insights on how warnings about third-party cookies may affect JavaScript functionality.
Thank you in advance for your assistance!
Ensured that the wavesurfer.min.js script is correctly loaded in the site's theme files and globally accessible. Confirmed that the initialization script for WaveSurfer is appropriately connected to each audio block and verified that it executes after the DOM is fully loaded. Verified that there are no visible browser console errors directly linked to the operation of WaveSurfer. Tested in multiple browsers to eliminate any browser-specific issues.