किसी भी वेब पेज पर टेक्स्ट-टू-स्पीच फीचर कैसे जोड़ें

लिखे हुए को बोलने में बदलना सुविधा को संदर्भित करता है किसी पाठ का बोला गया वर्णन एक डिवाइस पर प्रदर्शित। वर्तमान में, लैपटॉप, टैबलेट और मोबाइल फोन जैसे उपकरण पहले से ही यह सुविधा है. इन उपकरणों पर चलने वाला कोई भी एप्लिकेशन, जैसे कि वेब ब्राउज़र, कर सकते हैं इसका उपयोग करें, तथा इसकी कार्यक्षमता का विस्तार करें. नैरेशन फीचर एक एप्लिकेशन के लिए एक उपयुक्त सहायता हो सकता है बहुतायत से पाठ प्रदर्शित करता है, यह रूप सुनने का विकल्प प्रदान करता है वेबसाइट आगंतुकों के लिए.

वेब भाषण एपीआई

वेब भाषण जावास्क्रिप्ट एपीआई के लिए प्रवेश द्वार है वेब ब्राउज़र द्वारा टेक्स्ट-टू-स्पीच सुविधा का उपयोग. इसलिए, यदि आप टेक्स्ट-हैवी वेब पेज पर टेक्स्ट-टू-स्पीच फंक्शनलिटी शुरू करना चाहते हैं, और अपने पाठकों को कंटेंट सुनने की अनुमति देते हैं, तो आप इस आसान एपीआई का उपयोग कर सकते हैं, या, अधिक विशिष्ट होने के लिए, भाषा संकलन इंटरफेस.

प्रारंभिक कोड और समर्थन की जांच

आरंभ करने के लिए, आइए एक वेब पेज बनाएं मुझे सैंपल टेक्स्ट सुनाया जाए, तथा तीन बटन.

 
    
 
 
कई दोस्तों के साथ हरे
  
एक खरगोश बहुत लोकप्रिय था ... 
 
लेकिन उन्होंने यह कहते हुए मना कर दिया ... 
  
कहानी का नैतिक… 
 
 

बटन होंगे कथन के लिए नियंत्रण. अब हमें यह सुनिश्चित करने की जरूरत है कि क्या यूए का समर्थन करता है भाषा संकलन इंटरफेस। ऐसा करने के लिए, हम जल्दी से जावास्क्रिप्ट के साथ जाँच करते हैं यदि खिड़की वस्तु है 'भाषा संकलन' संपत्ति, या नहीं.

 onload = function () if (विंडो में 'speechSynthesis') / * भाषण संश्लेषण समर्थित * / और / * भाषण संश्लेषण समर्थित नहीं है * / 

अगर भाषा संकलन उपलब्ध है, पहले हम के लिए एक संदर्भ बनाएँ भाषा संकलन कि हम करने के लिए असाइन करें सिंथ चर। हम भी एक झंडा आरंभ करें उसके साथ असत्य मूल्य (हम बाद में इसका उद्देश्य देखेंगे), और हम संदर्भ बनाएं और ईवेंट हैंडलर पर क्लिक करें तीन बटन (प्ले, पॉज़, स्टॉप) के लिए भी.

जब उपयोगकर्ता किसी एक बटन पर क्लिक करता है, तो उसका संबंधित कार्य (onClickPlay (), onClickPause (), onClickStop ()) बुलाया जाएगा.

 अगर ('भाषणसंवाद' खिड़की में) var synth = speechSynthesis; var flag = false; / * बटन के संदर्भ * / var playEle = document.querySelector ('# play'); var poseEle = document.querySelector ('# ठहराव'); var stopEle = document.querySelector ('# stop'); / * बटन के लिए ईवेंट हैंडलर पर क्लिक करें * / playEle.addEventListener ('क्लिक करें', onClickpdf); pauseEle.addEventListener ('क्लिक करें', onClickPause); stopEle.addEventListener ('क्लिक करें', onClickStop); function onClickPlay ()  फ़ंक्शन onClickPause ()  फ़ंक्शन onClickStop ()  

कस्टम फ़ंक्शन बनाएँ

चलिए अब क्लिक फ़ंक्शन का निर्माण करें ईवेंट हैंडलर द्वारा बुलाए जाने वाले तीन व्यक्तिगत बटनों में से.

1. खेल / फिर से शुरू

जब प्ले बटन पर क्लिक किया जाता है, तो पहले हम चेक झंडा. अगर यह है असत्य, हम इसे करने के लिए सेट करें सच, इसलिए यदि किसी भी समय बाद में बटन पर क्लिक किया जाता है, तो अंदर का कोड प्रथम अगर स्थिति निष्पादित नहीं होगी (जब तक झंडा न हो असत्य फिर).

