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
相关产品推荐
相关产品推荐

