@aochuang/common 1.0.0 → 1.0.126

package/common/voice/voice-player-audio.js

@@ -0,0 +1,159 @@
+/**
+ * 通过原生audio实现播放音频
+ * 注意仅支持视频源是mpr3格式，主要用于微聊天记录离线播放场景，离线不支持ajax获取文件解析
+*/
+export default class VoicePlayerAudio {
+  constructor (options) {
+    this.options = Object.assign({}, {
+      playRate: 1,
+      onPlaying: null,
+      onEnded: null,
+      onPlay: null,
+      onError: null,
+      onPause: null
+    }, options)
+    // 创建音频元素
+    this.$audio = document.createElement('audio')
+    this.$audio.autoplay = false
+    this.$audio.onplaying = () => {
+      const totalPosition = this.$audio.duration
+      clearInterval(this._timer)
+      this._timer = setInterval(() => {
+        if (!this._play) {
+          return
+        }
+        const currPosition = this.$audio.currentTime
+        this.options.onPlaying && this.options.onPlaying({
+          currPosition: Math.min(currPosition, totalPosition),
+          totalPosition: totalPosition
+        })
+        if (currPosition >= totalPosition) {
+          clearInterval(this._timer)
+        }
+      }, 100)
+    }
+    this.$audio.onplay = () => {
+      this.options.onPlay && this.options.onPlay()
+    }
+    this.$audio.onended = () => {
+      // 有时候还没播放完就触发了这个事件，导致进度条有问题
+      this.options.onPlaying && this.options.onPlaying({
+        currPosition: Math.min(this.$audio.currentTime, this.$audio.duration),
+        totalPosition: this.$audio.duration
+      })
+      clearInterval(this._timer)
+      this.stop()
+    }
+    this.$audio.addEventListener('stop', () => {
+      clearInterval(this._timer)
+      this.options.onEnded && this.options.onEnded()
+    })
+    this.$audio.onerror = () => {
+      clearInterval(this._timer)
+      this.options.onError && this.options.onError({
+        url: this._url,
+        message: 'Invalid Url'
+      })
+    }
+    this.setPlaybackRate(this.options.playRate)
+  }
+
+  /**
+   * 设置播放倍率
+  */
+  setPlaybackRate (rate) {
+    if (typeof rate !== 'number') {
+      throw new Error('必须是整型')
+    }
+    this.stop()
+    this._playbackRate = rate
+    this.$audio.playbackRate = rate
+  }
+
+  /**
+   * 设置播放进度
+  */
+  setPosition (position) {
+    if (position === this._currPosition) {
+      return
+    }
+    this._currPosition = position
+    this.$audio.currentTime = position
+  }
+
+  /**
+   * 设置播放url地址
+  */
+  setUrl (url, cb) {
+    const play = this._play
+    this._url = url
+    if (!url) {
+      this.stop()
+    }
+    this.$audio.src = url
+    if (play) {
+      this.start()
+    }
+    const eventCb = () => {
+      cb && cb({
+        duration: this.$audio.duration,
+        status: 'success'
+      })
+      this.$audio.removeEventListener('loadedmetadata', eventCb)
+    }
+    this.$audio.addEventListener('loadedmetadata', eventCb)
+  }
+
+  /**
+   * 开始播放
+  */
+  start () {
+    if (this._play) {
+      return
+    }
+    this._play = true
+    this.$audio.play()
+    this.$audio.playbackRate = this._playbackRate
+  }
+
+  /**
+   * 停止播放
+  */
+  stop (callback) {
+    if (!this._play) {
+      callback && callback()
+      return
+    }
+    this._play = false
+    this.$audio.pause()
+    this.$audio.currentTime = 0
+    // 手动创建并派发自定义stop事件
+    this.$audio.dispatchEvent(new Event('stop'))
+  }
+
+  /**
+   * 暂停播放
+  */
+  pause () {
+    this._play = false
+    this.$audio.pause()
+    this.options.onPause && this.options.onPause()
+  }
+
+  /**
+   * 恢复播放
+  */
+  resume () {
+    this._play = true
+    this.$audio.play()
+  }
+
+  /**
+   * 销毁
+  */
+  destroy () {
+    this.stop()
+    this.$audio.remove()
+    clearInterval(this._timer)
+  }
+}

package/common/voice/voice-player.js

