亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue使用recorder-core.js實現(xiàn)錄音功能

 更新時間:2023年07月28日 10:23:48   作者:開心市民小李???  
這篇文章主要介紹了vue如何使用recorder-core.js實現(xiàn)錄音功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

下載組件

npm install recorder-core

封裝方法

record.ts

//必須引入的核心
import Recorder from 'recorder-core';
//引入mp3格式支持文件;如果需要多個格式支持,把這些格式的編碼引擎js文件放到后面統(tǒng)統(tǒng)引入進來即可
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,
  /**麥克風授權(quán) */
  getPermission: (fn: Function | null) => {
    const newRec = Recorder({
      type: 'wav',
      bitRate: 16,
      sampleRate: 16000, //阿里采樣率16000
      onProcess: function (buffers, powerLevel, duration, bufferSampleRate) {
        console.log(buffers);
      },
    });
    //打開錄音,獲得權(quán)限
    newRec.open(
      () => {
        record.RecordApp = newRec;
        fn({ status: 'success', data: '開啟成功' });
      },
      (msg, isUserNotAllow) => {
        //用戶拒絕了錄音權(quán)限,或者瀏覽器不支持錄音
        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('結(jié)束錄音出錯:' + err);
      record.RecordApp.close();
      record.RecordApp = null;
    }
  },
  /**關(guān)閉錄音,釋放麥克風資源 */
  destroyRecorder: () => {
    if (record.RecordApp) {
      record.RecordApp.close();
      record.RecordApp = null;
    }
  },
  /**暫停 */
  pauseRecorder: () => {
    if (record.RecordApp) {
      record.RecordApp.pause();
    }
  },
  /**恢復(fù)繼續(xù)錄音 */
  resumeRecorder: () => {
    if (record.RecordApp) {
      record.RecordApp.resume();
    }
  },
};
export default record;

調(diào)用

 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;
          }
        });
      }
   /**結(jié)束錄音 */
      function stopRec() {
        state.loading = true;
        state.confLoading = true;
        record.stopRecorder(function (res) {
        /**處理 */
         })
      }

到此這篇關(guān)于vue使用recorder-core.js實現(xiàn)錄音功能的文章就介紹到這了,更多相關(guān)vue recorder-core.js錄音內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue框架制作購物車小球動畫效果實例代碼

    vue框架制作購物車小球動畫效果實例代碼

    最近在學(xué)習前端制作了一個購物車小球的動畫效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧
    2019-09-09
  • vue3圖片剪裁插件vue-img-cutter使用小結(jié)

    vue3圖片剪裁插件vue-img-cutter使用小結(jié)

    Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細,感興趣的朋友一起看看吧
    2024-01-01
  • vue-admin-template解決登錄和跨域問題解決

    vue-admin-template解決登錄和跨域問題解決

    本文主要介紹了vue-admin-template解決登錄和跨域問題解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
    2022-05-05
  • Vue3的效率提升主要表現(xiàn)在哪些方面示例解析

    Vue3的效率提升主要表現(xiàn)在哪些方面示例解析

    Vue3帶來了許多性能優(yōu)化和效率提升的特性,本文將重點討論Vue3在靜態(tài)提升、預(yù)字符串化、緩存事件處理函數(shù)、Block?Tree和PatchFlag方面的改進,我們將通過對比Vue2和Vue3的編譯結(jié)果來說明這些方面的效率提升
    2023-12-12
  • html-webpack-plugin修改頁面的title的方法

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

    這篇文章主要介紹了html-webpack-plugin修改頁面的title的方法 ,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
    2020-06-06
  • Vue項目路由刷新的實現(xiàn)代碼

    Vue項目路由刷新的實現(xiàn)代碼

    這篇文章主要介紹了Vue項目路由刷新的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • Vue?使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制

    Vue?使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制

    個人在做文件上傳功能的時候,踩過不少的坑,特在此記錄下,本文介紹Vue使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制問題,感興趣的朋友一起看看吧
    2024-02-02
  • vue中watch監(jiān)聽對象中某個屬性的方法

    vue中watch監(jiān)聽對象中某個屬性的方法

    watch 的用法有個特點,就是當值第一次綁定的時候,不會執(zhí)行監(jiān)聽函數(shù),只有值發(fā)生改變才會執(zhí)行,如果我們需要在最初綁定值得時候也執(zhí)行函數(shù),就需要用到 immediate 屬性,這篇文章主要介紹了vue中watch監(jiān)聽對象中某個屬性的方法,需要的朋友可以參考下
    2023-04-04
  • vue 基于element-ui 分頁組件封裝的實例代碼

    vue 基于element-ui 分頁組件封裝的實例代碼

    這篇文章主要介紹了vue 基于element-ui 分頁組件封裝的實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-12-12
  • Vue系列:通過vue-router如何傳遞參數(shù)示例

    Vue系列:通過vue-router如何傳遞參數(shù)示例

    本篇文章主要介紹了Vue系列:通過vue-router如何傳遞參數(shù)示例,具有一定的參考價值,有興趣的可以了解一下。
    2017-01-01

最新評論