Vue でテキスト読み上げを実装する方法-Vue.js-php.cn

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

藏色散人

リリース： 2022-11-19 17:08:30

オリジナル

4262 人が閲覧しました

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

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

このチュートリアルの動作環境: 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() 対応するインスタンスを音声キューに追加します
##getVoices サポートされている言語配列を取得します。注: 有効にするには、voiceschanged イベントに追加する必要があります
#ただし、この方法は古いバージョンの IE には対応していません。ブラウザの判定方法
```
isIe(){
    if(!!window.ActiveXObject || "ActiveXObject " in window){
        return true
    }else{
        return false
    }
},
```
ログイン後にコピー

   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 サイトの他の関連記事を参照してください。