vue项目使用 Recorder.js 实现录音功能

1、安装插件：

npm install recorder-js --save

2、官网使用说明：

import Recorder from 'recorder-js';
 
const audioContext =  new (window.AudioContext || window.webkitAudioContext)();
 
const recorder = new Recorder(audioContext, {
  // An array of 255 Numbers
  // You can use this to visualize the audio stream
  // If you use react, check out react-wave-stream
  onAnalysed: data => console.log(data),
});
 
let isRecording = false;
let blob = null;
 
navigator.mediaDevices.getUserMedia({audio: true})
  .then(stream => recorder.init(stream))
  .catch(err => console.log('Uh oh... unable to get stream...', err));
 
function startRecording() {
  recorder.start()
    .then(() => isRecording = true));
}
 
function stopRecording() {
  recorder.stop()
    .then(({blob, buffer}) => {
      blob = blob;
 
      // buffer is an AudioBuffer
    }));
}
 
function download() {
  Recorder.download(blob, 'my-audio-file'); // downloads a .wav file
}

3、实战案例：

template代码

script代码

function getUserMedia(constrains, successFun, failFun) {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constrains).then(stream => {
            successFun(stream);
        }).catch(err => {
            failFun(err);
        });
    } else if (navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constrains, resolve, reject);
                });
            }
        }
        navigator.mediaDevices.getUserMedia(constrains).then(stream => {
            successFun(stream);
        }).catch(err => {
            failFun(err);
        });
    } else if (navigator.getUserMedia) {
        navigator.getUserMedia(constrains).then(stream => {
            successFun(stream);
        }).catch(err => {
            failFun(err);
        });
    }
}