GCLS_Page_Book/src/components/common/VoicePlay.vue

<!--  -->
<template>
    <div @click="handlePlayVoice" class="content-voices" v-if="mp3||wav">
        <img :src="voiceSrc">
        <span :class="seconds ? '' : 'noMp3'" v-if="seconds">{{ seconds }}</span>
    </div>
</template>

<script>
export default {
    components: {},
    props: ["seconds", "mp3", "wav"],
    data () {
        return {
            audio: new Audio(),
            voiceSrc: "",
            voicePauseSrc: require("../../assets/dialogue/Ellipse 40.png"),
            voicePlaySrc: require("../../assets/dialogue/voiceplay.png"),
        };
    },
    computed: {},
    watch: {},
    //方法集合
    methods: {
        handlePlayVoice () {
            if (!this.audio.paused) {
                this.audio.pause();
            } else {
                let _this = this;
                _this.audio.pause();
                _this.audio.load();
                if (!_this.mp3 && _this.wav) {
                    _this.audio.src = this.wav
                } else {
                    _this.audio.src = _this.mp3;
                    _this.audio.loop = false;
                }

                _this.audio.play();
            }

        },
        stopAudio () {
            if (this.audio) {
                this.audio.pause();
            }
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        var that = this;
        window.stopAudioVoice = function () {
            if (that.audio) {
                that.audio.pause();
            }
        };
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        let _this = this;
        _this.voiceSrc = _this.voicePauseSrc;
        _this.audio.addEventListener("play", function () {
            console.log("播放");
            _this.voiceSrc = _this.voicePlaySrc;
        });
        _this.audio.addEventListener("pause", function () {
            _this.voiceSrc = _this.voicePauseSrc;
        });
        _this.audio.addEventListener("ended", function () {
            console.log("停止");
            _this.voiceSrc = _this.voicePauseSrc;
        });
    },
    beforeCreate () { }, //生命周期 - 创建之前
    beforeMount () { }, //生命周期 - 挂载之前
    beforeUpdate () { }, //生命周期 - 更新之前
    updated () { }, //生命周期 - 更新之后
    beforeDestroy () {
    }, //生命周期 - 销毁之前
    destroyed () {
    }, //生命周期 - 销毁完成
    activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.content-voices {
    display: flex;
    align-items: center;
    padding: 14px 21px 16px 21px;
    border-radius: 168px;
    width: 100%;
    height: 68px;
    font-size: 0;
    cursor: pointer;
    span {
        color: #2c2c2c;
        font-size: 24px;
        line-height: 30px;
        float: left;
        font-family: sourceR;
        &.noMp3 {
            margin-left: 0px;
        }
    }
    img {
        height: 38px;
        float: left;
    }
}
.questionMiddle {
    .content-voices {
        padding: 10px 14px;
        width: 100%;
        height: 46px;
        span {
            font-size: 16px;
            line-height: 20px;
            &.noMp3 {
                margin-left: 0px;
            }
        }
        img {
            height: 26px;
            float: left;
        }
    }
}
.questionSmall {
    .content-voices {
        padding: 7px 10px 8px 10px;
        border-radius: 84px;
        height: 34px;
        span {
            font-size: 12px;
            line-height: 15px;
            &.noMp3 {
                margin-left: 0px;
            }
        }
        img {
            height: 19px;
        }
    }
}
</style>