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代码

<template>
	<div class="main_container">
		
		<div class="ai-diagnosis-wrapper">
			<div class="message-tips">
				<p class="message-tips-p">请长按录音按钮朗读以下文字内容</p>
			</div>
			<div class="text_words">
				“这是你要大声朗读的文字鸭～”
			</div>


			<div class="icon_btn" ref="btnRef">
				<img :src="!isRecording? btn_not_pressed_img : btn_pressed_img"/>
			</div>

		</div>

	</div>
</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);
        });
    }
}

<script>
	import Recorder from "recorder-js";

    const getUserMedia = function () { // 省略 }
    const uploadVoice = function () { // 上传音频接口 } 

	export default {
		name: "Record—Page",

		data() {
			return {
				isRecording: false,
				isUploading: false,
				isUploadSuccess: false,

				btn_not_pressed_img: require("@/img/按钮未按状态.png"),
				btn_pressed_img: require("@/img/按钮按下状态.png")
			}
		},

        created() {
		    // created
		},

		mounted() {
		
			this.init();
			this.addLongClickListener();
			
		},

        beforeDestroy() {
			console.log("before destroy");
			try {
				if (this.isRecording) {
					this.stopRecord(false);
				}
				this.closeRecordDevice();
			} catch (e) {

			}
		}，

		methods: {
				init() {
					this.isRecordReady = false;
					this.isRecording = false;
					this.isUploading = false;
					this.isUploadSuccess = false;
					this.initRecord();
				},
			
                // 按钮长按功能
				addLongClickListener() {
					const recordBtn = this.$refs.btnRef;
					let timer = null;
					const _this = this;
					this.startRecordTime = -1;

					recordBtn.addEventListener('touchstart', function (event) {
						console.log('touchstart');
						event.stopPropagation();
						event.preventDefault();
						timer = setTimeout(function () {
							_this.startRecord();
						}, 300);
					});

					recordBtn.addEventListener('touchmove', function (event) {
						setTimeout(function () {
							clearTimeout(timer);
							timer = 0;
						});
					});

					recordBtn.addEventListener("touchend", function (event) {
						console.log('touchend');
						_this.stopRecord(true);
						clearTimeout(timer);
						return false;
					});
				},

				initRecord() {
					if (!this.recorder) {
						const audioContext = new (window.AudioContext || window.webkitAudioContext)();
						const recorder = new Recorder(audioContext, {
							onAnalysed: data => {
								const value = data.lineTo;
								// console.log("recorder data", value);
							}
						});
						this.recorder = recorder;
					}

					if (this.recorder && !this.isRecordReady) {
						getUserMedia({
						    audio: true
						},
						(stream) => {
							this.audioStream = stream;
							this.recorder.init(stream);
							this.isRecordReady = true;
						},
						(err) => {
							console.log("音频设备打开失败, err= ", err);
						});
					}

				},

				startRecord() {
					console.log("开始录音");
					if (this.recorder && this.isRecordReady) {
						navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
						if(navigator.vibrate) {
							console.log("支持设备震动！");
							navigator.vibrate(1000);
						} else {
							console.log("不支持设备震动！");
						}
						this.recorder.start();
						this.isRecording = true;
						this.startRecordTime = performance.now();
					} else {
						this.init();
					}
				},

                // 停止录音
				stopRecord(upload) {
					if (!this.isRecording) {
						console.log("没有在录音，请长按按钮");
						return;
					}

					const recorder = this.recorder;

					try {
						recorder.stop().then(({blob, buffer}) => {
							this.isRecording = false;
							const duration = performance.now() - this.startRecordTime;
							blob = blob;

							if (duration > 4000){
								if (upload) {
									console.log('上传音频文件');
									this.uploadVoiceFile(blob);
									// Recorder.download(blob, 'my-audio-file');  //将音频文件下载到本地
								}
							} else {
								toast('录音时长太短');
							}
							this.startRecordTime = -1;

						});
					} catch (e) {
						console.log(e);
					}
				},

				closeRecordDevice() {
					try {
						if (this.audioStream) {
							this.audioStream.getTracks()[0].stop();
							this.audioStream = null;
						}
					} catch (err) {
						console.log("录音设备关闭失败,err= ", err);
					}
					this.recorder = null;
					this.isRecordReady = false;
				},

				uploadVoiceFile(blob) {
					const _this = this;

					if (!_this.isUploading) {
						_this.isUploading = true;

						// 调用上传接口
						uploadVoice(blob, (response) => {

							console.log(response);
							_this.isUploading = false;
							if (response.data && response.data.code == 200) {
								_this.isUploadSuccess = true;
								
                                // 上传录音成功
							} else {
								_this.isUploadSuccess = false;
								// 上传录音失败
							}
						}, (error) => {
							console.log('uploading voice failed, error= ', error);
							_this.isUploading = false;
							_this.isUploadSuccess = false;
							// 上传录音失败
						});
					}
				}
		}
	}
</script>