JavaScript通过Web Audio API处理音频，利用AnalyserNode提取频域数据实现可视化；结合Canvas对视频逐帧处理，如灰度转换；通过getUserMedia访问摄像头与麦克风；使用FFmpeg.wasm进行音视频格式转换与剪辑，实现浏览器内高效媒体分析与操作。
JavaScript在现代Web开发中已经能够直接处理音频和视频数据，尤其是在浏览器环境中通过Web APIs实现媒体分析与操作。这为语音识别、音视频剪辑、实时通信、可视化等应用提供了强大支持。
音频处理：使用Web Audio API
Web Audio API 是 JavaScript 中用于处理音频的核心工具，支持音频播放、分析、合成和效果处理。
关键功能包括：
- 音频上下文（AudioContext）：所有音频操作的起点，用于创建、连接和控制音频节点。
- 音频源节点：可来自 <audio> 元素、麦克风输入（通过 getUserMedia）或直接生成波形。
- 分析节点（AnalyserNode）：提取音频的时域和频域数据，常用于频谱图、波形可视化。
- 滤波器和效果节点：实现均衡、混响、延迟等音频处理。
示例：获取音频频率数据
立即学习“Java免费学习笔记（深入）”；
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();
视频处理：Canvas 与 MediaStreamTrack
JavaScript 可结合 <video> 和 <canvas> 元素对视频帧进行逐帧分析和处理。
常见用途：
- 从视频中提取图像帧（getImageData）
- 实现灰度、边缘检测、色彩调整等图像处理
- 录制处理后的视频流（配合 MediaRecorder API）
示例：从视频中抓取帧并绘制到 Canvas
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帧
});
媒体输入：访问摄像头与麦克风
通过 getUserMedia() 可以获取用户的摄像头和麦克风数据流，用于实时音视频处理。
示例：获取视频流并播放
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();
获取的 MediaStream 可作为 Web Audio API 或 Canvas 处理的源，也可用于录制或传输。
高级处理：WebAssembly 与 FFmpeg.wasm
对于复杂任务如格式转换、编码解码、剪辑合并，原生 JavaScript 性能有限。此时可借助 FFmpeg.wasm，它将 FFmpeg 编译为 WebAssembly，在浏览器中运行。
典型应用场景：
- 将录音导出为 MP3
- 视频格式转换（如 MP4 转 GIF）
- 音视频剪辑与合并
虽然性能开销较大，但适合轻量级客户端处理，避免服务端依赖。
基本上就这些。利用现代浏览器的能力，JavaScript 已能胜任大部分前端音视频分析和处理任务，关键是合理组合 API 并注意性能优化。
