// 创建语音对象var utterance = new SpeechSynthesisUtterance('My name is Aurelio De Rosa'); 테스트가 실패하면 "API가 지원하지 않는다"는 메시지를 표시합니다.지원이 확인되면 태그에 배치 된 특정 선택 상자에 사용 가능한 음성을 동적으로로드합니다. Chrome (#340160)의 getVoices () 메소드에는 문제가 있습니다. 그래서 setInterval ()을 사용하여 이것에 대한 해결 방법을 만들었습니다. 그런 다음 각 버튼에 핸들러를 첨부하여 특정 작업 (재생, 중지 등)을 호출 할 수 있습니다. 코드의 라이브 데모가 여기에 제공됩니다. 또한,이 데모와 지금까지 구축 한 다른 모든 데모는 HTML5 API 데모 리포지토리에서 찾을 수 있습니다. ````
Speech Synthesis Api & gt;charset = "utf-8"& gt; 이름 = "viewport"content = "width = device-width, 초기 스케일 = 1.0"/& gt; & gt; 스피치 합성 API 데모 & gt;
{ -webkit- 박스 크기 : 국경 박스; -모임 박스 크기 : 국경 박스; 박스 사이징 : 국경 박스; } <.> & gt;
<code> body
{
max-width: 500px;
margin: 2em auto;
padding: 0 0.5em;
font-size: 20px;
}
h1,
.buttons-wrapper
{
text-align: center;
}
.hidden
{
display: none;
}
#text,
#log
{
display: block;
width: 100%;
height: 5em;
overflow-y: scroll;
border: 1px solid #333333;
line-height: 1.3em;
}
.field-wrapper
{
margin-top: 0.2em;
}
.button-demo
{
padding: 0.5em;
display: inline-block;
margin: 1em auto;
}
></code>
결론
이 기사에서는 Speech Synthesis API를 소개합니다. 이것은 텍스트를 종합하고 웹 사이트 사용자의 전반적인 경험, 특히 시각 장애인 사용자의 전반적인 경험을 향상시키는 API입니다. 우리가 볼 수 있듯이이 API는 여러 객체, 메소드 및 속성을 노출하지만 사용하기는 어렵지 않습니다. 불행히도, 브라우저 지원은 현재 매우 가난하며 Chrome과 Safari는이를 지원하는 유일한 브라우저입니다. 더 많은 브라우저가 소송을 따르고 실제로 웹 사이트에서 사용하는 것을 고려할 수 있기를 바랍니다. 나는 그렇게하기로 결정했다. 데모를하는 것을 잊지 마십시오.이 게시물이 마음에 들면 의견을 남겨주세요. 나는 당신의 의견을 정말로 듣고 싶습니다. 웹 페이지 및 음성 합성 API (FAQ)에 대한 자주 묻는 질문
<code><h3>></h3>Play area>
action="" method="get">
<label> for="text"></label>Text:>
id="text">>
<div> class="field-wrapper">
<label> for="voice"></label>Voice:>
id="voice">>
</div>>
<div> class="field-wrapper">
<label> for="rate"></label>Rate (0.1 - 10):>
type="number" id="rate" min="0.1" max="10" value="1" step="any" />
</div>>
<div> class="field-wrapper">
<label> for="pitch"></label>Pitch (0.1 - 2):>
type="number" id="pitch" min="0.1" max="2" value="1" step="any" />
</div>>
<div> class="buttons-wrapper">
id="button-speak-ss" class="button-demo">Speak>
id="button-stop-ss" class="button-demo">Stop>
id="button-pause-ss" class="button-demo">Pause>
id="button-resume-ss" class="button-demo">Resume>
</div>>
>
id="ss-unsupported" class="hidden">API not supported>
<h3>></h3>Log>
<div> id="log"></div>>
id="clear-all" class="button-demo">Clear all>
>
// Test browser support
if (window.SpeechSynthesisUtterance === undefined) {
document.getElementById('ss-unsupported').classList.remove('hidden');
['button-speak-ss', 'button-stop-ss', 'button-pause-ss', 'button-resume-ss'].forEach(function(elementId) {
document.getElementById(elementId).setAttribute('disabled', 'disabled');
});
} else {
var text = document.getElementById('text');
var voices = document.getElementById('voice');
var rate = document.getElementById('rate');
var pitch = document.getElementById('pitch');
var log = document.getElementById('log');
// Workaround for a Chrome issue (#340160 - https://code.google.com/p/chromium/issues/detail?id=340160)
var watch = setInterval(function() {
// Load all voices available
var voicesAvailable = speechSynthesis.getVoices();
if (voicesAvailable.length !== 0) {
for(var i = 0; i voices.innerHTML += ' 'data-voice-uri="' + voicesAvailable[i].voiceURI + '">' +
voicesAvailable[i].name +
(voicesAvailable[i].default ? ' (default)' : '') + '';
}
clearInterval(watch);
}
}, 1);
document.getElementById('button-speak-ss').addEventListener('click', function(event) {
event.preventDefault();
var selectedVoice = voices.options[voices.selectedIndex];
// Create the utterance object setting the chosen parameters
var utterance = new SpeechSynthesisUtterance();
utterance.text = text.value;
utterance.voice = selectedVoice.getAttribute('data-voice-uri');
utterance.lang = selectedVoice.value;
utterance.rate = rate.value;
utterance.pitch = pitch.value;
utterance.onstart = function() {
log.innerHTML = 'Speaker started' + '<br>' + log.innerHTML;
};
utterance.onend = function() {
log.innerHTML = 'Speaker finished' + '<br>' + log.innerHTML;
};
window.speechSynthesis.speak(utterance);
});
document.getElementById('button-stop-ss').addEventListener('click', function(event) {
event.preventDefault();
window.speechSynthesis.cancel();
log.innerHTML = 'Speaker stopped' + '<br>' + log.innerHTML;
});
document.getElementById('button-pause-ss').addEventListener('click', function(event) {
event.preventDefault();
window.speechSynthesis.pause();
log.innerHTML = 'Speaker paused' + '<br>' + log.innerHTML;
});
document.getElementById('button-resume-ss').addEventListener('click', function(event) {
event.preventDefault();
if (window.speechSynthesis.paused === true) {
window.speechSynthesis.resume();
log.innerHTML = 'Speaker resumed' + '<br>' + log.innerHTML;
} else {
log.innerHTML = 'Unable to resume. Speaker is not paused.' + '<br>' + log.innerHTML;
}
});
document.getElementById('clear-all').addEventListener('click', function() {
log.textContent = '';
});
}
></code>웹 응용 프로그램에서 음성 합성 API를 어떻게 구현합니까?
위 내용은 말하는 웹 페이지 및 음성 합성 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
