Juurdepääsetavuse avamine: sügav sissevaade Web Speech API-sse kõnetuvastuse ja teksti kõneks sünteesi jaoks

Web Speech API on revolutsiooniline tehnoloogia, mis toob häälsuhtluse võimsuse veebirakendustesse. See API võimaldab arendajatel hõlpsasti integreerida kõnetuvastuse (kõne tekstiks ehk STT) ja teksti kõneks sünteesi (TTS) funktsioone oma veebisaitidele, avades uusi võimalusi juurdepääsetavuseks, kasutajate kaasamiseks ja uuenduslikeks kasutajaliidesteks. See põhjalik juhend tutvustab teile Web Speech API põhitõdesid, uurides selle peamisi funktsioone, rakendustehnikaid ja reaalseid kasutusvõimalusi.

Mis on Web Speech API?

Web Speech API on JavaScripti API, mis võimaldab veebibrauseritel kõnet mõista ja genereerida. See koosneb kahest põhikomponendist:

• Kõnetuvastus: Teisendab räägitud heli tekstiks.
• Kõnesüntees (tekst kõneks): Teisendab teksti räägitud heliks.

API-d toetavad suured veebibrauserid nagu Chrome, Firefox, Safari ja Edge (spetsiifiliste funktsioonide toe tase on erinev). See lai ühilduvus muudab selle elujõuliseks lahenduseks laia publikuni jõudmiseks kogu maailmas.

Miks kasutada Web Speech API-d?

Web Speech API pakub veebiarendajatele mitmeid kaalukaid eeliseid:

• Parem juurdepääsetavus: Muudab veebisaidid juurdepääsetavaks puuetega kasutajatele, näiteks nägemis- või liikumispuudega inimestele. Kasutajad saavad veebisaitidel navigeerida ja nendega suhelda häälkäskluste abil või lasta sisu endale ette lugeda. Kujutage ette nägemispuudega õpilast Indias, kes pääseb veebipõhistele haridusressurssidele juurde suuliste juhiste kaudu ja saab teavet kuulmise teel.
• Parem kasutajakogemus: Pakub kasutajatele loomulikumat ja intuitiivsemat viisi veebisaitidega suhtlemiseks, eriti käed-vabad olukordades või kui tippimine on ebamugav. Mõelge Brasiilia kokale, kes pääseb toiduvalmistamise ajal käed-vabad retseptisaidile juurde.
• Suurenenud kaasatus: Loob kasutajatele kaasahaaravamaid ja interaktiivsemaid kogemusi, nagu häälega juhitavad mängud, virtuaalsed assistendid ja keeleõpperakendused. Näiteks võiks Hispaanias asuv keeleõpperakendus kasutada kõnetuvastust õpilase häälduse hindamiseks.
• Kulutõhus lahendus: Web Speech API kasutamine on tasuta, mis välistab vajaduse kallite kolmandate osapoolte teekide või teenuste järele.
• Natiivne brauseritugi: Kuna tegemist on natiivse brauseri API-ga, ei ole vaja väliseid pistikprogramme ega laiendusi, mis lihtsustab arendust ja juurutamist.

Kõnetuvastuse (kõne tekstiks) rakendamine

Kõnetuvastuse seadistamine

Kõnetuvastuse rakendamiseks peate looma SpeechRecognition objekti. Siin on lihtne näide:

            
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US'; // Set the language
recognition.interimResults = false; // Get final results only
recognition.maxAlternatives = 1; // Number of alternative transcripts to return

            

              
                Copy
              
            
          

Vaatame selle koodi lähemalt:

