|  | @@ -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>
 |