如何在vue添加自己的录音-前端问答-PHP中文网

如何在vue添加自己的录音

王林

发布： 2023-05-24 09:00:36

原创

942人浏览过

如何在vue添加自己的录音

随着移动互联网的普及，音频录制逐渐成为了许多应用程序的标配。比如音频笔记、语言学习等应用都需要语音录制功能。在Vue框架中添加自己的录音功能也十分容易。下面我们将介绍如何在Vue中添加自己的录音。

一、安装依赖项

Vue中通过安装第三方依赖项来实现录音功能。我们可以使用中文名称叫做“录音机”的库，通过 npm 来安装：

npm install record-vue

立即学习“前端免费学习笔记（深入）”；

二、添加录音组件

接下来我们需要在Vue中添加录音组件，这个录音组件可以让你方便地录制音频，并将录制好的音频保存在浏览器存储中。我们来看一下下面的代码：

  <div>
    <button @click="start">开始录制</button>
    <button @click="stop">停止录制</button>
    <audio ref="audio"></audio>
  </div>
</template>

<script>
import Record from 'record-vue';

export default {
  name: 'RecordComponent',

  components: {
    Record
  },

  data() {
    return {
      mediaRecorder: null,
    }
  },

  methods: {
    start() {
      this.mediaRecorder = this.$refs.recorder.getMediaRecorder();
      this.mediaRecorder.start();
    },

    stop() {
      this.mediaRecorder.stop();
    }
  },

  mounted() {
    this.mediaRecorder = this.$refs.recorder.getMediaRecorder();

    this.mediaRecorder.ondataavailable = (blob) => {
      const audio = this.$refs.audio;
      audio.src = URL.createObjectURL(blob);
    }
  }
}
</script>```

三、使用录音组件

通过上面的代码，我们定义了一个包含开始录制、停止录制和音频播放的录音组件。现在，我们只需要在需要使用录音的组件中引入录音组件，然后使用它即可。例如，我们可以在下面的代码中使用录音组件：

登录后复制

天天网络商城

以构建电子商务网站为目标，由前台购物、后台管理、在线支付三大部分组成。各大部分完美结合，都有着最为完善和强大的功能，最大限度的满足客户在线购物和网站管理员管理的需求。本系统既有一般购物网站的共性，又有自己的特色。系统除具备一般网络商城的功能外，最大特点是商品分类无限级，不同身份登录以不同价格自动结算，这样对后台商品添加和前台用户购买都很方便，具有强大的后台管理功能，设计人性化，网站基本信息设置、界