0

我正在尝试在 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上可视化我的音频吗？

还是我只是在某个地方犯了错误？

（顺便说一句，我尝试了我的“自己的”音频文件，这些文件是用cordova-audio-input录制的（我也试过用cordova-media-plugin），此外还有默认的权利。它们都显示空容器，它们确实没有开始。）

任何帮助，将不胜感激。

4

1 回答 1

0

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

但是准备好的事件对我不起作用，

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

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

    this.wavesurfer.play();

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

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

于 2017-03-24T10:04:55.570 回答