<el-table-column align="center" width="120px" label="操作" fixed="right" header-align="center">
  <template slot-scope="{row}">
    <el-button type="text" size="small" @click="openRecord(row)">录音调听</el-button>
  </template>
 </el-table-column>
<el-dialog
  title="录音调听"
  visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose"
  >
    <li v-if="amrPlayStatus" class="play-button el-icon-video-pause" @click="pauseAmrPlay"></li>
    <li v-else class="play-button el-icon-video-play" @click="resumeAmrPlay"></li>
</el-dialog>

import BenzAMRRecorder from 'benz-amr-recorder'
export default {
  data () {
    return {
      amrPlay: '',
      amrPlayStatus: false,
    }
  },
  methods: {
    openRecord (row) {
      this.amrPlayStatus = false
      this.dialogVisible = true
      this.$nextTick(() => {
        this.amrPlay = new BenzAMRRecorder()
        this.amrPlay.onPlay(() => {
          this.amrPlayStatus = true
        })
        this.amrPlay.onStop(() => {
          this.amrPlayStatus = false
        })
        this.amrPlay.onPause(() => {
          this.amrPlayStatus = false
        })
        this.amrPlay.onResume(() => {
          this.amrPlayStatus = true
        })
        this.amrPlay.initWithUrl(row.url).then(() => {
          console.info('armPlay:', this.amrPlay)
          this.amrPlay.play()
        })
      })
    },
    handleClose () {
      if (this.amrPlay) {
        this.amrPlay.stop()
      }
      this.dialogVisible = false
    },
    pauseAmrPlay () {
      if (this.amrPlay) {
        this.amrPlay.pause()
      }
    },
    resumeAmrPlay () {
      if (this.amrPlay) {
        if (this.amrPlay.isPaused()) {
          this.amrPlay.resume()
        } else if (!this.amrPlay.isPlaying()) {
          this.amrPlay.play()
        }
      }
    },
  }
}