基于WhatsApp Web+JavaScript：如何程序化发送录制音频/语音消息？

针对你遇到的音频消息无法插入WhatsApp Web聊天的问题，核心思路是绕过复杂的拖拽模拟，直接利用WhatsApp原生的文件上传机制——通过操作其隐藏的文件输入元素来实现：

具体实现步骤 #

• 定位文件输入元素：WhatsApp Web会渲染一个隐藏的<input type="file">用于音频/文件上传，可通过属性匹配定位：

  const audioInput = document.querySelector('input[type="file"][accept*="audio"]');
  

• 转换Blob为File对象：将MediaRecorder录制得到的ogg格式Blob包装成File对象，指定正确的文件名和MIME类型：

  const audioFile = new File([recordedBlob], 'reply-audio.ogg', { type: 'audio/ogg' });
  

• 模拟文件选择操作：通过DataTransfer对象将File注入到输入框，再触发change事件触发WhatsApp的上传逻辑：

  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(audioFile);
  audioInput.files = dataTransfer.files;
  
  const changeEvent = new Event('change', { bubbles: true });
  audioInput.dispatchEvent(changeEvent);
  

关键注意事项 #

• 用户交互上下文：Chrome扩展限制非用户触发的DOM事件，必须将上述代码放在用户点击回复按钮的回调函数内执行（比如你之前处理文本消息的点击事件逻辑里）。
• DOM元素监听：WhatsApp会动态更新页面DOM，若初始化时找不到文件输入元素，可使用MutationObserver监听聊天区域的变化，确保元素出现后再执行操作。
• 格式兼容性：确认录制的音频是WhatsApp支持的编码格式（OGG Vorbis通常兼容），可通过recordedBlob.type验证是否为audio/ogg。

内容的提问来源于stack exchange，提问作者Matheus Haas