Vue + Wavesurfer microphone 实现在线录音及数据获取

mounted() {
			this.playWave = Wavesurfer.create({
				container: document.querySelector('#playWave'),
				backend: 'MediaElement',

			})
			this.singWave = Wavesurfer.create({
				container: '#singWave',
				waveColor: 'black',
				interact: false,
				cursorWidth: 0,
				plugins: [
					microphone.create()
				]
			});

			var that = this
			this.singWave.microphone.on('deviceReady', function (stream) {
				const rec = new MediaRecorder(stream, {
					audioBitsPerSecond: 44100,
					mimeType: 'audio/webm'
				})
				rec.ondataavailable = e => {
					that.blob = new Blob([e.data],{type:'audio/webm'})
					that.blobUrl = URL.createObjectURL(that.blob)
				}
				rec.start()
				that.recorder = rec
				that.singStream = stream
			});
			this.singWave.microphone.on('deviceError', function (code) {
				console.warn('Device error: ' + code);
			});

		},

在deviceReady中创建mediarecorder对象，录音结束后可以在回调中获取数据，对音频来说可指定为ogg或webm格式。