SpeechSynthesis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.
Giao diện SpeechSynthesis của Web Speech API là giao diện điều khiển cho dịch vụ giọng nói; nó có thể được dùng để truy xuất thông tin về các voice tổng hợp có sẵn trên thiết bị, bắt đầu và tạm dừng phát giọng nói, cùng các lệnh khác.
Thuộc tính thể hiện
SpeechSynthesis cũng kế thừa các thuộc tính từ giao diện cha của nó, EventTarget.
SpeechSynthesis.pausedRead only-
Một giá trị boolean trả về
truenếu đối tượngSpeechSynthesisđang ở trạng thái tạm dừng. SpeechSynthesis.pendingRead only-
Một giá trị boolean trả về
truenếu hàng đợi utterance còn chứa các utterance chưa được nói. SpeechSynthesis.speakingRead only-
Một giá trị boolean trả về
truenếu một utterance hiện đang được phát ra lời nói, ngay cả khiSpeechSynthesisđang ở trạng thái tạm dừng.
Phương thức thể hiện
SpeechSynthesis cũng kế thừa các phương thức từ giao diện cha của nó, EventTarget.
SpeechSynthesis.cancel()-
Xóa tất cả utterance khỏi hàng đợi utterance.
SpeechSynthesis.getVoices()-
Trả về một danh sách các đối tượng
SpeechSynthesisVoiceđại diện cho mọi voice có sẵn trên thiết bị hiện tại. SpeechSynthesis.pause()-
Đưa đối tượng
SpeechSynthesisvào trạng thái tạm dừng. SpeechSynthesis.resume()-
Đưa đối tượng
SpeechSynthesisvào trạng thái không tạm dừng: tiếp tục nếu trước đó nó đang tạm dừng. SpeechSynthesis.speak()-
Thêm một
utterancevào hàng đợi utterance; nó sẽ được nói khi mọi utterance khác được xếp trước nó đã được nói xong.
Sự kiện
Lắng nghe sự kiện này bằng addEventListener() hoặc bằng cách gán một trình xử lý sự kiện vào thuộc tính oneventname của giao diện này.
voiceschanged-
Được kích hoạt khi danh sách các đối tượng
SpeechSynthesisVoicemàSpeechSynthesis.getVoices()sẽ trả về đã thay đổi. Cũng có sẵn qua thuộc tínhonvoiceschanged.
Ví dụ
Trước hết, một ví dụ:
let utterance = new SpeechSynthesisUtterance("Hello world!");
speechSynthesis.speak(utterance);
Tiếp theo là một ví dụ đầy đủ hơn. Trong Speech synthesizer demo, chúng ta trước tiên lấy tham chiếu tới bộ điều khiển SpeechSynthesis bằng window.speechSynthesis. Sau khi định nghĩa các biến cần thiết, chúng ta lấy danh sách các voice có sẵn bằng SpeechSynthesis.getVoices() và điền chúng vào menu chọn để người dùng có thể chọn voice họ muốn.
Bên trong trình xử lý inputForm.onsubmit, chúng ta ngăn form gửi đi bằng preventDefault(), tạo một thể hiện SpeechSynthesisUtterance mới chứa văn bản từ thẻ <input>, đặt voice của utterance thành voice được chọn trong phần tử <select>, và bắt đầu phát utterance qua phương thức SpeechSynthesis.speak().
const synth = window.speechSynthesis;
const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");
let voices = [];
function populateVoiceList() {
voices = synth.getVoices();
for (const voice of voices) {
const option = document.createElement("option");
option.textContent = `${voice.name} (${voice.lang})`;
if (voice.default) {
option.textContent += " — DEFAULT";
}
option.setAttribute("data-lang", voice.lang);
option.setAttribute("data-name", voice.name);
voiceSelect.appendChild(option);
}
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
inputForm.onsubmit = (event) => {
event.preventDefault();
const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
const selectedOption =
voiceSelect.selectedOptions[0].getAttribute("data-name");
for (const voice of voices) {
if (voice.name === selectedOption) {
utterThis.voice = voice;
}
}
utterThis.pitch = pitch.value;
utterThis.rate = rate.value;
synth.speak(utterThis);
inputTxt.blur();
};
Đặc tả kỹ thuật
| Specification |
|---|
| Web Speech API> # tts-section> |