如何使用Angular/Typescript获得波形音乐播放器

owfi6suc 于 2023-05-08 发布在 TypeScript

关注(0)|答案(2)|浏览(131)

我的目标是在我的angular 8项目中设置一个简单的音乐播放器，以静态波形显示插入的音乐，类似于Soundclouds Player：

根据我的搜索，这可以通过以下两种方式完成：

峰JS：https://medium.com/better-programming/peaks-js-interact-with-audio-waveforms-b7cb5bd3939a
振幅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');


      }

    }

超文本标记语言

<div id="waveform"></div>

现在的问题是：
1.有没有一些其他的好的做法，如何实现这样一个球员与角，我没有找到。
2.有没有办法让wavesurf在Angular中工作，或者是我的代码错了。

typescript

来源：https://stackoverflow.com/questions/61430300/how-to-get-a-waveform-music-player-with-angular-typescript

2条答案

按热度按时间

insrf1ej1#

是的，有可能，是我干的。检查下面的代码（.ts）：

import {Component, OnInit, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef} from '@angular/core';
import WaveSurfer from 'wavesurfer.js';
import TimelinePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js';
import Regions from 'wavesurfer.js/dist/plugin/wavesurfer.regions.min.js';

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.css']
})

export class GraphComponent implements OnInit, AfterViewInit {

  wave: WaveSurfer = null;
  url = '../../assets/sinus.wav';
  public graph = undefined;

  constructor( private cdr: ChangeDetectorRef) {
  }

  ngOnInit(): void {

  }

  onPreviewPressed(): void {
    if (!this.wave) {
      this.generateWaveform();
    }

    this.cdr.detectChanges();

    Promise.resolve().then(() => this.wave.load(this.url));
  }

  onStopPressed(): void {
    this.wave.stop();
  }

  generateWaveform(): void {
    Promise.resolve(null).then(() => {
      this.wave = WaveSurfer.create({
        container: '#waveform',
        waveColor: 'violet',
        progressColor: 'purple',
        plugins: [
          TimelinePlugin.create({
            container: '#wave-timeline'
          }),
          Regions.create({
            regions: [
              {
                start: 1,
                end: 3,
                loop: false,
                color: 'hsla(400, 100%, 30%, 0.5)'
              }, {
                start: 5,
                end: 7,
                loop: false,
                color: 'hsla(200, 50%, 70%, 0.4)'
              }
            ],
            dragSelection: {
              slop: 5
            }
          })
        ]
      });

      this.wave.on('ready', () => {
        alert('I\'m ready');
        this.wave.play();
      });
    });
  }
}

在HTML文件中：

<div id="waveform"></div>
  <div id="wave-timeline"></div>
  <div *ngIf="wave" class="controls">
    <button (click)="onStopPressed()">Stop</button>
  </div>
  <button (click)="onPreviewPressed()">Click me</button>

赞(0）回复(0）举报 2023-05-08

daupos2t2#

Peaks.js开发人员在这里。我创建了一个最小的演示应用程序，展示了如何在Angular here中开始使用Peaks.js。特别是，看看waveform-view和app组件。

赞(0）回复(0）举报 2023-05-08