• new (window.SpeechRecognition || window.webkitSpeechRecognition)(): See loob uue SpeechRecognition objekti. See kasutab brauserispetsiifilisi eesliiteid (webkitSpeechRecognition), et tagada ühilduvus erinevate brauserite vahel.
• recognition.lang = 'en-US': Määrab kõnetuvastuse keele. Optimaalse täpsuse saavutamiseks peaksite selle määrama vastavalt kasutaja keelele. Kaaluge selle dünaamiliseks määramiseks brauseri keelesätete kasutamist. Näited: 'es-ES' hispaania keele (Hispaania) jaoks, 'fr-FR' prantsuse keele (Prantsusmaa) jaoks, 'ja-JP' jaapani keele (Jaapan) jaoks, 'zh-CN' hiina keele (Hiina) jaoks. Mitme keele toetamine nõuab erinevate lang väärtuste sujuvat käsitlemist.
• recognition.interimResults = false: Määrab, kas tagastada vahetulemused (mittetäielikud) kasutaja rääkimise ajal. Väärtus false tagastab ainult lõpliku, täieliku transkriptsiooni.
• recognition.maxAlternatives = 1: Määrab tagastatavate alternatiivsete transkriptsioonide maksimaalse arvu. Suurem arv võib olla kasulik mitmetähendusliku kõne puhul, kuid suurendab töötlemise koormust.

Kõnetuvastuse sündmuste käsitlemine

SpeechRecognition objekt väljastab mitu sündmust, mida saate kuulata:

• start: Käivitatakse, kui kõnetuvastus algab.
• result: Käivitatakse, kui kõnetuvastus annab tulemuse.
• end: Käivitatakse, kui kõnetuvastus lõpeb.
• error: Käivitatakse, kui kõnetuvastuse ajal tekib viga.

Nende sündmuste käsitlemine toimub järgmiselt:

            
recognition.onstart = function() {
 console.log('Speech recognition started.');
}

recognition.onresult = function(event) {
 const transcript = event.results[0][0].transcript;
 const confidence = event.results[0][0].confidence;
 console.log('Transcript: ' + transcript);
 console.log('Confidence: ' + confidence);
 // Update your UI with the transcript
 document.getElementById('output').textContent = transcript;
};

recognition.onend = function() {
 console.log('Speech recognition ended.');
}

recognition.onerror = function(event) {
 console.error('Speech recognition error:', event.error);
 // Handle errors appropriately, such as network issues or microphone access denied
};

            

              
                Copy
              
            
          

Põhipunktid:

• onresult sündmus annab juurdepääsu tuvastatud transkriptsioonile ja selle usaldusväärsuse skoorile. Atribuut event.results on kahemõõtmeline massiiv. Välimine massiiv esindab erinevaid tulemusi (nt kui maxAlternatives on suurem kui 1). Sisemine massiiv sisaldab selle tulemuse võimalikke transkriptsioone.
• confidence skoor näitab tuvastuse täpsust. Kõrgem skoor tähendab täpsemat transkriptsiooni.
• onerror sündmus on oluline võimalike vigade käsitlemiseks. Levinud vead hõlmavad võrguprobleeme, mikrofoni juurdepääsu keelamist ja kõne puudumist. Andke kasutajale informatiivseid veateateid.

Kõnetuvastuse käivitamine ja peatamine

Kõnetuvastuse käivitamiseks kutsuge meetod start():

            
recognition.start();

            

              
                Copy
              
            
          

Kõnetuvastuse peatamiseks kutsuge meetod stop() või abort():

            
recognition.stop(); // Peatab sujuvalt, tagastades lõplikud tulemused
recognition.abort(); // Peatab koheselt, hüljates kõik ootel olevad tulemused

            

              
                Copy
              
            
          

Näide: lihtne kõne tekstiks rakendus

Siin on täielik näide lihtsast kõne tekstiks rakendusest:

            
<button id="startButton">Start Recognition</button>
<p id="output"></p>

