Rumah  >  Artikel  >  hujung hadapan web  >  Cara melaksanakan text-to-speech dalam vue

Cara melaksanakan text-to-speech dalam vue

藏色散人
藏色散人asal
2022-11-19 17:08:304214semak imbas

Vue melaksanakan kaedah text-to-speech: 1. Cipta objek SpeechSynthesisUtterance; 2. Laksanakan pertimbangan pelayar melalui kaedah "isIe(){...}" 3. Mengikut kaedah penggunaan iaitu kod Seperti "if(this.isIe()){let voiceObj = new ActiveXObject("Sapi.SpVoice")voiceObj.Rate = ...)".

Cara melaksanakan text-to-speech dalam vue

Persekitaran pengendalian tutorial ini: sistem windows7, vue3, komputer Dell G3.

Bagaimanakah Vue melaksanakan teks ke pertuturan?

Penjelasan terperinci tentang fungsi text-to-speech vue

Pada masa ini, h5 telah menambah fungsi text-to-speech (tetapi ia sedang diperbaiki dan hampir tidak boleh digunakan), dan contoh SpeechSynthesisUtterance baharu h5

Mula-mula buat objek SpeechSynthesisUtterance baharu

menggunakan beberapa sifat objek contoh, termasuk:

  • teks – kandungan teks kepada disintesis, rentetan.

  • lang - bahasa yang digunakan, rentetan, contohnya: "zh-cn"

  • voiceURI - nyatakan suara dan perkhidmatan yang anda mahu gunakan, String.

  • volum – volum bunyi, antara 0 hingga 1, dan lalai ialah 1.

  • kadar - Kadar pertuturan, nilai berangka, nilai lalai ialah 1, julat ialah 0.1 hingga 10, menunjukkan gandaan kelajuan pertuturan, contohnya, 2 bermaksud dua kali pertuturan biasa kelajuan.

  • pitch – mewakili pic pertuturan, nilai berangka, antara 0 (minimum) hingga 2 (maksimum). Nilai lalai ialah 1.

kaedah

  • speak() menambah contoh yang sepadan pada baris gilir suara

  • batal() memadamkan semua suara dalam baris gilir Jika dimainkan, berhenti terus

  • jeda() menjeda suara

  • resume() Menyambung semula suara yang dijeda

  • getVoices Mendapat tatasusunan bahasa yang disokong Nota: Ia mesti ditambah dalam acara voiceschanged untuk berkuat kuasa

<.>Tetapi kaedah ini tidak menyokong versi lama IE Anda perlu menambah kaedah pertimbangan penyemak imbas

isIe(){
    if(!!window.ActiveXObject || "ActiveXObject " in window){
        return true
    }else{
        return false
    }
},
dan kemudian ikut kaedah penggunaan 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)
    },
: "

tutorial video vue.js

Atas ialah kandungan terperinci Cara melaksanakan text-to-speech dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn