vue项目中插入audio组件，支持暂停播放

 * @FileDescription: 播放声音组件
 * @Author: Pound
 * @Date: 2020/10/28
 * @LastEditors: Pound
 * @LastEditTime: 2020/10/28
 -->
<template>
    <audio
        :src="audioUrl"
        autoplay=""
        controls=""
        @error="playAudioError()"
        :paused="audioPaused"
        @ended="playAudioEnd()"
        style="display:none;"
        ref="audioVo"
    ></audio>
</template>
<script>
export default {
    name: 'PlayAudio',
    data() {
        return {
            audioUrl: '',
            audioIsPlaying: false,
            audioPaused: false, //是否暂停
        }
    },
    methods: {
        /**
         * @description: 语音播报
         * @param {Boolean} status 1 开始 2 暂停
         * @param {String} url 语音文件url
         * @param {Function} cb 回调函数
         * @param {Function} endCb 播放结束的回调函数
         * @param {Function} errorCb 播放错误的回调函数
         * @returns audioObj 音频对象
         */
        play(status, url, cb){
            if(status===1){
                if (url.indexOf('.mp3') > -1 || url.indexOf('.wav') > -1 || url.indexOf('.ogg') > -1) {
                    this.audioUrl = url
                    this.audioPaused = false
                    this.$refs.audioVo.play()
                    cb && cb()
                    /* useCapture   可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。
                    可能值：
                    true - 事件句柄在捕获阶段执行
                    false- 默认。事件句柄在冒泡阶段执行 */
                } else {
                    console.error('未找到语音文件')
                }
            }else if(status===2){
                this.$refs.audioVo.pause()
                this.audioPaused = true
            }
        },
        // 播放音频结束事件
        playAudioEnd() {
            
        },
        // 播放失败
        playAudioError() {
            
        },
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>

这是组件的代码，可以直接复用，各个参数也写的非常清楚，欢迎补充