JavaScript模拟麦克风发送音频文件报EncodingError问题排查

EncodingError报错和代码逻辑缺陷主要来自四点：

• fetch请求加了mode: 'no-cors'配置，该模式下返回的是不透明响应，无法读取到音频文件的真实二进制内容，调用arrayBuffer()拿到的是空数据，后续decodeAudioData解码空数据必然抛出编码错误。
• 直接初始化AudioContext不符合浏览器自动播放策略，没有用户交互触发的情况下，音频上下文会处于挂起状态，无法正常生成输出流。
• 直接覆盖原生getUserMedia没有做请求过滤，也没有给返回的音频轨道补全真实麦克风的标准属性，容易被平台拦截。
• 本地静态文件服务没有配置跨域头，正常模式下的fetch请求会被浏览器跨域策略拦截。

1. 先修改本地8000端口静态服务的响应配置，给所有响应加上跨域头Access-Control-Allow-Origin: *，允许Discord页面对本地资源发起跨域请求。
2. 打开Discord语音页面，先点击页面任意位置（比如语音频道切换按钮）触发用户交互状态，避免音频上下文被浏览器自动播放策略拦截。
3. 在浏览器控制台粘贴运行以下代码，替换原生麦克风调用逻辑：

const originalGetUserMedia = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
navigator.mediaDevices.getUserMedia = async (constraints) => {
    // 非音频请求走原生逻辑，不影响摄像头等其他设备调用
    if (!constraints?.audio) return originalGetUserMedia(constraints);

    // 初始化音频上下文并强制唤醒
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    await audioContext.resume();

    // 正常请求本地音频文件，不使用no-cors模式
    const res = await fetch('http://127.0.0.1:8000/enemey.ogg');
    if (!res.ok) throw new Error(`音频加载失败，状态码：${res.status}`);
    const audioBuf = await audioContext.decodeAudioData((await res.arrayBuffer()).slice(0));

    // 初始化音频节点
    const audioSource = audioContext.createBufferSource();
    const streamDest = audioContext.createMediaStreamDestination();
    const gainNode = audioContext.createGain();
    // 调整音量到正常麦克风水平，避免音量异常
    gainNode.gain.value = 0.8;

    // 连接音频链路
    audioSource.buffer = audioBuf;
    audioSource.loop = true;
    audioSource.connect(gainNode);
    gainNode.connect(streamDest);
    audioSource.start(0);

    // 给音频轨道补全真实麦克风属性，降低平台检测概率
    const [audioTrack] = streamDest.stream.getAudioTracks();
    Object.assign(audioTrack, {
        label: '默认麦克风',
        enabled: true,
        muted: false,
        readyState: 'live'
    });

    return streamDest.stream;
};

4. 代码运行后，在Discord语音设置里手动切换一次麦克风输入设备，触发getUserMedia重新调用即可生效。

内容的提问来源于stack exchange，提问作者Davidawesome02