当前位置：首页 > 行业动态 > 正文

html发送语音代码

使用HTML+JS，通过/元素配合MediaRecorder API录制语音，转为Blob后利用Fetch上传至服务器，需处理浏览器权限请求及

功能需求分析

HTML本身无法直接处理语音数据，需结合JavaScript的MediaRecorder接口与浏览器API实现语音录制与上传，核心流程包括：获取麦克风权限→录制音频→生成音频文件→上传至服务器。

基础实现步骤

获取麦克风权限

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => { / 录制逻辑 / })
  .catch(err => alert('麦克风权限获取失败'));

录制音频

const mediaRecorder = new MediaRecorder(stream);
let audioChunks = [];
mediaRecorder.ondataavailable = e => {
  audioChunks.push(e.data);
};
mediaRecorder.start(); // 开始录制
// mediaRecorder.stop(); // 停止录制

生成音频文件

mediaRecorder.onstop = () => {
  const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });
  // 可创建URL或上传Blob
};

完整代码示例

代码模块 功能说明
HTML结构 <button id="start">开始录音</button><button id="stop">停止录音</button>
JavaScript逻辑 “`javascript

const startBtn = document.getElementById(‘start’);
const stopBtn = document.getElementById(‘stop’);
let mediaRecorder;
let audioChunks = [];

startBtn.onclick = () => {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
mediaRecorder.start();
});
};

stopBtn.onclick = () => {
mediaRecorder.stop();
mediaRecorder.onstop = () => {
const audioBlob = new Blob(audioChunks, { type: ‘audio/mp3’ });
// 上传逻辑（见下文）
};
};

| 上传音频文件 | ```javascript
const uploadAudio = (blob) => {
  const formData = new FormData();
  formData.append('audio', blob, 'record.mp3');
  fetch('/upload', { method: 'POST', body: formData })
    .then(res => res.json())
    .then(data => alert('上传成功'));
};
``` |
---
 四、浏览器兼容性处理
| 浏览器 | 支持情况 | 解决方案 |
|--------|----------|----------|
| Chrome | 支持 | 直接使用`MediaRecorder` |
| Firefox | 支持 | 同上 |
| Safari | 部分版本不支持 | 提示用户升级浏览器或使用Polyfill |
| IE/Edge旧版 | 不支持 | 禁用功能或引导用户切换浏览器 |
---
 五、相关问题与解答
# 问题1：如何将录制的音频实时显示为波形图？
解答：需结合`Web Audio API`分析音频数据，通过`ScriptProcessorNode`或`AudioWorkletNode`提取频域信息，再用Canvas绘制波形。
```javascript
const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const processor = audioContext.createScriptProcessor(2048, 1, 1);
processor.onaudioprocess = e => { / 提取数组并绘制 / };
source.connect(processor);
processor.connect(audioContext.destination);

问题2：录制的音频文件过大如何解决？

解答：可通过以下方式优化：

  1. 压缩编码：将音频格式改为OPUS（更小体积）。
  2. 分段上传：录制过程中分片上传,避免单次传输过大。
  3. 限制时长：设置最大录制时间（如`mediaRecorder.state === ‘recording’ && setTimeout(() => mediaRecorder.stop(), 60
HTML
0

相关文章