|
@@ -1,133 +1,137 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
- <div @click="handlePlayVoice" class="content-voices" v-if="mp3">
|
|
|
- <img :src="voiceSrc">
|
|
|
- </div>
|
|
|
+ <div @click="handlePlayVoice" class="content-voices" v-if="mp3">
|
|
|
+ <img :src="voiceSrc" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- components: {},
|
|
|
- props: ["seconds", "mp3", "wav"],
|
|
|
- data () {
|
|
|
- return {
|
|
|
- audio: new Audio(),
|
|
|
- voiceSrc: "",
|
|
|
- voicePauseSrc: require("../../assets/common/icon-voice-red.png"),
|
|
|
- voicePlaySrc: require("../../assets/common/icon-voice-red-play.png"),
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {},
|
|
|
- watch: {},
|
|
|
- //方法集合
|
|
|
- methods: {
|
|
|
- handlePlayVoice () {
|
|
|
- if (!this.audio.paused) {
|
|
|
- this.audio.pause();
|
|
|
- } else {
|
|
|
- let _this = this;
|
|
|
- _this.audio.pause();
|
|
|
- _this.audio.load();
|
|
|
- _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();
|
|
|
- }
|
|
|
- };
|
|
|
+ components: {},
|
|
|
+ props: ["seconds", "mp3", "wav"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ audio: new Audio(),
|
|
|
+ voiceSrc: "",
|
|
|
+ voicePauseSrc: require("../../assets/common/icon-voice-red.png"),
|
|
|
+ voicePlaySrc: require("../../assets/common/icon-voice-red-play.png"),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ handlePlayVoice() {
|
|
|
+ let _this = this;
|
|
|
+ let audio = document.getElementsByTagName("audio");
|
|
|
+ audio.forEach((item) => {
|
|
|
+ if (item.src != _this.mp3) {
|
|
|
+ item.pause();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (!_this.audio.paused) {
|
|
|
+ _this.audio.pause();
|
|
|
+ } else {
|
|
|
+ let _this = _this;
|
|
|
+ _this.audio.pause();
|
|
|
+ _this.audio.load();
|
|
|
+ _this.audio.src = _this.mp3;
|
|
|
+ _this.audio.loop = false;
|
|
|
+ _this.audio.play();
|
|
|
+ }
|
|
|
},
|
|
|
- //生命周期 - 挂载完成(可以访问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;
|
|
|
- });
|
|
|
+ stopAudio() {
|
|
|
+ if (this.audio) {
|
|
|
+ this.audio.pause();
|
|
|
+ }
|
|
|
},
|
|
|
- beforeCreate () { }, //生命周期 - 创建之前
|
|
|
- beforeMount () { }, //生命周期 - 挂载之前
|
|
|
- beforeUpdate () { }, //生命周期 - 更新之前
|
|
|
- updated () { }, //生命周期 - 更新之后
|
|
|
- beforeDestroy () {
|
|
|
- }, //生命周期 - 销毁之前
|
|
|
- destroyed () {
|
|
|
- }, //生命周期 - 销毁完成
|
|
|
- activated () { }, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成(可以访问当前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;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- 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: 24px;
|
|
|
- float: left;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ 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: 24px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
}
|
|
|
.questionMiddle {
|
|
|
- .content-voices {
|
|
|
- span {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 20px;
|
|
|
- &.noMp3 {
|
|
|
- margin-left: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
- img {
|
|
|
- height: 16px;
|
|
|
- float: left;
|
|
|
- }
|
|
|
+ .content-voices {
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ &.noMp3 {
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
}
|
|
|
+ img {
|
|
|
+ height: 16px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.questionSmall {
|
|
|
- .content-voices {
|
|
|
- span {
|
|
|
- font-size: 12px;
|
|
|
- line-height: 15px;
|
|
|
- &.noMp3 {
|
|
|
- margin-left: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
- img {
|
|
|
- height: 12px;
|
|
|
- float: left;
|
|
|
- }
|
|
|
+ .content-voices {
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 15px;
|
|
|
+ &.noMp3 {
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ height: 12px;
|
|
|
+ float: left;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|