当容器不可见(隐藏)时，WaveSurfer.js波形不出现

本文概述

• A.强制显示容器并将其再次隐藏
• B.手动指定波形宽度

几天前, 我需要使用众所周知的库WaveSurfer.js, 该库是可自定义的音频波形可视化, 基于Web Audio API和HTML5 Canvas构建。和往常一样, 初始化非常简单, 我从没遇到任何问题。但是, 我在Bootstrap 4选项卡中使用此功能时注意到一个有趣的行为。在Bootstrap 4中, 只有主选项卡可见, 其余的最初被隐藏。因此, 当我在其中一个隐藏的选项卡中初始化WaveSurfer实例时, 根本就不在那儿。但是, 当我在同一页中但在一个可见容器内初始化该波形时, 该波形似乎没有问题。

WaveSurfer存在此问题, 当不可见应绘制波形的容器或父容器, 因此没有定义尺寸(宽度和高度), 因此, 在将fillParent属性设置为true的情况下初始化WaveSurfer时, 波形当然是绘制的, 但是宽度为0px, 因为它不能确定容器的宽度！

在这篇简短的文章中, 我们将向你介绍在容器最初被隐藏时如何使用WaveSurfer从音频中绘制波形。

A.强制显示容器并将其再次隐藏

对于某些人来说可能有问题的第一个解决方案是在绘制波形后不久使div可见, 然后在短时间内将其隐藏。这样可确保不会出现没有尺寸的隐藏div的问题, 因为将绘制div, 因此它具有浏览器指定的尺寸, 并且Wavesurfer将能够自动确定波形宽度。

例如, 给定以下标记, 其中隐藏了波形的容器：

<div id="hidden-container" style="display: none;">
  <div id="waveform"></div>
</div>

即使最初使用以下JavaScript隐藏容器, 我们也应该能够正确渲染波形：

// Initialize a simple instance of WaveSurfer
var wavesurfer = WaveSurfer.create({
    container: '#waveform'
});

// Load an audio file
wavesurfer.load('/myaudio.mp3');

// Attach on ready listener to WaveSurfer
wavesurfer.on('ready', function () {
    // Make the container temporarily visible
    document.getElementById("hidden-container").style.display = '';

    // Draw the waves
    wavesurfer.drawBuffer();

    // Hide the container once again ! Now WaveSurfer should have been rendered normally
    document.getElementById("hidden-container").style.display = 'none';
});

B.手动指定波形宽度

如上所述, 初始化wavesurfer实例时最初隐藏容器或波形本身时会发生问题。因此, 如果你不想应用第一个解决方案, 则可以选择该解决方案, 从而解决了手动指定波形宽度的问题。可以在初始化期间将fillParent属性设置为false, 并通过minPxPerSec属性为在波上渲染的每一秒指定最小宽度(以像素为单位)。

这种方法的缺点是失去了插件提供的响应能力：

// Initialize a simple instance of WaveSurfer
var wavesurfer = WaveSurfer.create({
    container: '#waveform', // Prevent autosize
    fillParent: false, // Define a minimum amount of pixels that should be used
    // to draw a single second of the sound. This defines a
    // specific width to the 
    minPxPerSec: 10
});

// Load an audio file
wavesurfer.load('/myaudio.mp3');

即使容器或元素本身是隐藏的, 使用任何上述解决方案也可以保证波形的呈现。

编码愉快！