0

我正在尝试显示歌曲的波形，就像 SoundCloud 为每个单独的曲目所做的那样，但我遇到了一些困难。

到目前为止，这是我认为是正确的开始。

  $scope.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  $scope.analyser = $scope.audioCtx.createAnalyser();

  $scope.myAudio = new Audio;
  $scope.myAudio.src = "http://localhost:9000/mp3/song.mp3";

  // Create a MediaElementAudioSourceNode
  // Feed the HTMLMediaElement into it
  $scope.source = $scope.audioCtx.createMediaElementSource( $scope.myAudio );

  $scope.source.connect( $scope.analyser );

  $scope.analyser.fftSize = 64;

  $scope.bufferLength = $scope.analyser.frequencyBinCount;
  $scope.dataArray = new Uint8Array( $scope.bufferLength );
  $scope.newDataArray = new Float32Array( $scope.analyser.fftSize );

  $scope.analyser.getByteTimeDomainData( $scope.dataArray );

  $scope.canvas = document.querySelector('.visualizer');
  $scope.canvasCtx = $scope.canvas.getContext("2d");

  function draw() {

    $scope.WIDTH = $scope.canvas.width;
    $scope.HEIGHT = $scope.canvas.height;

    $scope.drawVisual = requestAnimationFrame( draw );

    $scope.analyser.getByteTimeDomainData( $scope.dataArray );

    $scope.canvasCtx.fillStyle = 'rgb(200, 200, 200)';
    $scope.canvasCtx.fillRect(0, 0, $scope.WIDTH, $scope.HEIGHT);

    $scope.canvasCtx.lineWidth = 2;
    $scope.canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
  };

  draw();

好吧，这显然只是部分的，但最终结果将是显示整个轨道，轨道的波形从开始到结束在画布的宽度上清晰地表示。

非常感谢您对此的帮助。

尊敬，

朱尔斯

4

0 回答 0