123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <!-- -->
- <template>
- <div
- @click="handlePlayVoice"
- :class="fontSize == 20 ? 'questionSmall' : 'content-voice'"
- v-if="pinyin || mp3"
- >
- <span :class="mp3 ? '' : 'noMp3'" v-if="pinyin">{{ pinyin }}</span>
- <template v-if="mp3">
- <img :src="voiceSrc" />
- <!-- <audio :src="mp3" ref="curMp3"></audio> -->
- </template>
- </div>
- </template>
- <script>
- export default {
- components: {},
- props: ["pinyin", "mp3", "fontSize"],
- data() {
- return {
- audio: new Audio(),
- voiceSrc: "",
- voicePauseSrc: require("../../assets/single/icon-voice.png"),
- voicePlaySrc: require("../../assets/common/icon-voice-play.png"),
- };
- },
- computed: {},
- watch: {},
- //方法集合
- methods: {
- handlePlayVoice() {
- let _this = this;
- if (!_this.mp3) {
- return;
- }
- if (!this.audio.paused) {
- this.audio.pause();
- } else {
- _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.stopAudioAudio = 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-voice {
- display: inline-block;
- padding: 12px 36px;
- background: #ffffff;
- border-radius: 36px;
- height: 72px;
- margin: 0 auto 24px auto;
- font-size: 0;
- cursor: pointer;
- box-sizing: border-box;
- &-20 {
- span {
- color: #404040;
- font-size: 40px;
- line-height: 48px;
- float: left;
- margin-right: 24px;
- font-family: GB-PINYINOK-B;
- &.noMp3 {
- margin-right: 0px;
- }
- }
- img {
- height: 48px;
- float: left;
- padding-top: 0px;
- }
- }
- span {
- color: #404040;
- font-size: 40px;
- line-height: 48px;
- float: left;
- margin-right: 24px;
- font-family: GB-PINYINOK-B;
- &.noMp3 {
- margin-right: 0px;
- }
- }
- img {
- height: 48px;
- float: left;
- padding-top: 0px;
- }
- }
- .questionMiddle {
- .content-voice {
- padding: 8px 24px;
- border-radius: 24px;
- height: 48px;
- margin: 0 auto 16px auto;
- span {
- font-size: 26px;
- line-height: 30px;
- margin-right: 16px;
- &.noMp3 {
- margin-right: 0px;
- }
- }
- img {
- height: 32px;
- }
- }
- }
- .questionSmall {
- .content-voice {
- padding: 6px 18px;
- border-radius: 18px;
- height: 36px;
- margin: 0 auto 12px auto;
- span {
- font-size: 20px;
- line-height: 24px;
- margin-right: 12px;
- &.noMp3 {
- margin-right: 0px;
- }
- }
- img {
- height: 24px;
- }
- }
- }
- </style>
|