Question

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

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

factor Workclass has new levels Local-gov, Self-emp-inc, State-gov, Without-pay

我初始化容器。

  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>

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

或者我在某处犯了错误？

（顺便说一下，我尝试了我自己的＆＃34;音频文件，这些音频文件已经用cordova-audio-input录制（我也尝试过使用cordova-media-plugin），而且还有默认版本。它们显示空容器，但它们无法启动。）

任何帮助都将不胜感激。

Answer 1

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

然而 ready 事件对我不起作用，

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

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

    this.wavesurfer.play();

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

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

Wavesurfer不使用离子2 android

1 个答案: