我希望在我的Angular 8项目中设置一个简单的音乐播放器,可以显示静态波形插入的音乐,类似于Soundcloud的播放器:
据我所搜,这可以通过以下方法之一实现:
Peaks JS: https://medium.com/better-programming/peaks-js-interact-with-audio-waveforms-b7cb5bd3939a
Amplitude JS : https://521dimensions.com/open-source/amplitudejs/docs/configuration/
或 Wavesurfer JS: https://wavesurfer-js.org/
不幸的是,它们都没有像样的文档说明如何正确地将其导入到Angular或TypeScript中。
我尝试使用Wavesurfer JS但失败了。
component.ts:
import { WaveSurfer } from 'wavesurfer.js';
export class MusicComponent {
public wavesurfer
constructor() {
this.wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
this.wavesurfer.load('./assets/img/hollywood.wav');
}
}
html
<div id="waveform"></div>
现在的问题是:
1. 是否有其他好的实践方法可以使用angular实现这样的播放器,我没有找到?
2. 是否有办法使wavesurf在Angular中工作,或者我的代码有问题。