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接口

python 复制代码
@app.route('/sound', methods=['POST'])
def sound():
    file = request.files['file']
    # ... 处理文件
    return "SUCCESS"
相关推荐
电子科技圈30 分钟前
SmartDV推出先进的H.264和H.265视频编码器和解码器IP
音视频·h.265·h.264
feiyangqingyun2 小时前
Qt音视频开发技巧/推流带旋转角度/rtsprtmp推流/保存文件到MP4/拉流解析旋转角度
qt·音视频·qt旋转角度推流
Despacito0o3 小时前
ESP32-s3摄像头驱动开发实战:从零搭建实时图像显示系统
人工智能·驱动开发·嵌入式硬件·音视频·嵌入式实时数据库
毕设做完了吗?10 天前
视频相似度检测算法(带课设报告)
人工智能·算法·机器学习·音视频
语音之家10 天前
2025年CCF先进音频技术竞赛
人工智能·音视频
音视频牛哥10 天前
音视频全链路开发实践:基于SmartMediakit的架构设计与应用实战
音视频·大牛直播sdk·rtsp播放器·rtmp播放器·安卓rtmp播放器·rtmpplayer·linux rtsp
十年编程老舅11 天前
音视频流媒体高级开发-学习路线
ffmpeg·音视频·音视频开发·音视频编解码·c++音视频·流媒体服务器·音视频学习路线
weisian15111 天前
一款强大的音视频处理工具--FFmpeg-2--常用音频处理示例
音视频·mpeg-2
9527华安11 天前
国产安路FPGA实现MIPI视频解码转HDMI输出,基于SC500摄像头,提供TD工程源码和技术支持
fpga开发·音视频·csi·mipi·dphy·安路fpga·sc500
niech_cn11 天前
微信小程序扫码添加音频播放报错{errCode:10001, errMsg:“errCode:602,err:error,not found param“}
微信小程序·小程序·音视频