Vue でテキスト読み上げを実装する方法

Vue はテキスト読み上げメソッドを実装します: 1. SpeechSynthesisUtterance オブジェクトを作成します; 2. "isIe(){...}" メソッドを通じてブラウザの判断を実装します; 3. IE の使用方法に従って、コード 「if(this.isIe()){let voiceObj = new ActiveXObject("Sapi.SpVoice")voiceObj.Rate = ...)」など。

このチュートリアルの動作環境: Windows7 システム、vue3、Dell G3 コンピューター。

vue はテキスト読み上げをどのように実装しますか?

vueの音声読み上げ機能の詳しい説明

現在、h5には新しい音声読み上げ機能が追加されています（ただし改良中のためほとんど使えません） )、h5 の新しい SpeechSynthesisUtterance インスタンス

最初に新しい SpeechSynthesisUtterance オブジェクトを作成します。

インスタンス オブジェクトのいくつかの属性を使用します。

• text – テキスト合成するコンテンツ、文字列。

• lang – 使用する言語、文字列。例: "zh-cn"

• voiceURI – 希望する音声とサービスを指定します。使用、文字列。

• volume – サウンドの音量。0 ～ 1 の範囲で、デフォルトは 1 です。

• rate – 話す速度、数値。デフォルト値は 1 で、範囲は 0.1 ～ 10 で、話す速度の倍数を示します。たとえば、2 は通常の話す速度の 2 倍を表します。スピード。

• pitch – 音声のピッチを 0 (最小) から 2 (最大) までの数値で示します。デフォルト値は 1 です。

#メソッド

• speak() 対応するインスタンスを音声キューに追加します

#cancel() キュー内のすべてのボイスを削除します。再生中の場合は、直接停止します。
pause() ボイスを一時停止します。
resume() 一時停止した音声を再開します

• ##getVoices サポートされている言語配列を取得します。 注: 有効にするには、voiceschanged イベントに追加する必要があります

• #ただし、この方法は古いバージョンの IE には対応していません。ブラウザの判定方法

  isIe(){
      if(!!window.ActiveXObject || "ActiveXObject " in window){
          return true
      }else{
          return false
      }
  },

を追加してから、IE の使用方法

   voice(e){
    window.speechSynthesis.cancel()
      let timer
      timer = setInterval(() => {
        let msg = e
        if(this.isIe()){
            let voiceObj = new ActiveXObject("Sapi.SpVoice")
            voiceObj.Rate = -1 // 语速
            voiceObj.Volume = 50 // 音量
            voiceObj.Speak(msg,1)
        }else{
            let speakMsg = new 
               SpeechSynthesisUtterance(msg)
            speakMsg.rate = 1 // 语速
            speakMsg.pitch = 3 // 音量
            window.speechSynthesis.speak(speakMsg)
        }
     }, 1000)
     setTimeout(() => {
        // 一段时间后清除定时器
        clearInterval(timer)
     }, 1000)
    },

に従う必要があります。推奨学習: "

vue.js ビデオ チュートリアル

"

以上がVue でテキスト読み上げを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。