使用Wavesurfer与页脚组件Angular 6

Question

我正在使用wavesurfer.js在我的应用程序中渲染和播放音频。

它位于HTML听起来像

<div id=wave><div>

并在组件中创建如下：

this.episode.wavesurfer = WaveSurfer.create({container:'#wave',
    waveColor: 'grey',
    progressColor: 'hsla(200, 100%, 30%, 0.5)',
    cursorColor: '#ffffff',
    cursorWidth: 0,
    barWidth: 3,
    hideScrollbar: true,
    height: 150,
    backend: 'MediaElement'
});

效果很好。但是，我想复制一个能够用页脚控制音频的soundcloud外观。

这很容易实现，但是当用户使用嵌入的waveurfer对象导航离开页面时会发生问题。这会停止播放音频，因为播放器的音频播放器方面嵌入页面而不是页脚。

有没有办法将HTML5音频播放器与波形的直观表示分开？即。让播放器位于页脚中并且可视化表示单独嵌入主页面组件中？

我可以通过在页脚中创建一个隐藏的waveurfer并让它控制主页面组件中的重复静音版本来解决这个问题。

或者，是否有一个很好的开源可视化替代waveurfer？我还需要知道如何创建PCM数据... waveurfer对此有一个很好的功能...