You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Chrome Windows端可录制音频但Android端Chrome无法录制的问题求助

Chrome Windows端可录制音频但Android端Chrome无法录制的问题求助

我正在做一个用于Discord项目的工具网站,功能是录制音频并转成WebM格式。目前遇到了一个头疼的问题:在Firefox浏览器上,不管用什么设备都能正常录制,但Chrome只有Windows系统能用,Android端的Chrome完全无法完成录制。

具体的流程是这样的:录制的音频会先存在本地,然后我把它和一个带用户名的黑色画布合并成WebM文件(这样才能在Discord里正常嵌入),之后有个Discord Bot会询问是否确认这个文件,确认后就会把它转到指定频道。之所以要做成嵌入文件的形式,是因为目前Discord.js或者Python的Bot还没办法直接处理纯音频文件。

以下是我目前的代码:

let mediaRecorder;
let audioChunks = [];
let audioBlob;
let canvas;
let canvasStream;
let audioStream;

function createCanvasWithNickname(name) {
    canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 144;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 400, 144); 
    ctx.fillStyle = 'white';  
    ctx.font = '24px Arial';  
    ctx.textAlign = 'center'; 
    ctx.textBaseline = 'middle'; 
    ctx.fillText(name, 200, 72); 

    return canvas.captureStream(30); 
}

// Funzione per inizializzare l'audio con un metodo alternativo
async function initializeAudio() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    audioStream = stream;
}

document.getElementById('recordButton').addEventListener('click', async () => {
    const name = document.getElementById('nameInput').value.trim();

    canvasStream = createCanvasWithNickname(name);
    await initializeAudio();
    const combinedStream = new MediaStream([...canvasStream.getTracks(), ...audioStream.getTracks()]);
    mediaRecorder = new MediaRecorder(combinedStream, { mimeType: 'video/webm' });
    mediaRecorder.start();
    mediaRecorder.ondataavailable = (event) => {
        audioChunks.push(event.data);
    };

    mediaRecorder.onstop = () => {
        audioBlob = new Blob(audioChunks, { type: 'video/webm' });
        const audioUrl = URL.createObjectURL(audioBlob);
        document.getElementById('audioPreview').src = audioUrl;

        document.getElementById('recordButton').disabled = false;
        document.getElementById('stopButton').disabled = true;
        document.getElementById('sendButton').disabled = false;
    };

    document.getElementById('recordButton').disabled = true;
    document.getElementById('stopButton').disabled = false;
});

document.getElementById('stopButton').addEventListener('click', () => {
    mediaRecorder.stop();
});

document.getElementById('sendButton').addEventListener('click', async () => {
    const name = document.getElementById('nameInput').value.trim();

    if (!name) {
        alert('Devi inserire un nickname!');
        return; 
    }

    const formData = new FormData();
    formData.append('file', audioBlob, 'audio.webm');
    formData.append('username', name);

    try {
        await fetch('webhookhere', {
            method: 'POST',
            body: formData
        });
        alert('Audio inviato a Discord con successo!');
    } catch (error) {
        console.error('Errore durante l\'invio del file:', error);
    }
});

我已经试过各种可能的解决办法,也查了大量的资料,但找到的都是和我有同样问题的用户,根本没人给出有效的解决方案,实在没办法了才来求助!

备注:内容来源于stack exchange,提问作者Jesgran

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 14:18:00