JavaScript音频视频处理技巧解析

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;

// 假设已有音频元素
const audioElement = document.getElementById('audio');
const source = audioContext.createMediaElementSource(audioElement);
source.connect(analyser);
analyser.connect(audioContext.destination);

// 获取频域数据
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);

function draw() {
  requestAnimationFrame(draw);
  analyser.getByteFrequencyData(frequencyData);
  // 可将 frequencyData 用于 canvas 绘制频谱
}

draw();

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function processFrame() {
  // 将当前视频帧绘制到 canvas
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  
  // 获取像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 示例：转为灰度
  for (let i = 0; i < data.length; i += 4) {
    const gray = (data[i] + data[i+1] + data[i+2]) / 3;
    data[i] = gray;     // R
    data[i+1] = gray;   // G
    data[i+2] = gray;   // B
  }

  // 写回 canvas
  ctx.putImageData(imageData, 0, 0);
}

// 播放时持续处理
video.addEventListener('play', () => {
  const interval = setInterval(() => {
    if (video.paused || video.ended) {
      clearInterval(interval);
      return;
    }
    processFrame();
  }, 1000 / 30); // 约每秒30帧
});

async function startCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    const video = document.getElementById('video');
    video.srcObject = stream;
  } catch (err) {
    console.error("无法访问摄像头或麦克风", err);
  }
}
startCamera();