<script>
  const startButton = document.getElementById('startButton');
  const output = document.getElementById('output');
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  recognition.lang = 'en-US';
  recognition.interimResults = false;
  recognition.maxAlternatives = 1;

  recognition.onstart = function() {
   console.log('Speech recognition started.');
   startButton.textContent = 'Listening...';
  }

  recognition.onresult = function(event) {
   const transcript = event.results[0][0].transcript;
   const confidence = event.results[0][0].confidence;
   console.log('Transcript: ' + transcript);
   console.log('Confidence: ' + confidence);
   output.textContent = transcript;
   startButton.textContent = 'Start Recognition';
  };

  recognition.onend = function() {
   console.log('Speech recognition ended.');
   startButton.textContent = 'Start Recognition';
  }

  recognition.onerror = function(event) {
   console.error('Speech recognition error:', event.error);
   output.textContent = 'Error: ' + event.error;
   startButton.textContent = 'Start Recognition';
  };

  startButton.addEventListener('click', function() {
   recognition.start();
  });
</script>

            

              
                Copy
              
            
          

See kood loob nupu, mis klõpsamisel käivitab kõnetuvastuse. Tuvastatud tekst kuvatakse lõiguelemendis.

Teksti kõneks sünteesi (kõnesünteesi) rakendamine

Kõnesünteesi seadistamine

Teksti kõneks sünteesi rakendamiseks peate kasutama liidest SpeechSynthesis. Siin on lihtne näide:

            
const synth = window.speechSynthesis;
let voices = [];

function populateVoiceList() {
 voices = synth.getVoices();
 // Filter voices to only include those with language codes defined
 voices = voices.filter(voice => voice.lang);
 const voiceSelect = document.getElementById('voiceSelect');
 voiceSelect.innerHTML = ''; // Clear existing options
 voices.forEach(voice => {
  const option = document.createElement('option');
  option.textContent = `${voice.name} (${voice.lang})`;
  option.value = voice.name;
  voiceSelect.appendChild(option);
 });
}

populateVoiceList();
if (synth.onvoiceschanged !== undefined) {
 synth.onvoiceschanged = populateVoiceList;
}

            

              
                Copy
              
            
          

Vaatame selle koodi lähemalt:

• const synth = window.speechSynthesis: Hangib SpeechSynthesis objekti.
• let voices = []: Massiiv saadaolevate häälte hoidmiseks.
• synth.getVoices(): Tagastab massiivi SpeechSynthesisVoice objektidest, millest igaüks esindab erinevat häält. On oluline märkida, et hääled laaditakse asünkroonselt.
• populateVoiceList(): See funktsioon hangib saadaolevad hääled ja täidab rippmenüü häälte nimede ja keeltega. Filtreerimine voices = voices.filter(voice => voice.lang); on oluline, et vältida vigu, mis võivad tekkida keelekoodita häälte kasutamisel.
• synth.onvoiceschanged: Sündmusekuulaja, mis käivitub, kui saadaolevate häälte loend muutub. See on vajalik, kuna hääled laaditakse asünkroonselt.

Enne synth.getVoices() kasutamist on ülioluline oodata sündmust voiceschanged, et tagada kõigi häälte laadimine. Ilma selleta võib häälte loend olla tühi.

Kõnesünteesi lausungi loomine

Teksti rääkimiseks peate looma SpeechSynthesisUtterance objekti:

            
const utterThis = new SpeechSynthesisUtterance('Hello world!');
utterThis.lang = 'en-US'; // Set the language
utterThis.voice = voices[0]; // Set the voice
utterThis.pitch = 1; // Set the pitch (0-2)
utterThis.rate = 1; // Set the rate (0.1-10)
utterThis.volume = 1; // Set the volume (0-1)

            

              
                Copy
              
            
          

Vaatame selle koodi lähemalt:

• new SpeechSynthesisUtterance('Hello world!'): Loob uue SpeechSynthesisUtterance objekti koos räägitava tekstiga.
• utterThis.lang = 'en-US': Määrab kõnesünteesi keele. See peaks vastama räägitava teksti keelele.
• utterThis.voice = voices[0]: Määrab kasutatava hääle. Saate valida saadaolevate häälte hulgast, mis on saadud synth.getVoices() kaudu. Kasutajale hääle valimise võimaldamine parandab juurdepääsetavust.
• utterThis.pitch = 1: Määrab hääle helikõrguse. Väärtus 1 on normaalne helikõrgus.
• utterThis.rate = 1: Määrab rääkimiskiiruse. Väärtus 1 on normaalne kiirus. Kognitiivsete eripäradega kasutajad võivad vajada aeglasemat või kiiremat kiirust.
• utterThis.volume = 1: Määrab helitugevuse. Väärtus 1 on maksimaalne helitugevus.

