前端音频可视化Web Audio实现示例详解

 //创建一个音频上下文、考虑兼容性问题
 let audioctx = new (window.AudioContext || window.webkitAudioContext)();
 //添加一个音频源节点
 let source = audioCtx.createBufferSource();
//res.arrayBuffer是将数据转换为arrayBuffer格式
 fetch(url).then((res) => res.arrayBuffer()).then((res) => {
        //decodeAudioData是将arrayBuffer格式数据转换为audioBuffer
        audioCtx.decodeAudioData(res).then((buffer) => {
          // decodeAudioData解码完成后，返回一个AudioBuffer对象
          // 绘制音频波形图
          draw(buffer);
          // 连接音频源
          source.buffer = buffer;
          source.connect(audioCtx.destination);
          // 音频数据处理完毕
        });
      });

function draw(buffer) {
  // buffer.numberOfChannels返回音频的通道数量，1即为单声道，2代表双声道。这里我们只取一条通道的数据
  let data = [];
  let originData = buffer.getChannelData(0);
  // 存储所有的正数据
  let positives = [];
  // 存储所有的负数据
  let negatives = [];
  // 先每隔50条数据取1条
  for (let i = 0; i < originData.length; i += 50) {
    data.push(originData[i]);
  }
  // 再从data中每10条取一个最大值一个最小值
  for (let j = 0, len = data.length / 10; j < len; j++) {
    let temp = data.slice(j * 10, (j + 1) * 10);
    positives.push(Math.max(...temp));
    negatives.push(Math.min(...temp));
  }
  if (canvas.getContext) {
    let ctx = canvas.getContext("2d");
    canvas.width = positives.length;
    let x = 0;
    let y = 75;
    let offset = 0;
    var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
    // 为渐变添加颜色，参数1表示渐变开始和结束之间的位置（用0至1的占比表示），参数2位颜色
    grd.addColorStop(0, "yellow");
    grd.addColorStop(0.5, "red");
    grd.addColorStop(1, "blue");
    ctx.fillStyle = grd;
    ctx.beginPath();
    ctx.moveTo(x, y);
    // 横坐标上方绘制正数据，下方绘制负数据
    // 先从左往右绘制正数据
    // x + 0.5是为了解决canvas 1像素线条模糊的问题
    for (let k = 0; k < positives.length; k++) {
      ctx.lineTo(x + k + 0.5, y - 50 * positives[k]);
    }
    // 再从右往左绘制负数据
    for (let l = negatives.length - 1; l >= 0; l--) {
      ctx.lineTo(x + l + 0.5, y + 50 * Math.abs(negatives[l]));
    }
    // 填充图形
    ctx.fill();
  }
}

    const audio =document.querySelector('audio')
    //解决音频跨域问题
    audio.crossOrigin ='anonymous'
    const  canvas =document.querySelector('canvas')
    const ctx=canvas.getContext("2d")
        function initCanvas(){
        //初始化canvas
            canvas.width=window.innerWidth*devicePixelRatio
            canvas.height=(window.innerHeight/2)*devicePixelRatio
        }
        initCanvas()
        //将数据提出来
        let dataArray,analyser;
        //播放事件
        audio.onplay=function(){
            //创建一个音频上下文实例
            const audioCtx=new (window.AudioContext || window.webkitAudioContext)();
            //添加一个音频源节点
            const source=audioCtx.createMediaElementSource(audio);
            //分析器节点
             analyser=audioCtx.createAnalyser();
            //fft分析器  越大 分析越细
            analyser.fftSize=512
            //创建一个无符号字节的数组
             dataArray=new Uint8Array( analyser.frequencyBinCount);
            //音频源节点 链接分析器
            source.connect(analyser)
            //分析器链接输出设备
            analyser.connect(audioCtx.destination,)
        }

            requestAnimationFrame(draw)
            //
            const {width ,height}=canvas;
            ctx.clearRect(0,0,width,height)
            //分析器节点分析出的数据到数组中
            ctx.fillStyle='#78C5F7'
           ctx.lineWidth = 2;
            ctx.beginPath();
            //getByteFrequencyData，分析当前音频源的数据 装到dataArray数组中去
            //获取实时数据
            analyser.getByteFrequencyData(dataArray)
            // console.log(dataArray);
            const len =dataArray.length;
            const barWidth=width/len;
            let x=0;
            for(let i=0;i<len;i++){
                const data=dataArray[i];
                const barHeight=data/255*height;
                // ctx.fillRect(x,y,barWidth,height)
        let v = dataArray[i] / 128.0;
        let y = v * height/2;
        if(i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
        x += barWidth;
            }
            // ctx.lineTo(canvas.width, canvas.height/2);
            ctx.stroke();
        }
        draw();

   audio.crossOrigin ='anonymous'