优化 Recorder 类结构，增加音频信号和实例记录管理对象。解决并发实例冲突问题和实例销毁对其他实例的副作用

Author: ferrinweb

src/lib/recorder.js

@@ -1,86 +1,119 @@
 import recordWorker from './record-worker'
 const URL = window.URL || window.webkitURL
-let recorderInstance = null
-function Recorder () {
-  this.config = null
-  this.recording = false
-  this.callback = null
-  this.worker = null
+
+const globalProxy = {
+  headInstanceReady: false,
+  proxyInstanceCount: 0,
+  defaultConfig: {
+    sampleRate: 48000, // 采样率(48000)，注意：设定的值必须为 48000 的约数
+    bufferSize: 4096, // 缓存大小，用来缓存声音
+    sampleBits: 16, // 采样比特率，8 或 16
+    twoChannel: false // 双声道
+  },
+  stream: null,
+  recorderProxy: null,
+  proxyInstance: null
+}
+function throwError (message) {
+  if (message.toString().includes('NotFoundError')) {
+    alert('未找到可用的录音设备！')
+    return
+  }
+  console.error(message)
+}
+class Recorder {
+  constructor (config = {}) {
+    this.config = Object.assign({}, globalProxy.defaultConfig, config)
+    this.recording = false
+    this.callback = null
+    this.worker = null
+    this.ready = false,
+    this.createTime = new Date().getTime()
+  }
 }
 Recorder.prototype = {
-  ready: function () {
-    this.proxyInstanceCount++
-    document.dispatchEvent(new Event('recorder-init'))
-  },
-  start: function () {
+  start () {
     if (this.recording) return
+    globalProxy.recorderProxy.onaudioprocess = this.holdBuffer.bind(this)
     this.recording = true
   },
-  stop: function (success) {
+
+  stop (success) {
     if (!this.recording) return
     this.callback = success
     this.recording = false
+    globalProxy.recorderProxy.onaudioprocess = null
   },
-  clear: function () {
+
+  clear () {
     if (this.recording) {
-      this.throwError('请先停止录音！')
+      throwError('请先停止录音！')
       return
     }
     this.worker.postMessage({
       command: 'clear'
     })
   },
-  destroy: function () {
-    this.proxyInstanceCount--
+
+  destroy () {
+    globalProxy.proxyInstanceCount--
     this.config = null
     this.worker && this.worker.terminate()
     this.worker = null
-    if (this.proxyInstanceCount < 1) {
-      this.recorderProxy = null
-      if (this.proxyInstance && this.proxyInstance.state !== 'closed') {
-        this.proxyInstance.suspend()
-        this.proxyInstance.close()
-        this.proxyInstance = null
+    this.ready = false
+    if (globalProxy.proxyInstanceCount < 1) {
+      globalProxy.headInstanceReady = false
+      globalProxy.recorderProxy = null
+      if (globalProxy.proxyInstance && globalProxy.proxyInstance.state !== 'closed') {
+        globalProxy.proxyInstance.suspend()
+        globalProxy.proxyInstance.close()
+        globalProxy.proxyInstance = null
       }
-      this.stream && this.stream.getTracks().forEach(track => track.stop())
-      this.stream = null
-      window.isAudioAvailable = this.isAudioAvailable = false
+      globalProxy.stream && globalProxy.stream.getTracks().forEach(track => track.stop())
+      globalProxy.stream = null
     }
-    recorderInstance = null
   },
-  handleStream: function (stream) {
-    this.stream = stream
+
+  handleStream (stream) {
+    globalProxy.stream = stream
     const channelNumber = this.config.twoChannel ? 2 : 1
     // 创建一个音频环境对象
     const ACProxy = window.AudioContext || window.webkitAudioContext
     if (!ACProxy) {
-      this.throwError('浏览器不支持录音功能！')
+      throwError('浏览器不支持录音功能！')
       return
     }
-    this.proxyInstance = new ACProxy()
+    globalProxy.proxyInstance = new ACProxy()
 
-    if (this.proxyInstance.createScriptProcessor) {
-      this.recorderProxy = this.proxyInstance.createScriptProcessor(this.config.bufferSize, channelNumber, channelNumber)
-    } else if (recorder.proxyInstance.createJavaScriptNode) {
-      this.recorderProxy = this.proxyInstance.createJavaScriptNode(this.config.bufferSize, channelNumber, channelNumber)
+    if (globalProxy.proxyInstance.createScriptProcessor) {
+      globalProxy.recorderProxy = globalProxy.proxyInstance.createScriptProcessor(this.config.bufferSize, channelNumber, channelNumber)
+    } else if (globalProxy.proxyInstance.createJavaScriptNode) {
+      globalProxy.recorderProxy = globalProxy.proxyInstance.createJavaScriptNode(this.config.bufferSize, channelNumber, channelNumber)
     } else {
-      this.throwError('浏览器不支持录音功能！')
+      throwError('浏览器不支持录音功能！')
     }
 
     // 将声音输入这个对像
-    const audioInputSource = this.proxyInstance.createMediaStreamSource(this.stream)
+    const audioInputSource = globalProxy.proxyInstance.createMediaStreamSource(globalProxy.stream)
 
-    audioInputSource.connect(this.recorderProxy)
-    this.recorderProxy.connect(audioInputSource.context.destination)
+    audioInputSource.connect(globalProxy.recorderProxy)
+    globalProxy.recorderProxy.connect(audioInputSource.context.destination)
 
-    this.ready()
+    this.ready = true
 
-    this.recorderProxy.onaudioprocess = this.holdBuffer.bind(this)
-
-    window.isAudioAvailable = this.isAudioAvailable = true
+    globalProxy.headInstanceReady = true
   },
-  init: function (config = {}) {
-    this.config = Object.assign({}, this.defaultConfig, config)
+
+  init () {
+    if (globalProxy.proxyInstanceCount && !globalProxy.headInstanceReady) {
+      const waitHeadInstance = this
+      requestAnimationFrame(function () {
+        waitHeadInstance.init()
+      })
+      // console.info('wait head instance')
+      return
+    }
+    globalProxy.proxyInstanceCount++
 
     // 加载并启动 record worker
     let workerString = recordWorker.toString()
@@ -91,7 +124,7 @@ Recorder.prototype = {
     const workerURL = URL.createObjectURL(workerBlob)
     this.worker = new Worker(workerURL)
     URL.revokeObjectURL(workerURL)
-    
+
     const instance = this
     this.worker.onmessage = function (e) {
       instance.callback && instance.callback(e.data)
@@ -102,8 +135,8 @@ Recorder.prototype = {
       config: this.config
     })
 
-    if (this.recorderProxy) {
-      this.ready()
+    if (globalProxy.recorderProxy) {
+      this.ready = true
     } else {
       if (!navigator.mediaDevices) {
         navigator.mediaDevices = {}
@@ -120,59 +153,42 @@ Recorder.prototype = {
           })
         }
       }
-      navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(this.handleStream.bind(this)).catch(this.throwError)
-    }
-  },
-  defaultConfig: {
-    sampleRate: 48000, // 采样率(48000)，注意：设定的值必须为 48000 的约数
-    bufferSize: 4096, // 缓存大小，用来缓存声音
-    sampleBits: 16, // 采样比特率，8 或 16
-    twoChannel: false // 双声道
-  },
-  proxyInstanceCount: 0,
-  stream: null,
-  recorderProxy: null,
-  proxyInstance: null,
-  holdBuffer: function (e) {
-    if (this.recording) {
-      const data = e.inputBuffer
-      const buffer = !this.config.twoChannel ? [
-        data.getChannelData(0)
-      ] : [
-          data.getChannelData(0),
-          data.getChannelData(1)
-        ]
-      this.worker.postMessage({
-        command: 'record',
-        buffer
-      })
+      navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(this.handleStream.bind(this)).catch(throwError)
     }
   },
-  exportWAV: function (success, type) {
+
+  exportWAV (success, type) {
     this.callback = success
     type = type || this.config.type || 'audio/wav'
     this.worker.postMessage({
       command: 'exportWAV',
       type
     })
   },
-  getSource: function () {
+
+  getSource () {
     return new Promise((resolve) => {
       this.exportWAV(function (data) {
         resolve(data)
       }, 'audio/wav')
     })
   },
-  throwError: (this.config && this.config.error) || function (message) {
-    if (message.toString().includes('NotFoundError')) {
-      alert('未找到可用的录音设备！')
-      return
+
+  holdBuffer (e) {
+    if (this.recording) {
+      const data = e.inputBuffer
+      const buffer = !this.config.twoChannel ? [
+        data.getChannelData(0)
+      ] : [
+          data.getChannelData(0),
+          data.getChannelData(1)
+        ]
+      this.worker.postMessage({
+        command: 'record',
+        buffer
+      })
     }
-    console.error(message)
-  },
-  isAudioAvailable: false
+  }
 }
 
-recorderInstance = new Recorder()
-
-export default recorderInstance
+export default Recorder

src/lib/voice-input-button.vue

@@ -23,13 +23,18 @@
 </template>
 
 <script>
-import recorder from './recorder'
+import Recorder from './recorder'
 import { IAT } from './iat-api'
 import ASRConfig from './asr-config'
 import loading from './components/icons/loading'
 import recordingIcon from './components/icons/recording-icon'
 import microphone from './components/icons/microphone'
 import recordingTip from './components/recording-tip'
+const freezeProperty = (obj, key) => {
+  Object.defineProperty(obj, key, {
+    configurable: false
+  })
+}
 export default {
   name: 'voice-input-button',
   components: {
@@ -57,7 +62,7 @@ export default {
   },
   data () {
     return {
-      recorder,
+      recorder: null,
       processing: false,
       startTime: 0,
       time: 0,
@@ -78,7 +83,7 @@ export default {
     },
     start (e) {
       e.preventDefault()
-      if (!this.recorder.isAudioAvailable) {
+      if (!this.isAudioAvailable) {
         alert('无法录音：未找到录音设备、当前浏览器不支持录音或用户未授权！')
         return
       }
@@ -127,15 +132,8 @@ export default {
         console.warn(error)
         this.processing = false
       })
-    },
-    enableAudioButton () {
-      this.isAudioAvailable = true
-      this.$emit('record-ready')
     }
   },
-  created () {
-    document.addEventListener('recorder-init', this.enableAudioButton)
-  },
   computed: {
     pressMode () {
       return this.interactiveMode !== 'touch'
@@ -144,12 +142,23 @@ export default {
       return this.interactiveMode === 'touch'
     }
   },
+  watch: {
+    'recorder.ready' (value) {
+      this.isAudioAvailable = value
+      value && this.$emit('record-ready')
+    }
+  },
   mounted () {
     let {sampleRate, sampleBits} = ASRConfig
-    this.recorder.init({sampleRate, sampleBits})
+    const recorder = new Recorder({sampleRate, sampleBits})
+    const freezKeys = ['worker', 'config', 'callback', 'createTime']
+    freezKeys.forEach(key => {
+      freezeProperty(recorder, key)
+    })
+    this.recorder = recorder
+    this.recorder.init()
   },
   beforeDestroy () {
-    document.removeEventListener('recorder-init', this.enableAudioButton)
     this.recorder.destroy()
     this.recorder = null
   }