Wavesurfer 不适用于 ionic 2 android

Question

我正在尝试在我的 Ionic 2 应用程序中使用 WaveSurfer javascript 库。

我将 min.js 放在我的 www 文件夹下，然后将其导入 index.html，我在 .ts 文件中声明了 WaveSurfer 变量。

  initContainer() {
    this.wavesurfer = WaveSurfer.create({
        container: document.getElementById("container"),
        waveColor: 'violet',
        progressColor: 'purple'
    });

    this.wavesurfer.load(this.filePath + this.directoryName + "/" + this.audioFileName);    
  }

我初始化容器。

<div id="container"><wave style="display: block; position: relative; -webkit-user-select: none; height: 128px; width: 100%; overflow-x: auto; overflow-y: hidden;"><wave style="position: absolute; z-index: 2; left: 0px; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: none; box-sizing: border-box; border-right-style: solid; border-right-width: 1px; border-right-color: rgb(51, 51, 51);"><canvas style="position: absolute; left: 0px; top: 0px; bottom: 0px;"></canvas></wave><canvas style="position: absolute; z-index: 1; left: 0px; top: 0px; bottom: 0px;"></canvas></wave></div>

容器已经创建，所以我认为导入工作正常。

  play() {
    this.wavesurfer.play();
  }

按下播放按钮后，没有任何反应，容器是空的。所以问题是，我可以使用这个库在 Android 上可视化我的音频吗？

还是我哪里弄错了？

（顺便说一下，我尝试了我的 "own" 音频文件，这些文件是用 cordova-audio-input 录制的（我也试过用 cordova-media-plugin 录制的），此外还有默认的 rightones。所有这些显示空容器，它们不会启动。）

如有任何帮助，我们将不胜感激。

Answer 1

我设法解决了我的问题。我没有使用路径，而是使用 cordova 文件插件 (readAsDataURL()) 从音频创建了一个 base64 URL，现在它可以正常工作了。

但是 ready 事件对我不起作用，

wavesurfer.on('ready', function () {
    this.wavesurfer.play();
});

我只是在没有 ready 事件的情况下使用它，因为我在函数中使用它，当 wavesurfer object必须准备好，

    this.wavesurfer.play();

现在它正在工作，而且是史诗般的（虽然它有点慢，当我用一分钟的音频尝试它时，所以如果我录制一个八小时的音频会很痛，但这已经是另一个问题）。

编辑：我必须修复自己，因为 on-ready 事件正在工作，只是我必须以某种方式将全局变量绑定到事件。

Wavesurfer 不适用于 ionic 2 android

Wavesurfer not working with ionic 2 android

android

ionic2

wavesurfer.js