WebSpeechAPI를 사용하여 사이트에 액세스 할 수 있지만 먼저 전체 문서로 시작한 다음 마우스를 올린 요소로 다시 시작합니다.
이 문제를 해결하는 방법? MDN 페이지
에서 대부분의 코드를 WebSpeechAPI 참조했습니다 .
내가 원하는 것은 브라우저가 내가 가리키고있는 태그의 텍스트를 출력하는 것입니다.
하지만 먼저 문서의 모든 내용을 말한 후에 그렇게합니다. 요소에 도달하기 전에 먼저 문서를 포착하기 때문에 그렇게 생각합니다.
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>내가 원하는 것은 브라우저가 내가 가리키고있는 태그의 텍스트를 출력하는 것입니다.
당신은 합법적으로 좋은 의도에서 시작하고 있지만, 사실 당신이 특별한 게임이나 혁신적인 인터페이스를 만드는 경우를 제외하고는 그것은 나쁜 생각입니다. 웹에서의 접근성은 단순히 이와 같이 작동하지 않습니다. 사이트에 액세스 할 수 있도록 WCAG와 같은 표준을 준수하는 것이 좋습니다.
이에 대한 몇 가지 이유, 적어도 두 가지 큰 이유 :
따라서 정말 특별하거나 새로운 것을 만들지 않는 한, 사이트에 액세스하기 위해 많이 사용되는 수단을 선호하십시오.
하지만 먼저 문서의 모든 내용을 말한 후에 그렇게합니다. 요소에 도달하기 전에 먼저 문서를 포착하기 때문에 그렇게 생각합니다.
이것은 아마도 이벤트 버블 링 때문일 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다