Wavesurfer.js 波形未显示在 Shopify 自定义设置中

Question

Stockoverflow 社区您好，

我在将 WaveSurfer.js 集成到 Shopify 商店的自定义页面部分时遇到问题。尽管成功实施了该部分，但波形可视化并未显示。

要测试的页面 URL：https://thevocalmarket.com/pages/wavesurfer-test-page

问题描述：WaveSurfer.js 库应该在上面链接的页面上生成可视音频波形，但是虽然可以播放音频文件，但看不到波形。控制台日志表明 WaveSurfer 已准备就绪，并且没有直接指向 WaveSurfer.js 本身的错误。但是，我确实看到有关第三方 cookie 被阻止的重复消息，尽管我不确定这是否相关。

这是 Liquid/JavaScript 片段，其中 WaveSurfer 被初始化并应该加载和显示波形：

（Wavesurfer.js 是通过我的 theme.liquid 加载的。之前也将其加载到液体部分中

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

我将不胜感激任何解决此问题的指导或建议，特别是如果有人在使用 WaveSurfer.js 时遇到过类似的挑战，或者对第三方 cookie 警告可能如何影响 JavaScript 功能有深入的了解。

提前感谢您的帮助！

确保 wavesurfer.min.js 脚本正确加载到站点的主题文件中并在全球范围内可用。 检查 WaveSurfer 的初始化脚本是否正确绑定到每个音频块，并确认它在 DOM 完全加载后运行。 已验证浏览器控制台中不存在与 WaveSurfer 操作直接相关的可见错误。 在多个浏览器中进行了测试，以排除特定于浏览器的问题。

Answer 1

您的

base.css

中有这条规则：

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

这与 WaveSurfer 的渲染相冲突，根据 此评论

一个简单的解决方案是：

.waveform div:empty {
  display: block;
}