तब हम का एक नया उदाहरण बनाएँ SpeechSynthesisUtterance इंटरफ़ेस जो भाषण के बारे में जानकारी रखता है, जैसे, पढ़ने के लिए पाठ, भाषण की मात्रा, आवाज़ में बोली जाने वाली आवाज़, गति, पिच और भाषण की भाषा। हम लेख पाठ जोड़ते हैं निर्माता के पैरामीटर के रूप में, और इसे असाइन करें कथन परिवर्तनशील.

 function onClickPlay () if (झंडा) झंडा = सच; utterance = new SpeechSynthesisUtterance (document.querySelector ('लेख')। textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () ध्वज = असत्य; ; synth.speak (कथन);  अगर (सिंथ.पोज्ड) / * अनपोज / रिज्यूमे नैरेशन * / सिंथ.resume ();  

हम उपयोग करते हैं SpeechSynthesis.getVoices () करने की विधि भाषण के लिए एक आवाज नामित करें उपयोगकर्ता की डिवाइस में उपलब्ध आवाजों से। जैसा कि यह विधि एक डिवाइस में सभी उपलब्ध वॉइस विकल्पों की एक सरणी देता है, हम पहले उपलब्ध डिवाइस वॉइस को असाइन करें का उपयोग करके utterance.voice = synth.getVoices () [0]; बयान.

अंत में संपत्ति एक घटना हैंडलर का प्रतिनिधित्व करती है निष्पादित जब भाषण समाप्त हो गया है. इसके अंदर, हम के मूल्य को बदलते हैं झंडा परिवर्तनशील वापस झूठ ताकि भाषण शुरू करने वाला कोड निष्पादित किया जा सकता है जब बटन है फिर से क्लिक किया.

फिर हम बुलाते हैं SpeechSynthesis.speak () करने के लिए विधि कथन शुरू करें. हमें भी जांचने की जरूरत है यदि कथन रोक दिया गया है, जिसके लिए हम केवल रीड का उपयोग करते हैं SpeechSynthesis.paused संपत्ति। यदि कथन को रोक दिया गया है, तो हमें इसकी आवश्यकता है कथन को फिर से शुरू करें बटन पर क्लिक करें, जिसे हम उपयोग करके प्राप्त कर सकते हैं SpeechSynthesis.resume () तरीका.

2. ठहराव

अब बनाते हैं onClickPause () फ़ंक्शन जिसमें हम पहली बार जांचते हैं यदि कथन जारी है और रुका हुआ नहीं है. हम इन शर्तों का उपयोग करके परीक्षण कर सकते हैं SpeechSynthesis.speaking और यह SpeechSynthesis.paused गुण। यदि दोनों स्थितियां सत्य हैं, तो हमारी onClickPause () समारोह भाषण रोक देता है फोन करके SpeechSynthesis.pause () तरीका.

 function onClickPause () if (synth.speaking &&! synth.paused) / * ठहराव कथन * / synth.pause ();  

3. बंद करो

onClickStop () कार्य है के समान बनाया गया onClickPause (). यदि भाषण चल रहा है, हम इसे रोक फोन करके SpeechSynthesis.cancel () विधि है कि सभी उक्तियों को हटाता है.

 function onClickStop () if (synth.speaking) / * रोक कथन * / / * सफारी के लिए * / झंडा = गलत; synth.cancel ();  

ध्यान दें कि भाषण को रद्द करने पर, अंत में घटना स्वचालित रूप से निकाल दी जाती है, और हमने इसके अंदर ध्वज रीसेट कोड पहले ही जोड़ दिया था। हालाँकि, सफ़ारी ब्राउज़र में एक बग है जो इस घटना को आग लगाने से रोकता है, इसीलिए हमने ध्वज को रीसेट किया onClickStop () समारोह। यदि आपको सफारी का समर्थन नहीं करना है तो आपको ऐसा करने की आवश्यकता नहीं है.

ब्राउज़र का समर्थन

आधुनिक ब्राउज़रों के सभी नवीनतम संस्करण पूर्ण या आंशिक समर्थन है भाषण संश्लेषण एपीआई के लिए। वेबकैट ब्राउज़र कई टैब से भाषण नहीं खेलते हैं, रोकना छोटी गाड़ी है (काम करता है लेकिन छोटी गाड़ी), और जब उपयोगकर्ता वेबकिट ब्राउज़र में पेज को फिर से लोड करता है तो भाषण रीसेट नहीं होता है।.

वर्किंग डेमो

नीचे दिए गए लाइव डेमो पर एक नज़र डालें, या जीथब पर पूर्ण कोड देखें.

पेन à ?? the ° Ã…  देखें¸ए¢Â ??  ?? Ã' £ टेक्स्ट टू स्पीच - जावास्क्रिप्ट द्वारा HONGKIAT (@hkdc) कोडपेन पर.