Teksti rääkimine

Teksti rääkimiseks kutsuge meetod speak():

            
synth.speak(utterThis);

            

              
                Copy
              
            
          

Kõnesünteesi sündmuste käsitlemine

SpeechSynthesisUtterance objekt väljastab mitu sündmust, mida saate kuulata:

• start: Käivitatakse, kui kõnesüntees algab.
• end: Käivitatakse, kui kõnesüntees lõpeb.
• pause: Käivitatakse, kui kõnesüntees on peatatud.
• resume: Käivitatakse, kui kõnesünteesi jätkatakse.
• error: Käivitatakse, kui kõnesünteesi ajal tekib viga.
• boundary: Käivitatakse, kui jõutakse sõna või lause piirini (kasulik räägitava teksti esiletõstmiseks).

            
utterThis.onstart = function(event) {
 console.log('Speech synthesis started.');
};

utterThis.onend = function(event) {
 console.log('Speech synthesis ended.');
};

utterThis.onerror = function(event) {
 console.error('Speech synthesis error:', event.error);
};

utterThis.onpause = function(event) {
 console.log('Speech synthesis paused.');
};

utterThis.onresume = function(event) {
 console.log('Speech synthesis resumed.');
};

utterThis.onboundary = function(event) {
 console.log('Word boundary: ' + event.name + ' at position ' + event.charIndex);
};

            

              
                Copy
              
            
          

Kõnesünteesi peatamine, jätkamine ja tühistamine

Saate kõnesünteesi peatada, jätkata ja tühistada järgmiste meetodite abil:

            
synth.pause(); // Peatab kõnesünteesi
synth.resume(); // Jätkab kõnesünteesi
synth.cancel(); // Tühistab kõnesünteesi

            

              
                Copy
              
            
          

Näide: lihtne teksti kõneks rakendus

Siin on täielik näide lihtsast teksti kõneks rakendusest:

            
<label for="textInput">Enter Text:</label>
<textarea id="textInput" rows="4" cols="50">Hello world!</textarea>
<br>
<label for="voiceSelect">Select Voice:</label>
<select id="voiceSelect"></select>
<br>
<button id="speakButton">Speak</button>

<script>
 const synth = window.speechSynthesis;
 const textInput = document.getElementById('textInput');
 const voiceSelect = document.getElementById('voiceSelect');
 const speakButton = document.getElementById('speakButton');
 let voices = [];

 function populateVoiceList() {
  voices = synth.getVoices();
  voices = voices.filter(voice => voice.lang);
  voiceSelect.innerHTML = '';
  voices.forEach(voice => {
   const option = document.createElement('option');
   option.textContent = `${voice.name} (${voice.lang})`;
   option.value = voice.name;
   voiceSelect.appendChild(option);
  });
 }

 populateVoiceList();
 if (synth.onvoiceschanged !== undefined) {
  synth.onvoiceschanged = populateVoiceList;
 }

 speakButton.addEventListener('click', function() {
  if (synth.speaking) {
   console.error('speechSynthesis.speaking');
   return;
  }
  const utterThis = new SpeechSynthesisUtterance(textInput.value);
  const selectedVoiceName = voiceSelect.value;
  const selectedVoice = voices.find(voice => voice.name === selectedVoiceName);
  if (selectedVoice) {
   utterThis.voice = selectedVoice;
  } else {
   console.warn(`Voice ${selectedVoiceName} not found. Using default voice.`);
  }
  utterThis.onstart = function(event) {
   console.log('Speech synthesis started.');
  };
  utterThis.onend = function(event) {
   console.log('Speech synthesis ended.');
  };
  utterThis.onerror = function(event) {
   console.error('Speech synthesis error:', event.error);
  };
  utterThis.lang = 'en-US'; // Or get from user selection
  utterThis.pitch = 1;
  utterThis.rate = 1;
  utterThis.volume = 1;

  synth.speak(utterThis);
 });

</script>

            

              
                Copy
              
            
          

See kood loob tekstivälja, kuhu kasutaja saab teksti sisestada, rippmenüü hääle valimiseks ja nupu teksti rääkimiseks. Valitud häält kasutatakse kõnesünteesiks.

Brauseri ühilduvus ja polüfillid

Web Speech API-d toetavad enamik kaasaegseid brausereid, kuid toe tasemes ja saadaolevates spetsiifilistes funktsioonides võib esineda erinevusi. Siin on üldine ülevaade:

• Chrome: Suurepärane tugi nii kõnetuvastusele kui ka kõnesünteesile.
• Firefox: Hea tugi kõnesünteesile. Kõnetuvastuse tugi võib nõuda lippude lubamist.
• Safari: Hea tugi nii kõnetuvastusele kui ka kõnesünteesile.
• Edge: Hea tugi nii kõnetuvastusele kui ka kõnesünteesile.

Erinevate brauserite vahelise ühilduvuse tagamiseks saate kasutada polüfille. Polüfill on koodijupp, mis pakub funktsionaalsust, mida brauser natiivselt ei toeta. Web Speech API jaoks on saadaval mitu polüfilli, näiteks:

• annyang: Populaarne JavaScripti teek, mis lihtsustab kõnetuvastust.
• responsivevoice.js: JavaScripti teek, mis pakub ühtlast teksti kõneks kogemust erinevates brauserites.

Polüfillide kasutamine aitab teil jõuda laiema publikuni ja pakkuda ühtlast kasutajakogemust ka vanemates brauserites.

Parimad tavad ja kaalutlused

Web Speech API rakendamisel arvestage järgmiste parimate tavadega:

• Küsige mikrofoni juurdepääsu vastutustundlikult: Selgitage alati kasutajale, miks teil on vaja mikrofoni juurdepääsu, ja küsige seda ainult siis, kui see on vajalik. Andke selged juhised mikrofoni juurdepääsu andmiseks. Kasutaja mis tahes riigis hindab läbipaistvust.
• Käsitlege vigu sujuvalt: Rakendage robustne veakäsitlus, et tabada võimalikke probleeme, nagu võrguvead, mikrofoni juurdepääsu keelamine ja kõne puudumine. Andke kasutajale informatiivseid veateateid.
• Optimeerige erinevatele keeltele: Määrake atribuut lang kasutaja keelele optimaalse täpsuse saavutamiseks. Kaaluge keelevaliku võimaluste pakkumist. Täpne keeletuvastus on globaalse publiku jaoks hädavajalik.
• Andke visuaalset tagasisidet: Andke kasutajale visuaalset tagasisidet, et näidata, et kõnetuvastus või -süntees on pooleli. See võib hõlmata mikrofoni ikooni kuvamist või räägitava teksti esiletõstmist. Visuaalsed vihjed parandavad kasutajakogemust.
• Austage kasutaja privaatsust: Olge läbipaistev selles, kuidas te kasutaja hääleandmeid kasutate, ja veenduge, et järgite kõiki kohaldatavaid privaatsuseeskirju. Kasutajate usaldus on esmatähtis.
• Testige põhjalikult: Testige oma rakendust erinevates brauserites ja seadmetes, et tagada ühilduvus ja optimaalne jõudlus. Erinevates keskkondades testimine on globaalselt juurdepääsetava rakenduse jaoks ülioluline.
• Arvestage ribalaiusega: Kõnetuvastus ja -süntees võivad tarbida märkimisväärset ribalaiust. Optimeerige oma rakendust ribalaiuse kasutamise minimeerimiseks, eriti aeglase internetiühendusega kasutajate jaoks. See on eriti oluline piiratud infrastruktuuriga piirkondades.
• Kujundage juurdepääsetavust silmas pidades: Veenduge, et teie rakendus oleks puuetega kasutajatele juurdepääsetav. Pakkuge alternatiivseid sisestusmeetodeid ja väljundvorminguid.

Reaalse maailma rakendused

Web Speech API-l on lai valik potentsiaalseid rakendusi erinevates tööstusharudes. Siin on mõned näited:

• E-kaubandus: Hääljuhtimisega tooteotsing ja tellimine. Kujutage ette klienti Saksamaal, kes kasutab häälkäsklusi toodete otsimiseks ja ostmiseks e-kaubanduse veebisaidil.
• Haridus: Keeleõpperakendused häälduse tagasisidega. Nagu varem mainitud, võiks Hispaanias inglise keelt õppiv õpilane kasutada kõnetuvastust häälduse harjutamiseks.
• Tervishoid: Hääljuhtimisega meditsiiniliste andmete süsteemid ja patsientide suhtlusvahendid. Kanadas asuv arst võiks dikteerida patsiendi märkmeid, kasutades kõnetuvastust.
• Mängud: Hääljuhtimisega mängud ja interaktiivsed jutustamiskogemused. Mängija Jaapanis võiks juhtida mängutegelast häälkäskluste abil.
• Targad kodud: Hääljuhtimisega koduautomaatikasüsteemid. Austraalias asuv majaomanik saaks juhtida tulesid, seadmeid ja turvasüsteeme häälkäskluste abil.
• Navigatsioon: Häälega aktiveeritav kaardiotsing ja samm-sammult juhised. Autojuht Itaalias võiks kasutada häälkäsklusi restorani leidmiseks ja juhiste saamiseks.
• Klienditeenindus: Häälega aktiveeritavad vestlusrobotid ja virtuaalsed assistendid klienditoe jaoks. Kliendid üle maailma saaksid suhelda ettevõtetega, kasutades loomuliku keelega häälvestlusi.

Häälsuhtluse tulevik veebis

Web Speech API areneb pidevalt, pidevate täiustustega täpsuses, jõudluses ja funktsioonide komplektis. Kuna häälsuhtlus muutub meie igapäevaelus üha levinumaks, hakkab Web Speech API mängima üha olulisemat rolli veebi tuleviku kujundamisel.

Siin on mõned potentsiaalsed tulevikuarengud:

• Parem täpsus ja loomuliku keele töötlus (NLP): NLP edusammud võimaldavad täpsemat ja nüansseeritumat kõnetuvastust, mis võimaldab rakendustel mõista keerukaid käske ja konteksti.
• Loomulikumad hääled: Teksti kõneks hääled muutuvad loomulikumaks ja inimlikumaks, muutes sünteesitud kõne kaasahaaravamaks ja vähem robotlikuks.
• Platvormideülene ühilduvus: Jätkuvad jõupingutused Web Speech API standardiseerimiseks tagavad ühtlase ühilduvuse erinevates brauserites ja seadmetes.
• Integratsioon tehisintellektiga (AI): Integratsioon AI platvormidega võimaldab intelligentsemaid ja isikupärastatud häälsuhtlusi.
• Täiustatud turvalisus ja privaatsus: Täiustatud turvameetmed kaitsevad kasutaja privaatsust ja takistavad volitamata juurdepääsu hääleandmetele.

Kokkuvõte

Web Speech API on võimas tööriist, mis võib parandada juurdepääsetavust, täiustada kasutajakogemust ja luua kaasahaaravaid veebirakendusi. Kasutades kõnetuvastuse ja teksti kõneks sünteesi võimsust, saavad arendajad avada uusi võimalusi kasutajatega suhtlemiseks ja luua uuenduslikke lahendusi, millest on kasu globaalsele publikule. Kuna tehnoloogia areneb edasi, võime oodata veelgi põnevamaid Web Speech API rakendusi tulevastel aastatel.