本文档介绍了如何从 HTMLAudioElement 创建多通道 MediaElementAudioSourceNode。通常，直接从 HTMLAudioElement 创建的 MediaElementAudioSourceNode 默认只有两个通道。本文将介绍如何通过调整 channelCount 和 channelInterpretation 属性，以及使用 ChannelSplitter 节点，来正确处理和分析多通道音频数据。通过示例代码，演示了如何将多通道音频的各个通道分离并进行可视化分析。
从 HTMLAudioElement 创建多通道音频源
在 Web Audio API 中，MediaElementAudioSourceNode 允许你将 HTML5 <audio> 元素作为音频源。然而，当处理多通道音频文件（例如，Ambisonics 格式）时，直接创建的 MediaElementAudioSourceNode 可能无法正确识别所有通道。默认情况下，它可能只显示两个通道。为了解决这个问题，我们需要手动配置音频节点的属性，并使用 ChannelSplitter 节点来分离各个通道。
步骤 1: 加载多通道音频文件
首先，你需要一个包含多通道音频的 .wav 文件。可以使用 HTML5 <audio> 元素加载这个文件：
<audio src="tracktest.wav"></audio>
确保你的音频文件是有效的，并且浏览器可以正确加载它。
步骤 2: 创建 MediaElementAudioSourceNode
接下来，使用 AudioContext 创建 MediaElementAudioSourceNode。关键在于配置 outputChannels 和 channelInterpretation 属性。
const audioContext = new AudioContext();
const audioElement = document.querySelector('audio');
const track = audioContext.createMediaElementSource(audioElement);
// 设置输出通道数为音频文件的实际通道数
track.outputChannels = 4; // 假设音频文件有 4 个通道
// 设置通道解释为 'discrete'，表示每个通道都是独立的
track.channelInterpretation = 'discrete';outputChannels 属性指定了音频节点的输出通道数。channelInterpretation 属性定义了如何解释这些通道。设置为 'discrete' 表示每个通道都包含独立的音频信息，而不是立体声或环绕声的编码。
步骤 3: 使用 ChannelSplitter 分离通道
为了能够单独处理每个通道，可以使用 ChannelSplitter 节点。
const splitter = audioContext.createChannelSplitter(4); // 创建一个 4 通道的 splitter track.connect(splitter);
ChannelSplitter 节点将多通道音频流分离成独立的单声道流。创建 ChannelSplitter 时，需要指定通道数，这应该与音频文件的实际通道数匹配。
步骤 4: 分析和可视化通道
现在，你可以将每个通道连接到不同的分析器或处理器。例如，可以使用 AnalyserNode 来可视化每个通道的波形。
const analyser = audioContext.createAnalyser(); analyser.fftSize = 2048; // 将第一个通道连接到分析器 splitter.connect(analyser, 0, 0); // splitter.connect(destination, output, input) // 你可以取消注释以下行来分析其他通道 // splitter.connect(analyser, 1, 0); // splitter.connect(analyser, 2, 0); // splitter.connect(analyser, 3, 0);
上述代码将 ChannelSplitter 的第一个输出（通道 0）连接到 AnalyserNode。你可以重复这个过程，将其他通道连接到不同的分析器或处理器。
步骤 5: 可视化音频数据
最后，使用 Canvas API 可视化音频数据。
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
const canvas = document.getElementById("oscilloscope");
const canvasCtx = canvas.getContext("2d");
function draw() {
requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = "rgb(200, 200, 200)";
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = "rgb(0, 0, 0)";
canvasCtx.beginPath();
const sliceWidth = canvas.width * 1.0 / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = v * canvas.height / 2;
if (i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);
}
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height / 2);
canvasCtx.stroke();
}
draw();这段代码从 AnalyserNode 获取时域数据，并在 Canvas 上绘制波形。
完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>Multitrack Experiment</title>
</head>
<body>
<h1> Multitrack Experiment </h1>
<p>This is a little experiment to see if all channels of a multichannel audio file are played back,
which they are.</p>
<p>The audio file contains four different waveforms on four channels. (0 -> sine, 1 -> saw, 2 -> square, 3 -> noise)</p>
<audio src="tracktest.wav" controls></audio>
<button>
<span>Play/Pause</span>
</button>
<br/>
<br/>
<canvas id="oscilloscope" width="512" height="256"></canvas>
<script>
const audioContext = new AudioContext();
const audioElement = document.querySelector('audio');
const track = audioContext.createMediaElementSource(audioElement);
track.outputChannels = 4;
track.channelInterpretation = 'discrete';
// track.connect(audioContext.destination); // 直接连接到 destination 可能会导致音量过大
const splitter = audioContext.createChannelSplitter(4);
track.connect(splitter);
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
splitter.connect(analyser, 0, 0);
// splitter.connect(analyser, 1, 0);
// splitter.connect(analyser, 2, 0);
// splitter.connect(analyser, 3, 0);
const playButton = document.querySelector('button');
let playing = false;
playButton.addEventListener('click', function() {
if (audioContext.state === 'suspended') {
audioContext.resume();
}
if (!playing) {
audioElement.play();
playing = true;
} else {
audioElement.pause();
playing = false;
}
}, false);
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
const canvas = document.getElementById("oscilloscope");
const canvasCtx = canvas.getContext("2d");
function draw() {
requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = "rgb(200, 200, 200)";
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = "rgb(0, 0, 0)";
canvasCtx.beginPath();
const sliceWidth = canvas.width * 1.0 / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = v * canvas.height / 2;
if (i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);
}
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height / 2);
canvasCtx.stroke();
}
draw();
</script>
</body>
</html>注意事项
- 确保音频文件具有正确的通道数，并且 outputChannels 和 ChannelSplitter 的通道数与之匹配。
- 如果直接将 track 连接到 audioContext.destination，可能会导致音量过大。最好通过 GainNode 调整音量。
- 某些浏览器可能需要用户交互才能启动 AudioContext。
总结
通过调整 MediaElementAudioSourceNode 的 outputChannels 和 channelInterpretation 属性，并使用 ChannelSplitter 节点，可以有效地处理和分析多通道音频数据。这对于需要独立处理每个通道的应用，如空间音频处理、音频分析和可视化非常有用。
