Question

我试图显示一首歌曲的波形，就像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();

这显然只是局部的，但最终的结果是显示整个轨道，轨道的波形在画布的宽度上从头到尾清晰地表示。

非常感谢这方面的帮助。

此致，

朱

使用AudioContext显示歌曲的整体波形

0 个答案: