JavaScript麦克风流传输至Java：无法将Float32Array转为音频文件

核心原因 #

你直接将前端传来的原始Float32格式PCM数据写入文件，而音频播放器无法识别缺少元数据的原始PCM流。必须将原始音频数据封装为标准格式（如WAV），添加包含采样率、位深度、声道数等关键信息的文件头，播放器才能正确解析音频内容。

具体修复步骤 #

1. 前端：传递音频元数据并发送二进制音频数据 #

先通过WebSocket发送音频元数据（采样率、声道数），再直接发送Float32格式的二进制音频数据：

jssocket.onopen = function(e) {
    console.log("[open] Connection established");
    // 发送音频元数据
    jssocket.send(JSON.stringify({
        type: "metadata",
        sampleRate: context.sampleRate, // AudioContext默认采样率通常为44100Hz
        channels: 1 // 麦克风默认单声道
    }));
};

bufferDetectorNode.port.onmessage = (event) => {
    // 直接发送Float32Array二进制数据
    jssocket.send(event.data);
};

2. 后端：处理元数据并封装WAV格式 #

后端先接收元数据初始化WAV文件头，再将Float32数据转换为16位PCM格式并写入文件：

import org.json.JSONObject;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import org.apache.commons.io.FileUtils;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.BinaryMessage;

private File audioFile = new File("recording.wav");
private int sampleRate;
private int channels = 1;
private boolean headerWritten = false;

@Override
public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
    if (message instanceof TextMessage) {
        // 处理元数据消息
        String content = ((TextMessage) message).getPayload();
        JSONObject json = new JSONObject(content);
        if ("metadata".equals(json.getString("type"))) {
            sampleRate = json.getInt("sampleRate");
            channels = json.getInt("channels");
            writeWavHeader();
            headerWritten = true;
        }
    } else if (message instanceof BinaryMessage) {
        // 处理二进制音频数据
        ByteBuffer payload = ((BinaryMessage) message).getPayload();
        byte[] floatBytes = getByteArrayFromByteBuffer(payload);
        byte[] pcmBytes = floatBytesTo16BitPcm(floatBytes);
        FileUtils.writeByteArrayToFile(audioFile, pcmBytes, true);
    }
}

// 写入WAV文件头
private void writeWavHeader() throws IOException {
    int bitsPerSample = 16;
    int byteRate = sampleRate * channels * bitsPerSample / 8;
    int blockAlign = channels * bitsPerSample / 8;
    // 初始总长度写0，不影响播放（若需精确长度可在录制结束后更新）
    int totalAudioLen = 0;
    int totalLen = totalAudioLen + 36;

    ByteBuffer header = ByteBuffer.allocate(44);
    header.put("RIFF".getBytes());
    header.putInt(totalLen);
    header.put("WAVE".getBytes());
    header.put("fmt ".getBytes());
    header.putInt(16); // PCM格式标识长度
    header.putShort((short) 1); // 线性PCM编码
    header.putShort((short) channels);
    header.putInt(sampleRate);
    header.putInt(byteRate);
    header.putShort((short) blockAlign);
    header.putShort((short) bitsPerSample);
    header.put("data".getBytes());
    header.putInt(totalAudioLen);

    FileUtils.writeByteArrayToFile(audioFile, header.array(), false);
}

// 将Float32字节数组转换为16位PCM字节数组
private byte[] floatBytesTo16BitPcm(byte[] floatBytes) {
    int floatCount = floatBytes.length / 4;
    byte[] pcmBytes = new byte[floatCount * 2];
    // JavaScript TypedArray使用小端序，需保持一致
    ByteBuffer floatBuffer = ByteBuffer.wrap(floatBytes).order(ByteOrder.LITTLE_ENDIAN);
    
    for (int i = 0; i < floatCount; i++) {
        float sample = floatBuffer.getFloat();
        // 将[-1.0, 1.0]的float映射为[-32768, 32767]的16位整数
        short pcm = (short) (sample * 32767);
        pcmBytes[i * 2] = (byte) (pcm & 0xFF);
        pcmBytes[i * 2 + 1] = (byte) ((pcm >> 8) & 0xFF);
    }
    return pcmBytes;
}

private static byte[] getByteArrayFromByteBuffer(ByteBuffer byteBuffer) {
    byte[] bytesArray = new byte[byteBuffer.remaining()];
    byteBuffer.get(bytesArray, 0, bytesArray.length);
    return bytesArray;
}

3. 关键注意事项 #

• Float32转16位PCM: 前端采集的音频数据范围是[-1.0, 1.0]，必须映射到16位整数的[-32768, 32767]范围，否则音频会失真或无声音。
• 字节序一致性: JavaScript的TypedArray默认使用小端序，后端解析时需保持相同字节序。
• WAV文件头: 包含音频的核心元数据，是播放器识别音频的必要条件。

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