WebSpeechAPI, чтобы сделать сайт доступным, но сначала он начинается со всего документа, а затем снова с наведенным элементом.
Как решить эту проблему?
Я ссылался на большую часть кода со страницы WebSpeechAPI MDN .
Все, что я хочу, это чтобы браузер выводил текст тега, над которым я наведу курсор.
Но он делает это после того, как сначала выскажет все содержимое документа. Я думаю, что это так, потому что сначала он ловит документ, прежде чем я смогу добраться до элемента.
var synth = window.speechSynthesis;
var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('.txt');
var voiceSelect = document.querySelector('select');
var title = document.querySelector('#title');
var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');
var voices = []; //creat aan array to get thev voices
function populateVoiceList() {
voices = synth.getVoices(); // get the voices form the browser
for (i = 0; i < voices.length; i++) {
var option = document.createElement('option'); //create an element named option
option.textContent = voices[i].name + ' (' + voices[i].lang + ')'; //get all the info about the voice from the device and store in the text of the option tag
if (voices[i].default) {
option.textContent += ' -- DEFAULT';
}
option.setAttribute('data-lang', voices[i].lang); //set attributes of the option tag
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) { // this handler gets fired when the list returned by the getVoices function get changed
speechSynthesis.onvoiceschanged = populateVoiceList; //requires a function to handle the change in the list
}
document.onmouseover = function(e) {
var targ;
event.preventDefault(); //prevent default actions of the browser
if (e.target) targ = e.target;
var utterThis = new SpeechSynthesisUtterance(targ.textContent); //The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request.
var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name'); //get the data-name attribute of the selected option
for (i = 0; i < voices.length; i++) {
if (voices[i].name === selectedOption) {
utterThis.voice = voices[i]; //. We set the matching voice object to be the value of the SpeechSynthesisUtterance.voice property.
}
}
utterThis.pitch = pitch.value;
utterThis.rate = rate.value;
synth.speak(utterThis);
pitch.onchange = function() {
pitchValue.textContent = pitch.value;
}
rate.onchange = function() {
rateValue.textContent = rate.value;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="Speech sYNTHESIZER" >Speech synthesiser</h1>
<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
<form>
<input type="text" class="txt">
<div>
<label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
<div class="rate-value">1</div>
<div class="clearfix"></div>
</div>
<div>
<label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
<div class="pitch-value">1</div>
<div class="clearfix"></div>
</div>
<select></select>
</form>
</body>
</html>