点亮沟通之声，一键录音，畅叙无忧！

2023-04-05 17:38:44

拥抱便捷：使用 H5 页面录音功能畅享快速沟通

导言：

在当今快节奏的生活中，我们经常需要快速便捷地与他人分享信息和想法。H5 页面录音功能应运而生，它就像一串紧凑的音符，让沟通唾手可得，让表达更加生动。

H5 页面录音：便捷流畅

H5 页面录音使用起来非常简单。长按即可开始录制，松手即可发送。操作快捷流畅，无需繁琐的步骤。如果你中途改变了主意，只需将手指向上滑动到一定位置即可取消录音，省去许多麻烦。录制完成后，只需轻轻点击一下，录音音频便会自动转换成 base64 格式，可直接用于数据传输或保存。此外，还贴心地提供了录音音频的下载功能，方便你随时随地聆听。

声波动画：生动有趣

为了让你的录音过程更加生动有趣，我们特别加入了模拟音频声波的动画效果。当你在录音时，屏幕上会实时显示出音频声波的动态变化，让你仿佛置身于真实的录音棚。

多元用途：释放创意

想象一下，当你想要快速分享一个想法、一个灵感时，只需长按录音按钮，畅所欲言，松手发送，即可将你的声音传达给对方。当你想记录一段重要的对话、一段动听的音乐时，只需轻点录音按钮，即可将声音完整地记录下来。

H5 页面录音功能不仅仅是一个录音工具，它还是释放创意的利器。你可以用它来：

即兴创作： 即兴创作一首歌曲或一段故事，让你的想象力自由驰骋。
记录笔记： 快速记下灵感或重要信息，避免遗漏。
个性化问候： 用语音信息向亲朋好友发送个性化的问候，让他们感受到你的温暖。
打造沉浸式体验： 为你的文章或社交媒体帖子添加声音，让读者或粉丝身临其境。

代码示例：

<template>
  <div>
    <el-button @click="startRecording" type="primary">Start Recording</el-button>
    <el-button @click="stopRecording" type="danger">Stop Recording</el-button>
    <el-button @click="playRecording" type="info">Play Recording</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import Recorder from 'recorder-js';

export default {
  setup() {
    const recorder = ref(null);
    const isRecording = ref(false);
    const audioBlob = ref(null);

    const startRecording = () => {
      if (!recorder.value) {
        recorder.value = new Recorder({ sampleRate: 44100, channels: 1 });
      }

      isRecording.value = true;
      recorder.value.start();
    };

    const stopRecording = () => {
      isRecording.value = false;
      recorder.value.stop();

      recorder.value.exportWAV(blob => {
        audioBlob.value = blob;
      });
    };

    const playRecording = () => {
      const audio = new Audio(URL.createObjectURL(audioBlob.value));
      audio.play();
    };

    return {
      recorder,
      isRecording,
      audioBlob,
      startRecording,
      stopRecording,
      playRecording,
    };
  },
};
</script>