1

我们正在使用 Wavesurf JS 创建一个带有波形 plaver 的声音库。为了优化加载时间，我们将画布中生成的波形保存为图像，这样我们就不必在每次加载声音时都生成它，到目前为止效果很好。

但是为了保存图像，我们需要等待画布加载，我们发现的唯一方法是使用 setTimeout。

wavediv = WaveSurfer.create({
    container: '#canvasRender',
    waveColor: '#FFFFFF',
    progressColor: '#000000',
    cursorColor:'rgba(0,0,0,0)',
    splitChannels: true,
    height : 75,
    plugins: [
]
});

wavediv.load("sounds/test.mp3");
window.setTimeout(function(){
    var dataImg = wavediv.exportImage('image/png');
    saveWave(dataImg);
},600);

saveWave()只是一个调用 AJAX 并将数据发送到服务器并我们保存它的函数，效果很好。问题是我们不想依赖，window.setTimeout()因为我们的 a 被限制为 0.6 秒，就像我们在这个例子中一样（600），如果渲染时间超过 0.6 秒，那么它会保存一个空图像。

所以我正在寻找某种回调函数或监听器，它saveWave()只会在波形完成加载时触发。

例子：

wavediv.load("sounds/test.mp3", function(){
   var dataImg = wavediv.exportImage('image/png');
   saveWave(dataImg);
});

或者

wavediv.ready(function () {
    var dataImg = wavediv.exportImage('image/png');
    saveWave(dataImg);
});

我在另一篇文章中发现了类似的东西，但它没有用：

wavediv.on("ready", function () {
    var dataImg = wavediv.exportImage('image/png');
    saveWave(dataImg);
});

同样的问题：https ://github.com/katspaugh/wavesurfer.js/issues/1727并且仅通过setTimeout():(

4

0 回答 0