vue实战，前端如何调用手机录音功能

最近在开发中，需求中有实时聊天功能实现，但是在在之前项目中集成的，所以并不能选择类似uniapp等已经封装好的框架，经过多方查询，最后总算实现了这个功能。

重要的事情强调：只能用https

重要的事情强调：只能用https

重要的事情强调：只能用https
vue开发转换为https方法：
在vue.config.js中添加

module.exports = {
  publicPath: './',
  devServer: {
    port: 8080, //这是用来更改默认端口号
    open: true, //运行自启动
    https: true, //https模式开启
  },
}

一、实现原理

在web API中提供了getUserMedia这个方法，就是用来给我们获取各种媒体应用的，想了解底层的可以百度一下这个方法，介绍的很详细，了解这个东西，自己也能手动封装插件，但是既然是实战，咱们要的就是用最快的方法实现我们需要的功能，所以，下面我们就介绍一个插件

二、录音插件js-audio-recorder

官方地址：gitHub官方地址
官方上有各种api以及在线演示，如果本次内容中有未涉及到的地方可去官方查看api

三、使用方式

1、安装

npm i js-audio-recorder （cnpm和yarn的请适当转换）

2、需要的地方引入

import Recorder from ‘js-audio-recorder’;

3、实例化

let recorder = new Recorder();
实例化这里可根据自己需求来，也可像我一样整个页面都用，在初识实例化

import Recorder from 'js-audio-recorder';
let recorder = new Recorder();


export default {
  components: {},
  data() {
    return {}
    }

4、开始结束录音

 //按下录音（方法）
    recording(e) {
      let that = this
      Recorder.getPermission().then(() => { //点击录音按钮获取权限，也可在created里进入页面就获取录音权限
        console.log('给权限了');
      }, (error) => {
        console.log(`${error.name} : ${error.message}`);
      });
      //这里获取起始坐标，备用上滑取消发送功能，不需要的请删除
      this.startY = e.changedTouches[0].pageY;
      //获取录音时长，这个可全局监听
      recorder.onprogress = function (params) {
        that.rideoTimesNow = parseInt(params.duration)
      }

      // 开始录音
      recorder.start().then(() => {

      }, (error) => {
        // 出错了
        console.log(`${error.name} : ${error.message}`);
      });
      this.startRecor = true   //开始录音标识
    },

//录音结束
    changeRideoSize(e) {
      if (this.startRecor) { //判断是否已经开始
        let thisclass = e.target.className
        let EndmoveY = ''
        EndmoveY = e.changedTouches[0].pageY  //获取手指移动到最后的纵坐标
        if (this.rideoTimesNow < 1) { //判断录音时长小于一秒停止录音
          this.$message({
            message: '提示，录音时间太短',
            type: 'warning'
          });
        }
        if (thisclass === 'recordBox' && this.rideoTimesNow >= 1) { //判断是否是录音按钮并且时间大于1秒
          if (this.startY - EndmoveY >= 80) {
            console.log('上滑取消')
            recorder.stop() //停止录音
          } else {
            let wavData = recorder.getWAVBlob(); //获取wav数据
            let files = new window.File([wavData], '新语音', { type: 'audio/wav' }) //blob数据转化为文件信息（这是上传服务器时需要的转换，也可以不转换直接存储二进制blob数据，不了解的可以百度或者直接问知道后台的）
            
          }

        } else {
          // 停止录音
          recorder.stop()
        }
        this.startRecor = false //结束重置录音状态
      }

    },

以上就是一个简单的录音功能
另外，我监听了全局的鼠标点击事件和手指点击事件用来获取一些参数，一些参数获取失败的，请自己加一下事件监听

5、简单介绍官网的一些方法

初始化时可添加参数

let recorder = new Recorder({
    sampleBits: 16,                 // 采样位数，支持 8 或 16，默认是16
    sampleRate: 16000,              // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
    numChannels: 1,                 // 声道，支持 1 或 2， 默认是1
    // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
});

获取录音时数据

recorder.onprogress = function(params) {
    console.log(params.data);       // 当前获取到到音频数据
    console.log(recorder.duration);  // 获取录音的总时长。
    console.log(recorder.fileSize); //录音文件大小（单位：字节）。
}

开始录音。

返回: Promise。
recorder.start().then(() => {
    // 开始录音
}, (error) => {
    // 出错了
    console.log(`${error.name} : ${error.message}`);
});

录音暂停。

返回: void
recorder.pause();

继续录音。

返回: void。
recorder.resume()

结束录音。

返回: void。
recorder.stop();

获取音频已经播的时长。

返回: number。
recorder.getPlayTime();

暂停录音播放。

返回: void。
recorder.pausePlay();

恢复录音播发。

返回: void。
recorder.resumePlay();

停止播放。

返回: void。
recorder.stopPlay();

销毁实例。

返回: Promise。
// 销毁录音实例，置为null释放资源，fn为回调函数，
recorder.destroy().then(function() {
    recorder = null;
});

获取 PCM 数据，在录音结束后使用。

返回: Blob
注：使用该方法会默认调用 stop() 方法。

recorder.getPCMBlob();

获取 WAV 数据，在录音结束后使用

返回: Blob
注：使用该方法会默认调用 stop() 方法。

recorder.getWAVBlob();

获取左声道和右声道音频数据。

recorder.getChannelData();

下载 PCM 格式

fileName String 重命名文件
返回: Blob
注：使用该方法会默认调用 stop() 方法。

recorder.downloadPCM(fileName ?);

下载 WAV 格式

fileName String 重命名文件
返回: Blob
注：使用该方法会默认调用 stop() 方法。
recorder.downloadWAV(fileName ?);

返回的是一个1024长的，0-255大小的Uint8Array类型。用户可以根据这些数据自定义录音波形。此接口获取的是录音时的。

let dataArray = recorder.getRecordAnalyseData();

返回数据同 getRecordAnalyseData()，该方法获取的是播放时的。

let dataArray = recorder.getPlayAnalyseData();

获取麦克风权限。

返回：promise。
Recorder.getPermission().then(() => {
    console.log('给权限了');
}, (error) => {
    console.log(`${error.name} : ${error.message}`);
});

基本上就是这些方法可以被我们用到了，如果是播放外部音频，以及转换为mp3格式文件的 请参照官网API，我再复制粘贴就差不多纯粹抄袭行为了

虽然基本可以复制粘贴使用，但是建议还是看思路就好，别人写的始终是别人写的，并不一定适用于自己，请根据自己实际情况进行取舍