@aochuang/common 1.0.1 → 1.0.126

package/common/voice-player/voice-player.vue

@@ -0,0 +1,785 @@
+<template>
+  <div class="ac-voice-player" :class="['bi-wechat-chat-voice-player--' + type, {'is-error': isError}]">
+    <div class="ac-voice-player__switch">
+      <ui-icon
+        v-if="isLoading || isGetUrling || loading"
+        class="ac-voice-player__loading"
+        name="loading"
+        title="资源加载中"
+      />
+      <ui-icon
+        v-else-if="isPlaying"
+        class="ac-voice-player__switch-btn"
+        name="stop-line1"
+        :title="isSuperPause ? '暂停' : '停止'"
+        @click="handlePauseClick"
+      />
+      <ui-icon
+        v-else
+        class="ac-voice-player__switch-btn"
+        name="play-line1"
+        title="播放"
+        @click="handlePlayClick"
+      />
+    </div>
+    <div class="ac-voice-player__progress">
+      <div v-if="isError" class="ac-voice-player__error" :title="errorMsg">{{ errorMsg }}</div>
+      <div v-else class="ac-voice-player__progerss-fields">
+        <div class="ac-voice-player__progerss-field">{{ playSecondsText }}</div>
+        <div class="ac-voice-player__progerss-field">{{ totalSecondsText }}</div>
+      </div>
+      <div class="ac-voice-player__progerss-bar">
+        <input
+          class="ac-voice-player__progerss-bar-control"
+          type="range"
+          :value="playCurrPosition"
+          :max="voiceSeconds"
+          min="0"
+          step="0.001"
+          :style="controlStyle"
+          :disabled="isLoading || isGetUrling || loading"
+          @input="handleControlChange"
+        >
+      </div>
+    </div>
+    <div class="ac-voice-player__rote">
+      <ui-popover ref="popover" :visible-arrow="true" trigger="click">
+        <span slot="reference" class="ac-voice-player__rote-btn">
+          <span class="ac-voice-player__rote-text">{{ currRateOption.showText }}</span>
+        </span>
+        <ul class="ac-voice-player__rote-menu">
+          <template v-if="isSuperChangeRate">
+            <li
+              v-for="(item, index) in rateOptions"
+              :key="index"
+              class="ac-voice-player__rote-menu-item"
+              :class="{'is-active': item.value === controlPlayRate}"
+              @click="handleRateItemClick(item)"
+            >{{ item.text }}</li>
+          </template>
+          <template v-else>
+            <li
+              class="ac-voice-player__rote-menu-item is-disabled"
+              @click="handleRateItemClick(item, true)"
+            >AAC格式音频不支持切换倍率</li>
+          </template>
+        </ul>
+      </ui-popover>
+    </div>
+    <div v-if="isOrigAmr && enableConvertToWav" class="ac-voice-player__wav" :class="{'is-disabled': !isNeedConvertWav || progressing}" @click="handleConvertToWavClick">
+      <ac-tooltip :text="isNowWav ? '已经转为wav格式，无需再次转换' : progressing ? '播放中不允许转换' : '转成wav格式后，下次播放速度会提高，播放时也会自动转换'">
+        <ui-icon
+          v-if="converting"
+          class="ac-voice-player__loading"
+          name="loading"
+          title="转换中"
+        />
+        <span v-else class="ac-voice-player__wav-btn">转WAV</span>
+      </ac-tooltip>
+    </div>
+    <div class="ac-voice-player__download" v-if="allowDownload" @click="handleDownloadClick">
+      <ui-icon
+        class="ac-voice-player__download-btn"
+        name="download-line"
+        title="下载"
+      ></ui-icon>
+    </div>
+  </div>
+</template>
+<script>
+import AcTooltip from '../tooltip'
+import { getRateOptions } from '../voice'
+import { formatOssPath } from '@aochuang/common/utils/oss'
+import Message from '../../components/message'
+
+function formatSeconds (seconds) {
+  if (!seconds) {
+    return '00:00'
+  } else {
+    const nextMinutes = Math.floor(seconds / 60)
+    const nextSeconds = Math.ceil(seconds - nextMinutes * 60)
+    let result = ''
+    if (nextMinutes <= 9) {
+      result = '0' + nextMinutes
+    } else {
+      result = nextMinutes
+    }
+    result += ':'
+    if (nextSeconds <= 9) {
+      result += '0' + nextSeconds
+    } else {
+      result += nextSeconds
+    }
+    return result
+  }
+}
+
+export default {
+  name: 'AcVoicePlayer',
+  components: {
+    AcTooltip
+  },
+  inject: ['AcVoice'],
+  props: {
+    id: {
+      type: [String, Number],
+      required: true
+    },
+    url: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    seconds: {
+      type: [String, Number]
+    },
+    allowDownload: {
+      type: Boolean,
+      default: true
+    },
+    getUrlMethod: {
+      type: Function
+    },
+    enableConvertToWav: {
+      type: Boolean,
+      default: false
+    },
+    updateWavMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      progressing: false, // 真正的播放中
+      converting: false,
+      innerUrl: this.url,
+      isGetUrling: false,
+      controlPlaySeconds: this.seconds,
+      controlPlayRate: 1,
+      controlPlayPosition: 0,
+      isSuperChangeProgress: false
+    }
+  },
+  computed: {
+    isOrigAmr () {
+      if (!this.url) {
+        return false
+      }
+      const url = this.url.toLocaleLowerCase()
+      return url.indexOf('.amr') >= 0
+    },
+    isNowWav () {
+      if (!this.innerUrl) {
+        return false
+      }
+      const url = this.innerUrl.toLocaleLowerCase()
+      return url.indexOf('.wav') >= 0
+    },
+    isNeedConvertWav () {
+      if (this.isNowWav) {
+        return false
+      }
+      return this.isOrigAmr
+    },
+    rateOptions () {
+      return getRateOptions()
+    },
+    currRateOption () {
+      return this.rateOptions.find(v => v.value === this.controlPlayRate)
+    },
+    controlStyle () {
+      return {
+        'background-size': `${this.playPercentage}% 100%`
+      }
+    },
+    isLoading () {
+      if (!this.AcVoice) {
+        return false
+      }
+      if (!this.AcVoice.isPlaying(this.id)) {
+        return false
+      }
+      return this.AcVoice.loading
+    },
+    isPlaying () {
+      let rs = null
+      if (this.AcVoice) {
+        rs = this.AcVoice.isPlaying(this.id)
+      }
+      return rs
+    },
+    isPause () {
+      let rs = null
+      if (this.AcVoice) {
+        rs = this.AcVoice.isPause(this.id)
+      }
+      return rs
+    },
+    isStop () {
+      return !this.isPlaying && !this.isPause
+    },
+    errorMsg () {
+      let rs = null
+      if (this.AcVoice) {
+        rs = this.AcVoice.getErrorMsg(this.id)
+      }
+      return rs
+    },
+    isError () {
+      return !!this.errorMsg
+    },
+    voiceSrc () {
+      return this.innerUrl
+    },
+    voiceSeconds () {
+      return this.controlPlaySeconds ? this.controlPlaySeconds : 0
+    },
+    playPercentage () {
+      if (this.isStop) {
+        return 0
+      }
+      return this.AcVoice.percentage
+    },
+    playTotalPosition () {
+      if (this.isStop) {
+        return 0
+      }
+      return this.AcVoice.totalPosition
+    },
+    totalSecondsText () {
+      return formatSeconds(this.voiceSeconds)
+    },
+    playCurrPosition () {
+      if (this.isStop) {
+        return 0
+      }
+      return this.AcVoice.currPosition
+    },
+    playSecondsText () {
+      let seconds = 0
+      if (this.isPlaying || this.isPause) {
+        seconds = this.AcVoice.currPosition
+      }
+      return formatSeconds(seconds)
+    },
+    isSuperChangeRate () {
+      return this.AcVoice.isSuperChangeRate(this.innerUrl)
+    },
+    isSuperPause () {
+      return this.isSuperChangeRate
+    }
+  },
+  watch: {
+    seconds () {
+      this.controlPlaySeconds = this.seconds
+    },
+    playTotalPosition () {
+      if (!this.playTotalPosition) {
+        return
+      }
+      if (this.controlPlaySeconds) {
+        return
+      }
+      this.controlPlaySeconds = this.playTotalPosition
+    },
+    playCurrPosition (val) {
+      this.controlPlayPosition = val
+    },
+    url () {
+      this.innerUrl = this.url
+    },
+    isPlaying (val) {
+      if (!val) {
+        this.progressing = false
+      }
+    }
+  },
+  mounted () {
+    this.AcVoice.$on('playing', this.handleVoicePlaying)
+    this.AcVoice.$on('end', this.handleVoiceEnd)
+    this.AcVoice.$on('error', this.handleVoiceError)
+  },
+  beforeDestroy () {
+    this.AcVoice.remove(this.id)
+    this.AcVoice.$off('playing', this.handleVoicePlaying)
+    this.AcVoice.$off('end', this.handleVoiceEnd)
+    this.AcVoice.$off('error', this.handleVoiceError)
+  },
+  methods: {
+    handleVoiceError (e) {
+      if (e.type === 'aac' && e.playId === this.id) {
+        if (e.message && e.message === 'Maximum call stack size exceeded') {
+          if (this.allowDownload) {
+            Message.error('抱歉，目前不支持该文件播放，请下载本地进行播放～')
+          } else {
+            Message.error('抱歉，目前不支持该文件播放～')
+          }
+        }
+      }
+    },
+    handleVoiceEnd () {
+      this.progressing = false
+    },
+    handleVoicePlaying (evt) {
+      this.isSuperChangeProgress = this.AcVoice.isSuperChangeProgress(this.innerUrl)
+      if (!this.isNeedConvertWav) {
+        return
+      }
+      if (!this.isPlaying) {
+        return
+      }
+      if (this.converting) {
+        return
+      }
+      // 拿到raw数据转成wav并上传
+      if (!evt.playRawData) {
+        return
+      }
+      this.progressing = true
+      this.converting = true
+      this.AcVoice.convertToWavByBuffer(evt.playRawData).then(rs => {
+        if (this.updateWavMethod) {
+          return this.updateWavMethod({
+            blob: rs
+          }).then((nextUrl) => {
+            if (nextUrl) {
+              this.innerUrl = nextUrl
+            }
+          })
+        }
+      }).finally(() => {
+        this.converting = false
+      })
+    },
+    handleConvertToWavClick () {
+      if (this.converting || this.progressing || !this.isNeedConvertWav) {
+        return
+      }
+      this.converting = true
+      this.AcVoice.convertToWavByUrl(this.url).then(rs => {
+        if (this.updateWavMethod) {
+          return this.updateWavMethod({
+            blob: rs
+          }).then((nextUrl) => {
+            if (nextUrl) {
+              this.innerUrl = nextUrl
+            }
+          })
+        }
+      }).finally(() => {
+        this.converting = false
+      })
+    },
+    handleRateItemClick (item, isDisabled) {
+      if (isDisabled === true) {
+        this.$warn('AAC格式音频不支持切换倍率')
+        return
+      }
+      this.controlPlayRate = item.value
+      if (this.isPlaying) {
+        this.controlPlayPosition = 0
+        this.play()
+      } else {
+        this.AcVoice.setPlaybackRate(item.value)
+      }
+      this.$refs.popover.hide()
+    },
+    handleDownloadClick () {
+      if (!this.voiceSrc) {
+        if (this.getUrlMethod) {
+          this.$warn('请先点击播放按钮，获取录音文件地址后再来下载')
+          return
+        }
+        this.$warn('未找到录音文件地址，无法下载')
+        return
+      }
+      window.open(formatOssPath(this.voiceSrc), '_blank')
+    },
+    handleControlChange (evt) {
+      const targetValue = evt.target.value
+      clearTimeout(this._controlChangeTimer)
+      if (this.AcVoice.playUrl !== this.innerUrl) {
+        Promise.all([
+          this.play()
+        ]).then(() => {
+          if (!this.AcVoice.isSuperChangeProgress(this.innerUrl)) {
+            !this._notTips && this.$warn('AAC格式音频不支持更改播放进度，可以下载本地播放', () => {
+              this._notTips = false
+            })
+            this._notTips = true
+            return
+          }
+          this._controlChangeTimer = setTimeout(() => {
+            this.AcVoice.setPosition(parseFloat(targetValue))
+          }, 100)
+        })
+      } else {
+        if (!this.isPlaying) {
+          this.play().then(() => {
+            if (!this.AcVoice.isSuperChangeProgress(this.innerUrl)) {
+              !this._notTips && this.$warn('AAC格式音频不支持更改播放进度，可以下载本地播放', () => {
+                this._notTips = false
+              })
+              this._notTips = true
+              return
+            }
+            this._controlChangeTimer = setTimeout(() => {
+              this.AcVoice.setPosition(parseFloat(targetValue))
+            }, 100)
+          })
+        } else {
+          if (!this.AcVoice.isSuperChangeProgress(this.innerUrl)) {
+            !this._notTips && this.$warn('AAC格式音频不支持更改播放进度，可以下载本地播放', () => {
+              this._notTips = false
+            })
+            this._notTips = true
+            return
+          }
+          this.AcVoice.setPosition(parseFloat(targetValue))
+        }
+      }
+    },
+    handlePauseClick () {
+      if (this.loading) {
+        return
+      }
+      this.AcVoice.pause()
+    },
+    handlePlayClick () {
+      if (!this.url) {
+        this.$warn('未找到录音文件地址，无法播放')
+        return
+      }
+      if (this.isPause) {
+        this.resume()
+      } else {
+        let ps = Promise.resolve()
+        if (this.getUrlMethod) {
+          this.isGetUrling = true
+          ps = this.getUrlMethod().then((url) => {
+            this.innerUrl = url
+          }).finally(() => {
+            this.isGetUrling = false
+          })
+        }
+        ps.then(() => {
+          this.controlPlayPosition = 0
+          this.play()
+        })
+      }
+    },
+    resume () {
+      this.AcVoice.resume()
+    },
+    play () {
+      if (this.loading) {
+        return
+      }
+      if (this.isPlaying) {
+        return
+      }
+      this.progressing = true
+      this.AcVoice.setPlaybackRate(this.controlPlayRate)
+      this.AcVoice.setPosition(this.controlPlayPosition)
+      this.loading = true
+      return Promise.all([
+        this.AcVoice.start(this.id, this.voiceSrc, this.voiceSeconds, ctx => {
+          if (ctx.status === 'success' && ctx.duration) {
+            this.controlPlaySeconds = ctx.duration
+          }
+        })
+      ]).finally(() => {
+        this.loading = false
+      })
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._controlChangeTimer)
+  }
+}
+</script>
+<style lang="less">
+.ac-voice-player__rote-menu{
+  list-style: none;
+  margin: 0;
+  padding: 6px 0;
+}
+.ac-voice-player__rote-menu-item{
+  height: 30px;
+  line-height: 30px;
+  padding: 0 24px 0 12px;
+  cursor: pointer;
+  transition: all .3s;
+  position: relative;
+  &.is-active{
+    background-color: #F0F8FC;
+    color: #00A0EB;
+    &:after{
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%) rotate(-45deg);
+      content: '';
+      display: inline-block;
+      width: 6px;
+      height: 4px;
+      border: 1px solid #00A0EB;
+      border-top: 0;
+      border-right: 0;
+      margin-top: -1px;
+    }
+  }
+  &.is-disabled{
+    color: #999;
+    cursor: not-allowed;
+  }
+  &:hover{
+    &:not(.is-disabled) {
+      background-color: rgba(0,0,0,.06);
+    }
+  }
+}
+.bi-wechat-chat-voice-player--default {
+  &.ac-voice-player{
+    display: flex;
+    flex-direction: row;
+    height: 40px;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    background-color: #fff;
+    font-size: 12px;
+    line-height: 1.75em;
+    &.is-error{
+      border: 1px solid #f36d6f;
+      background-color: rgba(225, 118, 114,.1);
+    }
+  }
+  .ac-voice-player__error{
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    color: #f36d6f;
+  }
+  .ac-voice-player__switch,
+  .ac-voice-player__progress,
+  .ac-voice-player__rote,
+  .ac-voice-player__download,
+  .ac-voice-player__wav{
+    border-right: 1px solid #ddd;
+    padding: 0 6px;
+    &:last-child{
+      border-right: 0;
+    }
+    &.is-disabled{
+      opacity: .5;
+      cursor: not-allowed;
+      .ac-voice-player__switch-btn,
+      .ac-voice-player__rote-btn,
+      .ac-voice-player__download-btn,
+      .ac-voice-player__wav-btn{
+        cursor: not-allowed;
+      }
+    }
+    &:not(.is-disabled) {
+      .ac-voice-player__switch-btn,
+      .ac-voice-player__rote-btn,
+      .ac-voice-player__download-btn,
+      .ac-voice-player__wav-btn{
+        &:hover{
+          color: #00A0EB;
+        }
+      }
+    }
+  }
+  .ac-voice-player__switch-btn,
+  .ac-voice-player__rote-btn,
+  .ac-voice-player__download-btn,
+  .ac-voice-player__wav-btn{
+    vertical-align: top;
+    margin-top: 8px;
+    display: inline-block;
+    cursor: pointer;
+    height: 24px;
+    line-height: 24px;
+  }
+  .ac-voice-player__wav{
+    min-width: 40px;
+    text-align: center;
+  }
+  .ac-voice-player__loading{
+    vertical-align: top;
+    margin-top: 7px;
+    display: inline-block;
+    height: 24px;
+    line-height: 24px;
+    color: #999;
+    cursor: not-allowed;
+  }
+  .ac-voice-player__rote-btn{
+    min-width: 28px;
+    text-align: center;
+  }
+  .ac-voice-player__progress{
+    flex: 1;
+    min-width: 0;
+  }
+  .ac-voice-player__progerss-fields{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 4px;
+  }
+  .ac-voice-player__progerss-bar{
+    line-height: 1;
+    position: relative;
+    &.is-disabled{
+      &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
+      }
+    }
+  }
+  .ac-voice-player__progerss-bar-control{
+    outline: none;
+    vertical-align: top;
+    -webkit-appearance: none;/*清除系统默认样式*/
+    width:100% !important;
+    background: -webkit-linear-gradient(#1aa2e8, #1aa2e8) no-repeat, #ddd;
+    background-size: 0% 100%;/*设置左右宽度比例*/
+    height: 3px;/*横条的高度*/
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;/*清除系统默认样式*/
+      height:12px;/*拖动块高度*/
+      width: 12px;/*拖动块宽度*/
+      background: #fff;/*拖动块背景*/
+      border-radius: 50%; /*外观设置为圆形*/
+      border: solid 1px #ddd; /*设置边框*/
+    }
+  }
+}
+.bi-wechat-chat-voice-player--concise{
+  position: relative;
+  padding-bottom: 32px;
+  .ac-voice-player__progress{
+    position: relative;
+    padding: 13px 60px 6px;
+  }
+  .ac-voice-player__progerss-fields{
+    .ac-voice-player__progerss-field{
+      &:first-child {
+        position: absolute;
+        left: 6px;
+        top: 0;
+      }
+      &:last-child {
+        position: absolute;
+        right: 6px;
+        top: 0;
+      }
+    }
+  }
+  .ac-voice-player__switch{
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1px solid #404040;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all .25s;
+    &:hover {
+      background-color: #F4F5F7;
+    }
+  }
+  .ac-voice-player__progerss-bar{
+    line-height: 1;
+  }
+  .ac-voice-player__progerss-bar-control{
+    outline: none;
+    vertical-align: top;
+    -webkit-appearance: none;/*清除系统默认样式*/
+    width:100% !important;
+    background: -webkit-linear-gradient(#1aa2e8, #1aa2e8) no-repeat, #ddd;
+    background-size: 0% 100%;/*设置左右宽度比例*/
+    height: 6px;/*横条的高度*/
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;/*清除系统默认样式*/
+      height:16px;/*拖动块高度*/
+      width: 16px;/*拖动块宽度*/
+      background: #fff;/*拖动块背景*/
+      border-radius: 50%; /*外观设置为圆形*/
+      border: solid 1px #ddd; /*设置边框*/
+    }
+  }
+  .ac-voice-player__rote{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+  .ac-voice-player__rote-btn{
+    height: 28px;
+    line-height: 28px;
+    display: inline-block;
+    vertical-align: top;
+    cursor: pointer;
+    padding: 0 6px;
+    border-radius: 3px;
+    transition: all .25s;
+    &:before {
+      content: '\500D\901F\FF1A';
+    }
+    &:after {
+      content: '';
+      vertical-align: top;
+      margin-top: 12px;
+      margin-left: 4px;
+      display: inline-block;
+      border: 4px solid #999;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom: 0;
+    }
+    &:hover {
+      background-color: #F4F5F7;
+    }
+  }
+  .ac-voice-player__download{
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: 28px;
+    line-height: 28px;
+    display: inline-block;
+    vertical-align: top;
+    cursor: pointer;
+    padding: 0 6px;
+    border-radius: 3px;
+    transition: all .25s;
+    .ui-icon {
+      vertical-align: top;
+      display: inline-block;
+      margin-right: 3px;
+    }
+    &:after {
+      content: '\4E0B\8F7Dmp3';
+    }
+    &:hover {
+      background-color: #F4F5F7;
+    }
+  }
+}
+</style>