小程序无法用html实现录音，必须使用wx.getrecordermanager()等原生api；网页录音则需navigator.mediadevices.getusermedia()配合mediarecorder。
小程序里根本不能用 HTML 实现录音
直接说结论：你在浏览器里写的纯 HTML 页面，无论怎么加 <audio></audio> 或 <input type="file" accept="audio/*">，都**无法调起麦克风录音**——这不是写法问题，是浏览器安全策略硬性限制。微信小程序、支付宝小程序等也**不运行 HTML，而是运行基于 WXML + JS 的封闭环境**，所谓“HTML 做小程序”本身就是一个常见误解。
微信小程序录音必须用 wx.getRecorderManager()
微信小程序录音功能完全依赖其原生 API，核心是 wx.getRecorderManager() 返回的管理实例。它和 Web Audio API 或 navigator.mediaDevices.getUserMedia() 无关，也不能用 <video></video> 或 <audio></audio> 标签直接控制录音。
常见错误现象：
- 在
onLoad里直接调start()→ 报错recorder is not ready（必须等onStart回调后才算就绪） - 没监听
onStop，只靠按钮点击 stop → 录音文件路径拿不到，tempFilePath为空 - 未配置
duration或maxDuration→ iOS 上默认只录 60 秒，超时静默结束，无提示
基础用法示例：
const recorder = wx.getRecorderManager();
recorder.onStart(() => console.log('开始录音'));
recorder.onStop((res) => {
console.log('录音结束', res.tempFilePath); // 真实可用的临时路径
});
recorder.start({ duration: 10000 }); // 最多录 10 秒
录音文件不能直接上传，得先用 wx.uploadFile()
拿到 res.tempFilePath 后，它只是本地临时路径，24 小时失效，且**不能通过 fetch 或 XMLHttpRequest 直接发请求**——小程序网络层强制要求用 wx.uploadFile() 上传。
关键注意点：
-
filePath必须传res.tempFilePath，不是字符串拼接或相对路径 -
name字段名要和服务端约定一致（比如后端接收字段叫audio_file，这里就得写name: 'audio_file'） - 未处理
fail回调 → 用户点完录音，界面没反馈，以为失败了但其实只是上传被拦截（如域名未配置、HTTPS 不合规）
简例：
recorder.onStop((res) => {
wx.uploadFile({
url: 'https://api.example.com/upload',
filePath: res.tempFilePath,
name: 'file',
success: (uploadRes) => {
console.log('上传成功', uploadRes.data);
}
});
});
真要在网页做录音？只能用 navigator.mediaDevices.getUserMedia() + MediaRecorder
如果你实际要做的是「在手机浏览器里打开的 H5 页面录音」，那得走标准 Web API 路线。但要注意：iOS Safari 14.5+ 才支持 MediaRecorder，且必须 HTTPS + 用户手势触发（比如按钮点击）。
典型坑：
- 没检查
MediaRecorder是否存在 → iOS 旧版、安卓部分 UC/夸克直接报undefined - 用
new MediaRecorder(stream)后立刻start()→ 部分安卓机型需等待ondataavailable绑定完成，否则丢第一段数据 - 导出为
mp3？MediaRecorder只支持webm（Chrome）或mp4（Safari），转 mp3 得后端做或前端用 lamejs，别硬扛
最小可行检查：
if (navigator.mediaDevices && MediaRecorder) {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
// ...后续处理 dataavailable、stop 等
});
}
真正卡住的往往不是代码怎么写，而是没分清运行环境：小程序 ≠ 网页，WXML ≠ HTML，wx.uploadFile ≠ fetch。录音路径、权限弹窗时机、文件生命周期，每个环节都绑定具体平台规则。漏掉任一环，页面看起来能点，但就是没声音、没文件、传不上服务器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
