google chrome - क्रोम के भाषण संश्लेषण में आवाजों की सूची प्राप्त करना(वेब स्पीच एपीआई)




google-chrome javascript-events (5)

आवाजों को सुनिश्चित करने का एक और तरीका है कि आपको उनकी आवश्यकता से पहले लोड किया जाता है, वे अपने लोडिंग स्टेट को एक वादे में बांधना चाहते हैं, और उसके बाद अपने भाषण आदेशों को then से प्रेषित करें:

const awaitVoices = new Promise(done => speechSynthesis.onvoiceschanged = done);

function listVoices() {
    awaitVoices.then(()=> {
        let voices = speechSynthesis.getVoices();
        console.log(voices);
    });
}

जब आप सूची listVoices कॉल listVoices , तो यह या तो आवाजों को पहले लोड करने की प्रतीक्षा करेगा, या अगले टिक पर अपना ऑपरेशन प्रेषित करेगा।

निम्नलिखित HTML पर कंसोल में खाली सरणी दिखाता है:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function test(){
                console.log(window.speechSynthesis.getVoices())
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="test()">Test</a>
    </body>
</html>

दूसरे क्लिक में आपको अपेक्षित सूची मिल जाएगी।

यदि आप इस फ़ंक्शन को कॉल करने के लिए onload ईवेंट जोड़ते हैं ( <body onload="test()"> ), तो आप पहले क्लिक पर सही परिणाम प्राप्त कर सकते हैं। ध्यान दें कि onload पर पहला कॉल अभी भी ठीक से काम नहीं करता है। यह पेज लोड पर खाली आता है लेकिन बाद में काम करता है।

प्रशन:

चूंकि यह बीटा संस्करण में एक बग हो सकता है , इसलिए मैंने "क्यों" प्रश्न छोड़ दिए।

अब, सवाल यह है कि यदि आप पेज लोड पर window.speechSynthesis तक पहुंचना चाहते हैं:

  • इस मुद्दे के लिए सबसे अच्छा हैक क्या है?
  • पेज लोड पर आप यह सुनिश्चित कैसे कर सकते हैं कि यह speechSynthesis लोड करेगा?

पृष्ठभूमि और परीक्षण:

मैं वेब स्पीच एपीआई में नई सुविधाओं का परीक्षण कर रहा था, फिर मुझे अपने कोड में इस समस्या का सामना करना पड़ा:

<script type="text/javascript">
$(document).ready(function(){
    // Browser support messages. (You might need Chrome 33.0 Beta)
    if (!('speechSynthesis' in window)) {
      alert("You don't have speechSynthesis");
    }

    var voices = window.speechSynthesis.getVoices();
    console.log(voices) // []

    $("#test").on('click', function(){
        var voices = window.speechSynthesis.getVoices();
        console.log(voices); // [SpeechSynthesisVoice, ...]
    });
});
</script>
<a id="test" href="#">click here if 'ready()' didn't work</a>

मेरा सवाल था: पृष्ठ लोड होने के बाद window.speechSynthesis.getVoices() खाली सरणी क्यों onready और onready फ़ंक्शन ट्रिगर किया जाता है? जैसा कि आप देख सकते हैं कि क्या आप लिंक पर क्लिक करते हैं, वही फ़ंक्शन क्रोम पर क्लिक करके क्रोम की उपलब्ध आवाज़ों की एक सरणी देता है?

ऐसा लगता है कि क्रोम लोड होने के बाद window.speechSynthesis लोड करता है!

समस्या ready घटना में नहीं है। यदि मैं लाइन var voice=... को ready फ़ंक्शन से हटा देता हूं, तो पहले क्लिक के लिए यह कंसोल में खाली सूची दिखाता है। लेकिन दूसरा क्लिक ठीक काम करता है।

ऐसा लगता है कि window.speechSynthesis को पहली कॉल के बाद लोड करने के लिए अधिक समय चाहिए। आपको इसे दो बार कॉल करने की ज़रूरत है! लेकिन, आपको window.speechSynthesis . window.speechSynthesis पर दूसरी कॉल से पहले प्रतीक्षा करने और इसे लोड करने की आवश्यकता है। उदाहरण के लिए, यदि कोड पहली बार चलाता है तो निम्न कोड कंसोल में दो खाली सरणी दिखाता है:

// First speechSynthesis call
var voices = window.speechSynthesis.getVoices();
console.log(voices);

// Second speechSynthesis call
voices = window.speechSynthesis.getVoices();
console.log(voices);

जब तक आप उन्हें उपयोग करने से पहले आवाज लोड नहीं कर लेते हैं, तब तक आप एक सेट इंटरवल का उपयोग कर सकते हैं, हालांकि आपको सेट अंतराल की आवश्यकता है और फिर साफ़ करना है:

var timer = setInterval(function() {
    var voices = speechSynthesis.getVoices();
    console.log(voices);
    if (voices.length !== 0) {
      var msg = new SpeechSynthesisUtterance(/*some string here*/);
      msg.voice = voices[/*some number here to choose from array*/];
      speechSynthesis.speak(msg);
      clearInterval(timer);
    }
}, 200);

$("#test").on('click', timer);

सबसे पहले मैंने onvoiceschanged का उपयोग किया, लेकिन आवाजों को लोड होने के बाद भी इसे फायरिंग रखा गया, इसलिए मेरा लक्ष्य हर कीमत पर onvoiceschanged से बचने के लिए था।

मैंने ये ढूंढ निकाला। ऐसा लगता है कि अब तक काम करना प्रतीत होता है, अगर यह टूट जाता है तो अपडेट हो जाएगा।

loadVoicesWhenAvailable();

function loadVoicesWhenAvailable() {
         voices = synth.getVoices();

         if (voices.length !== 0) {
                console.log("start loading voices");
                LoadVoices();
            }
            else {
                setTimeout(function () { loadVoicesWhenAvailable(); }, 10)
            }
    }

सबसे पहले, इस उत्तर के लिए आपको बहुत बहुत धन्यवाद। दूसरा, यहां कोई सहायक जेएसबीन है यदि कोई भी इस प्रश्न / उत्तर में फिर से आता है: http://jsbin.com/gosaqihi/9/edit?js,console


सलमान ओस्कूई द्वारा सेट इंटरवल समाधान सही था

कृपया https://jsfiddle.net/exrx8e1y/

function myFunction() {

  dtlarea=document.getElementById("details");
  //dtlarea.style.display="none";
  dtltxt="";

  var mytimer = setInterval(function() {

      var voices = speechSynthesis.getVoices();
      //console.log(voices);
      if (voices.length !== 0) {

        var msg = new SpeechSynthesisUtterance();

        msg.rate = document.getElementById("rate").value; // 0.1 to 10
        msg.pitch = document.getElementById("pitch").value; //0 to 2
        msg.volume = document.getElementById("volume").value; // 0 to 1

        msg.text = document.getElementById("sampletext").value; 
        msg.lang =  document.getElementById("lang").value; //'hi-IN';

        for(var i=0;i<voices.length;i++){

            dtltxt+=voices[i].lang+' '+voices[i].name+'\n';

            if(voices[i].lang==msg.lang) {
              msg.voice = voices[i]; // Note: some voices don't support altering params
              msg.voiceURI = voices[i].voiceURI;
              // break;
            }
        }

        msg.onend = function(e) {
          console.log('Finished in ' + event.elapsedTime + ' seconds.');
          dtlarea.value=dtltxt; 
        };

        speechSynthesis.speak(msg);

        clearInterval(mytimer);

      }
  }, 1000);

} 

यह मैक, लिनक्स (उबंटू), विंडोज और एंड्रॉइड के लिए क्रोम पर ठीक काम करता है

एंड्रॉइड में गैर मानक एन_जीबी वाइल है अन्य लोगों के पास भाषा कोड के रूप में एन-जीबी है, आप भी देखेंगे कि वही भाषा (लैंग) के कई नाम हैं

मैक क्रोम पर आपको एन-जीबी डैनियल और एन-जीबी Google यूके अंग्रेजी महिला और एन-जीबी Google यूके अंग्रेजी पुरुष के अलावा मिलता है

एन-जीबी डैनियल (मैक और आईओएस) एन-जीबी Google यूके अंग्रेजी महिला एन-जीबी Google यूके अंग्रेजी पुरुष en_GB अंग्रेजी यूनाइटेड किंगडम हाय-इन Google हिंदी hi-in लेखा (मैक और आईओएस) hi_IN हिंदी भारत





webspeech-api