vue使用recorder-core.js实现录音功能

 更新时间:2023年07月28日 10:23:48   作者:开心市民小李・ࡇ・  
这篇文章主要介绍了vue如何使用recorder-core.js实现录音功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

下载组件

npm install recorder-core

封装方法

record.ts

//必须引入的核心
import Recorder from 'recorder-core';
//引入mp3格式支持文件;如果需要多个格式支持,把这些格式的编码引擎js文件放到后面统统引入进来即可
import 'recorder-core/src/engine/mp3';
import 'recorder-core/src/engine/mp3-engine';
//录制wav格式的用这一句就行
import 'recorder-core/src/engine/wav';
import { RecordType } from './type';
const record: RecordType = {
  RecordApp: null,
  recBlob: null,
  /**麦克风授权 */
  getPermission: (fn: Function | null) => {
    const newRec = Recorder({
      type: 'wav',
      bitRate: 16,
      sampleRate: 16000, //阿里采样率16000
      onProcess: function (buffers, powerLevel, duration, bufferSampleRate) {
        console.log(buffers);
      },
    });
    //打开录音,获得权限
    newRec.open(
      () => {
        record.RecordApp = newRec;
        fn({ status: 'success', data: '开启成功' });
      },
      (msg, isUserNotAllow) => {
        //用户拒绝了录音权限,或者浏览器不支持录音
        fn({ status: 'fail', data: msg });
        console.log((isUserNotAllow ? 'UserNotAllow,' : '') + '无法录音:' + msg);
      }
    );
  },
  /**开始录音 */
  startRecorder: () => {
    if (record.RecordApp && Recorder.IsOpen()) {
      record.RecordApp.start();
    }
  },
  /** 停止录音 */
  stopRecorder: (fn: Function | null) => {
    try {
      if (!record) {
        console.error('未打开录音');
        return;
      }
      record.RecordApp.stop((blob, duration) => {
        console.log('录音成功', blob, '时长:' + duration + 'ms');
        if (blob) {
          record.recBlob = blob;
          const formData = new FormData();
          formData.append('audio', blob);
          fn({ loading: true });
        }
        /* eslint-enable */
        record.RecordApp.close();
        record.RecordApp = null;
      });
    } catch (err) {
      fn({ err: err });
      console.error('结束录音出错:' + err);
      record.RecordApp.close();
      record.RecordApp = null;
    }
  },
  /**关闭录音,释放麦克风资源 */
  destroyRecorder: () => {
    if (record.RecordApp) {
      record.RecordApp.close();
      record.RecordApp = null;
    }
  },
  /**暂停 */
  pauseRecorder: () => {
    if (record.RecordApp) {
      record.RecordApp.pause();
    }
  },
  /**恢复继续录音 */
  resumeRecorder: () => {
    if (record.RecordApp) {
      record.RecordApp.resume();
    }
  },
};
export default record;

调用

 import record from '/@/utils/record/record';
  /**初始化 */
      function init() {
        record.getPermission(function (permiss) {
          if (permiss.status == 'fail') {
            createMessage.warning(permiss.data);
          } else {
            record.startRecorder();
            state.confLoading = true;
          }
        });
      }
   /**结束录音 */
      function stopRec() {
        state.loading = true;
        state.confLoading = true;
        record.stopRecorder(function (res) {
        /**处理 */
         })
      }

到此这篇关于vue使用recorder-core.js实现录音功能的文章就介绍到这了,更多相关vue recorder-core.js录音内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue框架制作购物车小球动画效果实例代码

    vue框架制作购物车小球动画效果实例代码

    最近在学习前端制作了一个购物车小球的动画效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-09-09
  • vue3图片剪裁插件vue-img-cutter使用小结

    vue3图片剪裁插件vue-img-cutter使用小结

    Vue.js是一款流行的JavaScript前端框架,很受用户喜爱,这篇文章主要介绍了vue3图片剪裁插件vue-img-cutter使用小结,本文结合示例代码讲解的非常详细,感兴趣的朋友一起看看吧
    2024-01-01
  • vue-admin-template解决登录和跨域问题解决

    vue-admin-template解决登录和跨域问题解决

    本文主要介绍了vue-admin-template解决登录和跨域问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue3的效率提升主要表现在哪些方面示例解析

    Vue3的效率提升主要表现在哪些方面示例解析

    Vue3带来了许多性能优化和效率提升的特性,本文将重点讨论Vue3在静态提升、预字符串化、缓存事件处理函数、Block Tree和PatchFlag方面的改进,我们将通过对比Vue2和Vue3的编译结果来说明这些方面的效率提升
    2023-12-12
  • html-webpack-plugin修改页面的title的方法

    html-webpack-plugin修改页面的title的方法

    这篇文章主要介绍了html-webpack-plugin修改页面的title的方法 ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue项目路由刷新的实现代码

    Vue项目路由刷新的实现代码

    这篇文章主要介绍了Vue项目路由刷新的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue 使用 ElementUi el-upload 手动上传文件限制上传文件类型大小同名等进行限制

    Vue 使用 ElementUi el-upload 手动上传文件限制上传文件类型大小同名等进行限制

    个人在做文件上传功能的时候,踩过不少的坑,特在此记录下,本文介绍Vue使用 ElementUi el-upload 手动上传文件限制上传文件类型大小同名等进行限制问题,感兴趣的朋友一起看看吧
    2024-02-02
  • vue中watch监听对象中某个属性的方法

    vue中watch监听对象中某个属性的方法

    watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行,如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性,这篇文章主要介绍了vue中watch监听对象中某个属性的方法,需要的朋友可以参考下
    2023-04-04
  • vue 基于element-ui 分页组件封装的实例代码

    vue 基于element-ui 分页组件封装的实例代码

    这篇文章主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • Vue系列:通过vue-router如何传递参数示例

    Vue系列:通过vue-router如何传递参数示例

    本篇文章主要介绍了Vue系列:通过vue-router如何传递参数示例,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01

最新评论