如何录制音频流？Vanilla JS开发的电台流应用如何实现录制本地存储

核心原理 #

基于原生MediaRecorder API实现，无第三方依赖，完全适配Vanilla JS技术栈。

具体实现步骤 #

• 首先通过<audio>元素的captureStream()方法，获取当前正在播放的电台流的媒体轨道数据
• 实例化MediaRecorder接收媒体流数据，配置对应音频格式参数
• 监听录制数据回调存储分片，录制结束后合并分片生成Blob文件触发本地下载

可直接复用的核心代码 #

// 全局变量存储录制实例和分片数据
let mediaRecorder = null
let recordChunks = []
// 替换为你页面中audio元素的选择器
const audioElement = document.querySelector('audio')

// 开始录制方法
function startRecord() {
  // 仅在音频播放状态下可启动录制
  if (audioElement.paused || audioElement.ended) return
  // 获取当前播放流
  const audioStream = audioElement.captureStream()
  // 实例化录制器，优先使用兼容性更好的audio/webm格式
  mediaRecorder = new MediaRecorder(audioStream, {
    mimeType: 'audio/webm; codecs=opus'
  })
  // 接收录制分片
  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) recordChunks.push(e.data)
  }
  // 录制停止后触发下载
  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(recordChunks, { type: 'audio/webm' })
    const downloadUrl = URL.createObjectURL(audioBlob)
    const downloadLink = document.createElement('a')
    downloadLink.href = downloadUrl
    downloadLink.download = `电台录制_${new Date().toLocaleString()}.webm`
    document.body.appendChild(downloadLink)
    downloadLink.click()
    // 清理临时资源
    setTimeout(() => {
      document.body.removeChild(downloadLink)
      URL.revokeObjectURL(downloadUrl)
      recordChunks = []
    }, 100)
  }
  mediaRecorder.start()
}

// 停止录制方法
function stopRecord() {
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop()
  }
}

注意事项 #

• 跨域电台流需要对应服务端配置CORS规则，否则captureStream会触发安全限制无法拿到数据
• 音频必须由用户交互触发播放，符合浏览器自动播放限制规则，否则无法正常捕获流数据
• 如需导出mp3格式，可先通过MediaRecorder.isTypeSupported('audio/mp3')判断浏览器支持度，支持的话替换mimeType参数即可

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