How to implement text-to-speech with HTML5?
HTML5 does not have built-in text-to-speech (TTS) elements, but it can be implemented through the Web Speech API. 1. Use the SpeechSynthesis interface's spoke() method to convert text into speech, and implement basic functions by creating SpeechSynthesisUtterance object and passing in text content. 2. You can adjust the speech speed, tone and voice by setting the rate, pitch and voice properties of utterance. However, please note that getVoices() may be empty at the beginning, and you should listen to the voiceschanged event to load available voices. 3. The voice playback status can be controlled through speechSynthesis.pause(), resume() and cancel(). 4. 'speechSynthesis' in window should be detected to ensure browser support and avoid running in unsupported environments. It should be noted that voice playback must be triggered by user operations, and the mobile support situation needs to be tested in practice. The overall solution does not require external libraries or servers, and is fully implemented on the client side.
HTML5 doesn't have a built-in text-to-speech (TTS) element like it does for audio or video, but you can implement text-to-speech using the Web Speech API , specifically the SpeechSynthesis interface , which is supported in most modern browsers.
Here's how you can implement TTS with JavaScript and HTML5:
1. Basic Text-to-Speech Implementation
Use the speechSynthesis.speak() method to convert text to speech.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Text to Speech</title>
</head>
<body>
<input type="text" id="text-input" placeholder="Enter text to speak" />
<button id="speak-btn">Speak</button>
<script>
const speakBtn = document.getElementById('speak-btn');
const textInput = document.getElementById('text-input');
speakBtn.addEventListener('click', () => {
const text = textInput.value;
if (text.trim() !== '') {
const utterance = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(utterance);
}
});
</script>
</body>
</html>This simple example takes user input and speaks it aloud when the button is clicked.
2. Customizing Voice, Rate, and Pitch
You can enhance the speech output by adjusting voice settings.
const utterance = new SpeechSynthesisUtterance(text); // Adjust speed (default: 1, range: 0.1 to 10) utterance.rate = 1; // Adjust pitch (default: 1, range: 0 to 2) utterance.pitch = 1; // Select voice (optional) const voices = window.speechSynthesis.getVoices(); utterance.voice = voices.find(voice => voice.name === 'Google US English'); window.speechSynthesis.speak(utterance);
Note :
speechSynthesis.getVoices()may return an empty array initially. You might need to wait for thevoiceschangedevent:
let voices = [];
function loadVoices() {
voices = window.speechSynthesis.getVoices();
}
// Populate voices when they load
window.speechSynthesis.onvoiceschanged = loadVoices;3. Controlling Speech (Pause, Resume, Cancel)
You can control playback using:
-
speechSynthesis.pause()– pause speaking -
speechSynthesis.resume()– resume speaking -
speechSynthesis.cancel()– stop and clear queue
document.getElementById('pause-btn').addEventListener('click', () => {
window.speechSynthesis.pause();
});
document.getElementById('resume-btn').addEventListener('click', () => {
window.speechSynthesis.resume();
});
document.getElementById('cancel-btn').addEventListener('click', () => {
window.speechSynthesis.cancel();
});4. Handling Browser Support
Always check if the browser supports the Web Speech API:
if ('speechSynthesis' in window) {
// TTS is supported
} else {
alert('Text-to-speech is not supported in this browser.');
}Key Points to Remember
- The Web Speech API works without external libraries.
- It's client-side, so no server or API keys are needed.
- Voice availability depends on the operating system and browser.
- Auto-playing speech may be blocked unless triggered by a user action (like a click).
- Mobile support varies — test on target devices.
Basically, while HTML5 doesn't include native TTS markup, combining HTML with the Web Speech API gives you full control over text-to-speech functionality in the browser. Not complicated, but powerful when used right.
The above is the detailed content of How to implement text-to-speech with HTML5?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20521
7
13632
4
How to center an image vertically in HTML5? (Layout techniques)
Mar 07, 2026 am 02:05 AM
Flexbox is the most stable for centered images. The key is to set display:flex and align-items:center in the parent container and specify the height; using place-items:center for Grid is more concise; absolute positioning requires top:50% with transform:translateY(-50%); vertical-align is invalid for block-level centering.
How to use SVG graphics directly in HTML5? (Inline SVG)
Mar 07, 2026 am 01:40 AM
SVG tags can be written directly into HTML without any external reference. The core of InlineSVG is to use it as an ordinary HTML element. The browser supports it natively. It does not require additional loading, does not trigger HTTP requests, and can be directly controlled by CSS and JS. A common mistake is to insert it as an image - this way you lose the advantage of inlining, the style cannot penetrate, and JS cannot get inside. Directly copy the SVG source code (exported from Figma, or handwritten), and paste it into an HTML file or any container. Make sure the beginning is, the end is, and there is no DOCTYPE in the middle. Delete useless attributes such as xmlns="http://www.
