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.

EventTarget SpeechSynthesis

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.paused Read only

Một giá trị boolean trả về true nếu đối tượng SpeechSynthesis đang ở trạng thái tạm dừng.

SpeechSynthesis.pending Read only

Một giá trị boolean trả về true nếu hàng đợi utterance còn chứa các utterance chưa được nói.

SpeechSynthesis.speaking Read only

Một giá trị boolean trả về true nếu một utterance hiện đang được phát ra lời nói, ngay cả khi SpeechSynthesis đ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 SpeechSynthesis vào trạng thái tạm dừng.

SpeechSynthesis.resume()

Đưa đối tượng SpeechSynthesis và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 utterance và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 SpeechSynthesisVoiceSpeechSynthesis.getVoices() sẽ trả về đã thay đổi. Cũng có sẵn qua thuộc tính onvoiceschanged.

Ví dụ

Trước hết, một ví dụ:

js
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().

js
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

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

Xem thêm