@@ -0,0 +1,309 @@
+import { loadScript } from '../../utils/file'
+import { getBenzAMRRecorderLibPath } from './util'
+/**
+ * 通过第三方库解析音频文件进行播放
+ * 由于电话这种音频不同设备上生成的格式不一样，ios是amr格式，而andorid是mp3格式，同时html5不支持amr格式，所以需要转码播放
+*/
+
+function loadAmrRecorder () {
+  return new Promise((resolve, reject) => {
+    if (window.BenzAMRRecorder) {
+      resolve(window.BenzAMRRecorder)
+    } else {
+      return loadScript(getBenzAMRRecorderLibPath()).then(() => {
+        resolve(window.BenzAMRRecorder)
+      }, reject)
+    }
+  })
+}
+
+export default class VoicePlayer {
+  _url = null
+  _play = false
+  _currPosition = 0
+  _playbackRate = 1
+  _onUrlChange = null
+  _onPlayChange = null
+
+  constructor (options) {
+    this.options = Object.assign({}, {
+      playRate: 1,
+      onPlaying: null,
+      onEnded: null,
+      onPlay: null,
+      onError: null,
+      onPause: null
+    }, options)
+    this._timer = null
+    this._totalPosition = null
+    this.setPlaybackRate(this.options.playRate)
+    loadAmrRecorder().then((BenzAMRRecorder) => {
+      let _instance = null
+      const _checkPlay = () => {
+        this._totalPosition = _instance.getDuration()
+        clearInterval(this._timer)
+        this._timer = setInterval(() => {
+          if (!_instance.isPlaying()) {
+            clearTimeout(this._timer)
+            return
+          }
+          this._currPosition = _instance.getCurrentPosition() * this._playbackRate
+          // console.log(this._currPosition, _instance._isPlaying)
+          const surplus = this._totalPosition - this._currPosition
+          if (surplus < 0.1) {
+            this._currPosition += surplus
+          }
+          if (this._currPosition <= this._totalPosition) {
+            this._onPlaying({
+              currPosition: this._currPosition,
+              totalPosition: this._totalPosition
+            })
+            if (this._currPosition === this._totalPosition) {
+              clearInterval(this._timer)
+            }
+          } else {
+            clearInterval(this._timer)
+          }
+        }, 100)
+        this.options.onPlay && this.options.onPlay()
+      }
+      const _checkUrl = (cb) => {
+        this._totalPosition = 0
+        this._currPosition = 0
+        clearTimeout(this._timer)
+        if (!this._url) {
+          return
+        }
+        if (_instance) {
+          _instance.onPlay(() => {})
+          _instance.onEnded(() => {})
+          _instance.stop()
+        }
+        _instance = new BenzAMRRecorder()
+        _instance.initWithUrl(this._url).then(() => {
+          if (this._play) {
+            _instance.play()
+            _instance.setPosition(this._currPosition)
+          }
+          this._totalPosition = _instance.getDuration()
+          cb({
+            status: 'success',
+            duration: this._totalPosition
+          })
+        }, (err) => {
+          this.options.onError && this.options.onError({
+            url: this._url,
+            message: err.message
+          })
+          cb({
+            status: 'error',
+            message: err.message
+          })
+        })
+        _instance.onCreatedRecrod((evt) => {
+          evt.playbackRateValue = this._playbackRate
+        })
+        _instance.onResume(() => {
+          _checkPlay()
+        })
+        _instance.onPause(() => {
+          clearTimeout(this._timer)
+          this.options.onPause && this.options.onPause()
+        })
+        _instance.onPlay(() => {
+          _checkPlay()
+        })
+        _instance.onStop(() => {
+          this._play = false
+          this.options.onEnded && this.options.onEnded()
+          if (this._onStopCallback) {
+            this._onStopCallback()
+            this._onStopCallback = null
+          }
+        })
+      }
+      this._onPlayChange = (type) => {
+        clearInterval(this._timer)
+        if (_instance && _instance.isInit()) {
+          if (type === 'stop') {
+            _instance.stop()
+          } else if (type === 'play') {
+            _instance.play()
+          } else if (type === 'pause') {
+            _instance.pause()
+          } else if (type === 'resume') {
+            _instance.resume()
+          }
+        }
+      }
+      this._onUrlChange = (cb) => {
+        _checkUrl(cb)
+      }
+      this._onPositionChange = ({ position }) => {
+        if (_instance && _instance.isPlaying()) {
+          _instance.setPosition(position)
+        }
+      }
+      this._onPlaying = (evt) => {
+        this.options.onPlaying && this.options.onPlaying(evt)
+      }
+      this._onGetRawData = () => {
+        if (!_instance) {
+          return
+        }
+        return _instance._rawData
+      }
+      _checkUrl()
+    })
+  }
+
+  setPlaybackRate (rate) {
+    if (typeof rate !== 'number') {
+      throw new Error('必须是整型')
+    }
+    this._playbackRate = rate
+  }
+
+  setPosition (position) {
+    if (position === this._currPosition) {
+      return
+    }
+    this._currPosition = position
+    this._onPositionChange && this._onPositionChange({
+      position
+    })
+  }
+
+  ajax (url) {
+    return new Promise((resolve, reject) => {
+      var xhr = new XMLHttpRequest()
+      xhr.open('GET', url, true)
+      xhr.responseType = 'arraybuffer'
+      xhr.onload = function () {
+        resolve(this.response)
+      }
+      xhr.onerror = () => {
+        reject(new Error('Failed to fetch ' + url))
+      }
+      xhr.send()
+    })
+  }
+
+  getRawData () {
+    return this._onGetRawData && this._onGetRawData()
+  }
+
+  convertToWavByBuffer (buffer) {
+    return new Promise((resolve, reject) => {
+      loadAmrRecorder().then((BenzAMRRecorder) => {
+        const _instance = new BenzAMRRecorder()
+        _instance._runAMRWorker({
+          command: 'toWAV',
+          buffer
+        }, (rs) => {
+          if (!rs) {
+            reject('解码失败')
+          } else {
+            const wav = new Blob([rs], {
+              type: 'audio/wav'
+            })
+            resolve(wav)
+          }
+        })
+      }, reject)
+    })
+  }
+
+  convertToWavByUrl (url) {
+    return new Promise((resolve, reject) => {
+      loadAmrRecorder().then((BenzAMRRecorder) => {
+        const _instance = new BenzAMRRecorder()
+        this.ajax(url).then(rs => {
+          const u8Array = new Uint8Array(rs)
+          _instance.decodeAMRAsync(u8Array).then((samples) => {
+            // samples为空证明是双声道模式
+            if (!samples) {
+              _instance._playEmpty()
+              BenzAMRRecorder.RecorderControl.decodeAudioArrayBufferByContext(rs).then((data) => {
+                return _instance.encodeAMRAsync(data, BenzAMRRecorder.RecorderControl.getCtxSampleRate())
+              }, reject).then((rawData) => {
+                _instance._runAMRWorker({
+                  command: 'toWAV',
+                  buffer: rawData
+                }, (rs) => {
+                  if (!rs) {
+                    reject('解码失败')
+                  } else {
+                    const wav = new Blob([rs], {
+                      type: 'audio/wav'
+                    })
+                    resolve(wav)
+                  }
+                })
+              }, reject)
+            } else {
+              _instance._runAMRWorker({
+                command: 'toWAV',
+                buffer: u8Array
+              }, (rs) => {
+                if (!rs) {
+                  reject('解码失败')
+                } else {
+                  const wav = new Blob([rs], {
+                    type: 'audio/wav'
+                  })
+                  resolve(wav)
+                }
+              })
+            }
+          }, reject)
+        })
+      }, reject)
+    })
+  }
+
+  setUrl (url, cb) {
+    this._url = url
+    if (!url) {
+      this.stop()
+    } else {
+      this._onUrlChange && this._onUrlChange(ctx => {
+        cb && cb(ctx)
+      })
+    }
+  }
+
+  start () {
+    if (this._play) {
+      return
+    }
+    this._play = true
+    this._onPlayChange && this._onPlayChange('play')
+  }
+
+  stop (callback) {
+    if (!this._play) {
+      callback && callback()
+      return
+    }
+    this._play = false
+    this._onPlayChange && this._onPlayChange('stop')
+    this._onStopCallback = callback
+  }
+
+  pause () {
+    this._play = false
+    this._onPlayChange && this._onPlayChange('pause')
+  }
+
+  resume () {
+    this._play = true
+    this._onPlayChange && this._onPlayChange('resume')
+  }
+
+  destroy () {
+    this.stop()
+    this._onStopCallback = null
+    clearInterval(this._timer)
+  }
+}