畅游音频海洋：H5页面录音轻松get

前端

2023-12-31 19:21:29

轻松实现 H5 页面录音的终极指南

前言

在当今信息爆炸的时代，音频内容已成为至关重要的沟通形式。从播客和在线课程到视频会议和音乐流媒体，音频无处不在。而当涉及到 H5 页面时，能够轻松录制音频是必不可少的。

H5 页面录音解决方案

基于 Vue3、Element-Plus 和 Recorder 等强大技术，推出了一款创新的 H5 页面录音解决方案。这款解决方案提供了全面的功能集，让您轻松实现录音功能，畅游音频海洋。

核心功能

长按录音： 告别繁琐的操作，只需长按按钮即可开始录音，解放您的双手，尽情表达。
上滑取消： 在录音过程中，只需上滑至一定位置，即可轻松取消录音，掌控全局，避免不必要的录制内容。
音频 blob 转 base64： 将音频 blob 转成 base64 格式，便于存储和传输，让音频数据在不同系统和平台之间轻松流转。
录音音频下载： 一键下载录音音频文件，方便您保存、分享或进一步处理，让您的录音成果触手可及。
模拟音频声波动画： 趣味十足的音频声波动画实时呈现，让您直观感受录音的动态变化，增添录音的趣味性。

代码示例

import { ref, onMounted } from 'vue'
import { useRecorder } from 'vue-recorder'

export default {
  setup() {
    const audioRef = ref(null)
    const recorder = useRecorder()

    onMounted(() => {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          recorder.start(stream)
        })
        .catch(err => {
          console.error(err)
        })
    })

    const handleStart = () => {
      recorder.start()
    }

    const handleStop = () => {
      recorder.stop()
      const blob = recorder.getBlob()
      const base64 = recorder.getBase64()

      // 下载音频文件
      const a = document.createElement('a')
      a.href = URL.createObjectURL(blob)
      a.download = '录音.wav'
      a.click()

      // 显示音频声波动画
      const canvas = audioRef.value
      const ctx = canvas.getContext('2d')
      const analyser = recorder.getAnalyser()

      const draw = () => {
        requestAnimationFrame(draw)

        const data = new Uint8Array(analyser.frequencyBinCount)
        analyser.getByteFrequencyData(data)

        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
        ctx.fillRect(0, 0, canvas.width, canvas.height)

        ctx.fillStyle = '#32CD32'
        data.forEach((value, i) => {
          const x = i * canvas.width / data.length
          const y = canvas.height - value / 255 * canvas.height
          ctx.fillRect(x, y, 1, canvas.height)
        })
      }

      draw()
    }

    return {
      audioRef,
      handleStart,
      handleStop
    }
  }
}