1

我正在尝试用 howler js 创建一个收音机播放器，它工作正常。但我试图将其可视化为波形。但它不起作用。画布中的线条总是笔直的。

let dataArray = [];
let bufferLength = null;
let analyser = null;
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
let WIDTH = canvas.width;
let HEIGHT = canvas.height;
let isPlaying = false;

let sound = new Howl({
                src: "http://stream.zeno.fm/6quxyw3stzzuv",
                format: ['mp3', 'aac']
            });
sound.on('play', function() {
  analyser = Howler.ctx.createAnalyser();
  Howler.masterGain.connect(analyser);
  analyser.connect(Howler.ctx.destination);
 
  analyser.fftSize = 1024;
  analyser.smoothingTimeConstant = 0.5;
  bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(analyser.fftSize);
  draw();
  });

function draw() {
  // analyser.getByteFrequencyData(dataArray);
  analyser.getByteTimeDomainData(dataArray);
   requestAnimationFrame(draw);
  
  var sliceWidth = WIDTH * 1.0 / bufferLength;
  var x = 0;
  var frequencyBins = analyser.fftSize / 2;
  var scale = Math.log(frequencyBins - 1) / WIDTH;
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, WIDTH, HEIGHT);
  
  ctx.lineWidth = 4;
  ctx.strokeStyle = "#fff";
  ctx.beginPath();
  x = 0;
  console.log( dataArray[0])
  for (var i = 0; i < bufferLength; i++) {
    var v = dataArray[i] / 128.0;
    
    
    var y = v * HEIGHT / 2;

    if (i === 0) {
      ctx.moveTo(x, y );
    } else {
      ctx.lineTo(x, y);
    }
    x = i*sliceWidth;
  }
  ctx.lineTo(WIDTH, dataArray[0] / 128.0 * HEIGHT / 2);
  ctx.stroke();
}

function play() {
  if(isPlaying) {
    isPlaying = false;
    sound.pause();
  } else {
    isPlaying = true;
    sound.play();
  }
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.min.js"></script>

<canvas id="canvas" width="1000" height="250"></canvas>

<button class="play" onclick="play()">Play</button>

知道我做错了什么吗？

这是我创建的笔：https ://codepen.io/surajkhanal/pen/JjYgxpM?editors=1111 谢谢。

4

0 回答 0