Kuidas lisada kõneposti funktsiooni mis tahes veebilehe kaudu

The teksti kõneks muutmine funktsioon viitab teksti räägitud jutustamine kuvatakse seadmes. Praegu on sellised seadmed nagu sülearvutid, tabletid ja mobiiltelefonid juba on see funktsioon. Kõik need seadmed, mis töötavad sellistes seadmetes, nagu veebibrauser, saavad seda kasutada, ja laiendada selle funktsionaalsust. Jutustamise funktsioon võib olla sobiv abivahend rakenduse jaoks kuvab rikkaliku teksti, nagu see pakub võimalust kuulata veebisaidi külastajatele.

Web Speech API

The Web Speech JavaScript API on värav juurdepääsu veebi-brauserile teksti-kõnele funktsioonile. Seega, kui soovite teksti-kõneks funktsionaalsust tutvustada teksti raskes veebisaidil ja lasta oma lugejatel sisu kuulata, saate seda käepärast API-d kasutada või täpsemini oma Kõnesüntees liides.

Esmane kood ja toe kontroll

Alustamiseks looge veebileht koos mulle näidistekst, mida jutustatakse, ja kolm nuppu.

     
  Jänes paljude sõpradega
  Jänes oli väga populaarne… 
 Aga ta keeldus, märkides, et… 
  Loo moraal…

Nupud on narratsiooni kontroll. Nüüd peame veenduma, kas UA toetab Kõnesüntees liides. Selleks kontrollime kiiresti JavaScripti, kui aken objektil on "kõneSüntees" vara, või mitte.

 onload = function () if ('kõneSüntees' aknas) / * kõnesüntees toetatud * / * * kõnesüntees ei ole toetatud * /

Kui kõneSüntees on olemas, kõigepealt me luua viide kõneSüntees mille me määrama sünt muutuja. Meil ka algatada lipu koos vale väärtus (näeme selle eesmärki hiljem postituses) ja me luua viiteid ja klõpsa sündmuste käitlejaid kolme nupu (Play, Pause, Stop) jaoks.

Kui kasutaja klõpsab ühel nupust, siis vastav funktsioon (onClickPlay (), onClickPause (), onClickStop ()) kutsutakse.

 kui ('kõneSüntees' aknas) var synth = voiceSynthesis; var flag = false; / * viited nuppudele * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * klõpsa sündmuste käitlejatele nuppe * / playEle.addEventListener ('kliki', onClickPlay); pauseEle.addEventListener ('kliki', onClickPause); stopEle.addEventListener ('kliki', onClickStop); funktsioon onClickPlay ()  funktsioon onClickPause ()  funktsioon onClickStop ()

Loo kohandatud funktsioonid

Nüüd olgem klõpsafunktsioonid kolmest üksiknupust, mida sündmuste käitlejad kutsuvad.

1. Esita / jätkata

Kui klõpsate nuppu Taasesitus, siis kõigepealt me kontrolli lipp. Kui see on vale, me seadsime selle tõsi, nii et kui nuppu hiljem klõpsatakse, siis kood sees esiteks kui tingimus ei toimi (mitte enne, kui lipp on vale uuesti).

Siis me luua uus Kõne süntees liides, mis sisaldab teavet kõne kohta, näiteks lugeda vajaliku teksti, kõne mahu, kõne, kiiruse, kõne ja keele kohta. Lisame artikli teksti konstruktori parameetrina, ja määrake see väljendus muutuja.

 funktsioon onClickPlay () if (! flag) flag = true; lausung = uus SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = funktsioon () flag = false; ; synth.speak (lausung);  if (synth.paused) / * unpause / jätkata jutustamist * / synth.resume ();

Me kasutame SpeechSynthesis.getVoices () meetod määrake kõne hääl kasutaja seadmes saadaolevatest häältest. Kuna see meetod tagastab seadme kõik võimalikud häälvalikud, me määrake esimene olemasolev seadme hääl kasutades utterance.voice = synth.getVoices () [0]; avaldus.

The onend vara esindab sündmuste käitlejat kui kõne on lõpetatud. Selle sees muudame selle väärtust lipp muutuja tagasi vale nii, et kõnet alustav kood saab teostada kui nupp on klõpsati uuesti.

Siis me nimetame seda SpeechSynthesis.speak () meetodit alustada jutustamist. Me peame ka kontrollima kui jutustamine on peatatud, mille jaoks me kasutame ainult kirjutuskaitstud SpeechSynthesis.paused vara. Kui jutustamine on peatatud, peame seda tegema jätkake jutustamist nupul klõpsates, mida me saame kasutada SpeechSynthesis.resume () meetod.

2. Paus

Nüüd looge onClickPause () funktsioon, milles me esimest korda kontrollime kui jutustamine on pooleli ja seda ei peatata. Me saame neid tingimusi testida kasutades SpeechSynthesis.speaking ja SpeechSynthesis.paused omadused. Kui mõlemad tingimused on tõelised, siis meie onClickPause () funktsiooni peatab kõne helistades SpeechSynthesis.pause () meetod.

 funktsioon onClickPause () if (synth.speaking &&! synth.paused) / * pause jutustamine * / synth.pause ();

3. Peatus

The onClickStop () funktsioon on ehitatud sarnaselt onClickPause (). Kui kõne on käimas, siis me lõpeta helistades KõneSüntees.cancel () meetodit eemaldab kõik hääled.

 funktsioon onClickStop () if (synth.speaking) / * peatada narratsioon * / / * Safari * / flag = false; synth.cancel ();

Pange tähele, et kõne tühistamisel onend sündmus käivitatakse automaatselt, ja me olime juba selle lipu reset-koodi lisanud. Kuid, Safari brauseris on viga mis takistab seda sündmust põlema, sellepärast me taaskord lipu onClickStop () funktsiooni. Sa ei pea seda tegema, kui te ei soovi Safarit toetada.

Brauseri tugi

Kõik kaasaegsete brauserite viimased versioonid täielikult või osaliselt kõnesünteesi API jaoks. Webkit-brauserid ei mängi kõnesid mitmest vahekaardist, paus on lollakas (töötab, kuid lollakas) ja kõne ei ole nullitud, kui kasutaja veebilehe brauserite lehel uuesti laadib.

Töö demo

Vaadake allpool esitatud live-demot või vaadake täielikku koodi Githubis.

Vaadake pliiatsit?¸Ã¢Â? Â Â Â Â Â Â £ kõneks - JavaScript poolt HONGKIAT (@hkdc) kohta CodePen.