LLM(3) : 浏览器录制16K的音频并上传到后端
可被阿里云[qwen-audio-asr]大模型识别
HTML
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>录音并上传</title></head><body><button id="recordButton">开始/停止录音</button><audio id="audioPlayback" controls style="display:none;"></audio><script>let mediaRecorder;let audioChunks = [];let recording = false;document.getElementById('recordButton').addEventListener('click', () => {if (recording) {// 停止录音stopRecording();} else {// 开始录音startRecording();}});async function startRecording() {try {const stream = await navigator.mediaDevices.getUserMedia({audio: true});// 创建 MediaRecorder 实例，但不连接到任何音频输出mediaRecorder = new MediaRecorder(stream, {mimeType: 'audio/webm; codecs=opus'});mediaRecorder.ondataavailable = event => {audioChunks.push(event.data);};mediaRecorder.onstop = async () => {const audioBlob = new Blob(audioChunks, {type: 'audio/webm; codecs=opus'});const audioUrl = URL.createObjectURL(audioBlob);const audio = document.getElementById('audioPlayback');audio.src = audioUrl;audio.style.display = 'block';// 自动上传录音文件到后端接口await uploadAudioFile(audioBlob);// 清空 audioChunks 以便下次录音audioChunks = [];};mediaRecorder.start();recording = true;document.getElementById('recordButton').textContent = '停止录音';} catch (err) {console.error('Error accessing media devices.', err);}}function stopRecording() {if (mediaRecorder && mediaRecorder.state !== 'inactive') {mediaRecorder.stop();mediaRecorder.stream.getTracks().forEach(track => track.stop()); // 停止媒体流轨道}recording = false;document.getElementById('recordButton').textContent = '开始录音';}async function uploadAudioFile(blob) {const formData = new FormData();formData.append('file', blob, 'recording.webm');try {const response = await fetch('http://127.0.0.1:30025/sound', {method: 'POST',body: formData,});if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const result = await response.json();console.log('Server response:', result);} catch (error) {console.error('There was a problem with the fetch operation:', error);}}</script></body>
</html>python接口
@app.route('/sound', methods=['POST'])
def sound():file = request.files['file']# ... 处理文件return "SUCCESS"