+文字转语音细节

liuyg

2022-01-07 04b6dba74c7051dcc0947b08a4f70b595672e3f2

+文字转语音细节

 src/components/mobileWindow/index.vue

@@ -7,8 +7,8 @@
    <div class="mobiletitle">
      {{ title }}
      <span class="mobile_audio" @click="openAudio" v-show="introduce">
        <i class="el-icon-video-play icon" v-show="!audioData"></i>
        <i class="el-icon-video-pause icon" v-show="audioData"></i>
        <i class="el-icon-video-play icon" v-show="!audioState"></i>
        <i class="el-icon-video-pause icon" v-show="audioState"></i>
        <!-- <div id="bdtts_div_id">
          <audio id="tts_autio_id" autoplay="autoplay">
            <source
@@ -92,7 +92,7 @@
      "MobileWindowsHide",
      "query",
      "MobileWindowChangeData",
      "audioData",
      "audioState",
    ]),
  },
  watch: {
@@ -155,6 +155,14 @@
            }
            if (k == "introduce") {
              this.introduce = queryData[k];
              if (this.introduce) {
                setTimeout(() => {
                  let Str = document.querySelector(
                    ".mobileBig-center-introduce"
                  ).innerText;
                  this.$store.dispatch("MSET_GETAUDIO", Str); //加入语音
                }, 20);
              }
            }
          }
        }
@@ -223,10 +231,7 @@
    },
    openAudio() {
      if (this.introduce) {
        let Str = document.querySelector(
          ".mobileBig-center-introduce"
        ).innerText;
        this.$store.dispatch("MSET_GETAUDIO", Str);
        this.$store.dispatch("MSET_GETAUDIOBEGIN");
      }
    },
  },

 src/components/mobilemap/index.vue

@@ -325,7 +325,7 @@
      const tileset = new that.DC.Tileset("/mx/tileset.json", {
        luminanceAtZenith: 0.5,
      });
      tilesetLayer.addOverlay(tileset);
      // tilesetLayer.addOverlay(tileset);
      // tilesetLayer.show = false;

      let silhouetteBlue =

 src/store/getters.js

@@ -20,7 +20,7 @@
  dimension: (state) => state.mobile.dimension, // 维度
  dimensionData: (state) => state.mobile.dimensionData, // 维度镜头数据
  perspectiveControl: (state) => state.mobile.perspectiveControl, ///视角控制：高度、角度  ()=>{}
  audioData: (state) => state.mobile.audioData, //文字转语音状态
  audioState: (state) => state.mobile.audioState, //文字转语音状态
};

const navigation = {

 src/store/modules/mobile.js

@@ -47,6 +47,7 @@
    tilesetLayer: null, //瀑布流

    audioData: null, //语音
    audioState: false, //语音状态
  },
  mutations: {
    MSET_VIEWER(state, viewer) {
@@ -298,13 +299,12 @@
      // })
      commit("MSET_POPUPDOM", popupsDom);
    },
    closeMobileWindowsDom({ state, commit }) {
    closeMobileWindowsDom({ state, commit, dispatch }) {
      if (!state.MobileWindowsHide && state.popupsDom) {
        state.popupsDom.closeOur();
        commit("MSET_MOBILEWINDOWSHIDE", true);
        if (state.audioData) {
          state.audioData = null;
          window.speechSynthesis.cancel();
          dispatch("MSET_GETAUDIOBEGIN", "notOpen");
        }
      } //cancel
    },
@@ -490,13 +490,23 @@
      });
    },
    MSET_GETAUDIO({ state, commit, dispatch }, val) {
      if (state.audioData) {
        state.audioData = null;
      state.audioData = new window.SpeechSynthesisUtterance();
      state.audioData.text = val;
      state.audioData.onstart = function (e) {
        state.audioState = true;
      };
      state.audioData.onend = function (event) {
        state.audioState = false;
      };
    },
    MSET_GETAUDIOBEGIN({ state, commit, dispatch }, val) {
      if (state.audioState) {
        window.speechSynthesis.cancel();
        state.audioState = false;
      } else {
        state.audioData = new window.SpeechSynthesisUtterance();
        state.audioData.text = val;
        window.speechSynthesis.speak(state.audioData);
        if (val != "notOpen") {
          window.speechSynthesis.speak(state.audioData);
        }
      }
    },
  },