SpeechSynthesisUtterance

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.

* Some parts of this feature may have varying levels of support.

Giao diện SpeechSynthesisUtterance của Web Speech API đại diện cho một yêu cầu phát âm. Nó chứa nội dung mà dịch vụ giọng nói cần đọc và các thông tin về cách đọc (ví dụ: ngôn ngữ, cao độ và âm lượng).

EventTarget SpeechSynthesisUtterance

Hàm khởi tạo

SpeechSynthesisUtterance()

Trả về một đối tượng SpeechSynthesisUtterance mới.

Thuộc tính phiên bản

SpeechSynthesisUtterance cũng kế thừa các thuộc tính từ giao diện cha của nó là EventTarget.

SpeechSynthesisUtterance.lang

Lấy và đặt ngôn ngữ của yêu cầu phát âm.

SpeechSynthesisUtterance.pitch

Lấy và đặt cao độ mà yêu cầu phát âm sẽ được nói.

SpeechSynthesisUtterance.rate

Lấy và đặt tốc độ mà yêu cầu phát âm sẽ được nói.

SpeechSynthesisUtterance.text

Lấy và đặt văn bản sẽ được tổng hợp khi yêu cầu phát âm được nói.

SpeechSynthesisUtterance.voice

Lấy và đặt giọng nói sẽ được dùng để đọc yêu cầu phát âm.

SpeechSynthesisUtterance.volume

Lấy và đặt âm lượng mà yêu cầu phát âm sẽ được nói.

Sự kiện

Lắng nghe các sự kiện này bằng cách sử dụ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.

boundary

Kích hoạt khi yêu cầu phát âm đang được nói đến ranh giới từ hoặc câu. Cũng có thể truy cập qua thuộc tính onboundary.

end

Kích hoạt khi yêu cầu phát âm đã kết thúc. Cũng có thể truy cập qua thuộc tính onend.

error

Kích hoạt khi xảy ra lỗi ngăn yêu cầu phát âm được nói thành công. Cũng có thể truy cập qua thuộc tính onerror.

mark

Kích hoạt khi yêu cầu phát âm đang được nói đến thẻ SSML "mark" được đặt tên. Cũng có thể truy cập qua thuộc tính onmark.

pause

Kích hoạt khi yêu cầu phát âm bị tạm dừng giữa chừng. Cũng có thể truy cập qua thuộc tính onpause.

resume

Kích hoạt khi yêu cầu phát âm đã bị tạm dừng được tiếp tục. Cũng có thể truy cập qua thuộc tính onresume.

start

Kích hoạt khi yêu cầu phát âm bắt đầu được nói. Cũng có thể truy cập qua thuộc tính onstart.

Ví dụ

Trong bản demo cơ bản Speech synthesizer demo, trước tiên chúng ta lấy tham chiếu đến bộ điều khiển SpeechSynthesis bằng cách sử dụng window.speechSynthesis. Sau khi định nghĩa một số biến cần thiết, chúng ta lấy danh sách các giọng nói có sẵn bằng SpeechSynthesis.getVoices() và điền vào menu select để người dùng có thể chọn giọng nói mình muốn.

Bên trong trình xử lý inputForm.onsubmit, chúng ta ngăn form gửi đi bằng preventDefault(), dùng hàm khởi tạo để tạo một đối tượng utterance mới chứa văn bản từ <input>, đặt voice của utterance thành giọng nói đã chọn trong phần tử <select>, và bắt đầu phát âm qua phương thức SpeechSynthesis.speak().

js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

let voices;

function loadVoices() {
  voices = synth.getVoices();
  for (const [i, voice] of voices.entries()) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;
    option.value = i;
    voiceSelect.appendChild(option);
  }
}

// in Google Chrome the voices are not ready on page load
if ("onvoiceschanged" in synth) {
  synth.onvoiceschanged = loadVoices;
} else {
  loadVoices();
}

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  utterThis.voice = voices[voiceSelect.value];
  synth.speak(utterThis);
  inputTxt.blur();
};

Thông số kỹ thuật

Thông số kỹ thuật
Web Speech API
# speechsynthesisutterance

Tương thích trình duyệt

Xem thêm