Ubah Teks Menjadi Suara Menggunakan API Di JavaScript
Saya menghabiskan banyak waktu di media. Terkadang saya menulis tentang sesuatu, tetapi sebagian besar adalah membaca. Baca tentang pengalaman yang bersedia dibagikan oleh pengembang lain dengan komunitas.
Baru-baru ini, saya perhatikan bahwa web Medium memiliki tombol putar untuk setiap cerita. Awalnya, saya pikir hak istimewa ini hanya diberikan kepada beberapa cerita dan penulis. Tetapi saat berikutnya saya menemukan bahwa ini untuk semua pembaca. Ini berarti Anda bahkan dapat mendengar ceritanya di Medium. Besar!
Jadi saya bertanya-tanya bagaimana saya melakukannya, seperti pengembang biasa. Saya tahu bahwa ada Web API di domain JavaScript yang disebut Web Speech API untuk itu, tetapi saya tidak pernah menggunakan atau mempelajarinya.
Jadi hari ini, mari kita belajar tentang Web API ini bersama-sama dan membuat contoh kerja.
Data suara disematkan di aplikasi online menggunakan WebSpeech API. Pada artikel ini, kita akan membuat halaman web sederhana yang menggunakan WebSpeech API untuk mengimplementasikan text-to-speech.
Untuk demo ini, mari buat direktori baru dan buat dua file baru, index.html dan text-to-speech.js.
File HTML
Mari kita atur elemen berikut dalam file HTML:
- Menu select tanpa opsi. Gunakan JavaScript untuk memasukkan daftar kemungkinan audio di menu select yang kosong
- slider volume, nada, rentang kecepatan
- textarea untuk diinputkan
- Tombol kontrol ucapan
Demo ini menggunakan Bootstrap 5 untuk styling. Kodenya adalah sebagai berikut:
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<title>Text to Speech</title>
<style>
.card {
padding: 1rem 1.5rem;
border-radius: 7px;
box-shadow: rgb(45 46 46 / 35%) 0px 4px 32px 0px, rgb(45 46 46 / 8%) 0px 4px 16px 0px, rgb(45 46 46 / 10%) 0px 0px 4px 0px;
}
</style>
</head>
<body class="container mt-5 bg-light">
<div class="card">
<h2>Convert Text to Speech</h2>
<h5>Listen to those words!</h5>
<p class="lead mt-4">Select Voice</p>
<!-- Select Menu for Voice -->
<select id="voices" class="form-select"></select>
<!-- Range Slliders for Volume, Rate & Pitch -->
<div class="d-flex mt-4">
<div>
<p class="lead">Volume</p>
<input type="range" min="0" max="1" value="1" step="0.1" id="volume" />
<span id="volume-label" class="ms-2">1</span>
</div>
<div class="mx-5">
<p class="lead">Rate</p>
<input type="range" min="0.1" max="10" value="1" id="rate" step="0.1" />
<span id="rate-label" class="ms-2">1</span>
</div>
<div>
<p class="lead">Pitch</p>
<input type="range" min="0" max="1" value="1" step="0.1" id="pitch" />
<span id="pitch-label" class="ms-2">1</span>
</div>
</div>
<!-- Text Area for the User to Type -->
<textarea class="form-control mt-5" cols="30" rows="10" placeholder="Type here..."></textarea>
<!-- Control Buttons -->
<div class="mb-5">
<button id="start" class="btn btn-success mt-5 me-3">Start</button>
<button id="pause" class="btn btn-warning mt-5 me-3">Pause</button>
<button id="resume" class="btn btn-info mt-5 me-3">Resume</button>
<button id="cancel" class="btn btn-danger mt-5 me-3">Cancel</button>
</div>
</div>
</body>
<script src="./text-to-speech.js"></script>
</html>
Ini menunjukkan seperti apa tampilannya di browser:
output
File JavaScript
File JavaScript terutama menggunakan tiga antarmuka: SpeechSynthesis, window.speechSynthesis, dan SpeechSynthesisUtterance. Jadi mari kita memahami itu dengan mudah.
Antarmuka JavaScript SpeechSynthesis
Ini adalah antarmuka utama untuk layanan sintesis ucapan yang mengontrol sintesis atau pembuatan ucapan berdasarkan input teks. Antarmuka ini digunakan untuk memulai, menghentikan, menjeda, melanjutkan suara, dan mengakses suara yang didukung oleh perangkat.
Metode yang disediakan oleh antarmuka ini adalah:
- Speak(): Menambahkan ucapan (objek SpeechSynthesisUtterance) ke queue. Ini diucapkan jika tidak ada ucapan tertunda sebelum itu. Ini adalah fungsi.
- pause(): Menjeda ucapan yang sedang berlangsung
- resume(): Lanjutkan ucapan yang dijeda
- cancel(): Membatalkan ucapan atau ucapan tertunda yang telah dibuat yang belum diputar.
- getVoices(): Dapatkan daftar semua suara yang didukung yang didukung oleh perangkat
Properti JavaScript window.speechSynthesis
Metode speak() dipanggil pada antarmuka controller sintesis ucapan yang direferensikan oleh properti objek window JavaScript ini.
Anda dapat lebih memahami ini dengan melompat ke dalam kode.
Antarmuka JavaScript SpeechSynthesisUtterance
Ini adalah antarmuka yang benar-benar menghasilkan ucapan atau ucapan dari teks yang disediakan, seperti jenis bahasa, volume, nada, dan kecepatan berbicara. Setelah membuat objek untuk antarmuka ini, berikan objek tersebut ke metode speak() dari objek SpeechSynthesis untuk memutar audio.
Antarmuka SpeechSynthesisUtterance memiliki enam properti yang dapat Anda sempurnakan. Mereka:
bahasa:
Properti bahasa mendapatkan dan mengatur bahasa ujaran. Jika tidak disetel, nilai lang <html lang = ”en”> akan digunakan, dan jika <html lang = ”en”> lang tidak tersedia, default agen pengguna akan digunakan.
speech.lang = "en";
text:
Saat ucapan diucapkan, properti teks mendapatkan dan mengatur teks yang akan dikomposisikan. Anda dapat mengirim teks dalam format teks biasa. Dalam contoh ini, Anda perlu mengatur properti teks saat Anda menekan tombol mulai.
Berikan tombol click listener . Anda perlu mendapatkan nilai teks dari textarea dan mengatur properti ini ketika tombol diklik.
document.querySelector("#start").addEventListener("click", () => {
speech.text = document.querySelector("textarea").value;
});
Volume:
Properti volume mendapatkan dan mengatur volume ujaran. Ini adalah float yang menunjukkan nilai volume dalam rentang 0 (terendah) hingga 1 (tertinggi). Jika properti ini tidak disetel, nilai defaultnya adalah 1.
Tambahkan input listener ke slider rentang volume dan ubah properti volume saat nilai slider berubah. Nilai minimum, maksimum, dan default untuk slider sudah ditentukan dalam tag HTML.
Di samping range slider , tambahkan yang menampilkan nilai volume di halaman web Anda.
document.querySelector("#volume").addEventListener("input", () => {
// Get volume value from the input
const volume = document.querySelector("#volume").value;
// Set volume property of the SpeechSynthesisUtterance instance
speech.volume = volume;
// Update the volume label
document.querySelector("#volume-label").innerHTML = volume;
});
rate:
Properti rate mengembalikan dan mengatur tingkat ujaran. Ini adalah float yang mewakili nilai rate dan dapat ditentukan dalam kisaran 0,1 (terendah) hingga 10 (tertinggi). Jika properti ini tidak disetel, nilai defaultnya adalah 1.
Lakukan hal yang sama untuk rate seperti yang Anda lakukan untuk volume.
document.querySelector("#rate").addEventListener("input", () => {
// Get rate value from the input
const rate = document.querySelector("#rate").value;
// Set rate property of the SpeechSynthesisUtterance instance
speech.rate = rate;
// Update the rate label
document.querySelector("#rate-label").innerHTML = rate;
});
pitch:
Properti pitch kembali dan mengatur nada ucapan. Sekali lagi, ini adalah nilai floating point, di mana 0 berarti terendah dan 1 berarti tertinggi.
Lakukan hal yang sama untuk nada seperti yang Anda lakukan untuk kecepatan dan volume.
document.querySelector("#pitch").addEventListener("input", () => {
// Get pitch Value from the input
const pitch = document.querySelector("#pitch").value;
// Set pitch property of the SpeechSynthesisUtterance instance
speech.pitch = pitch;
// Update the pitch label
document.querySelector("#pitch-label").innerHTML = pitch;
});
voice:
Properti suara mendapatkan dan memodifikasi audio yang digunakan untuk mengirimkan audio. Anda harus menggunakan salah satu objek SpeechSynthesisVoice. Jika tidak disetel, suara default yang paling sesuai dengan pengaturan bahasa bicara akan digunakan.
Untuk mengatur suara suatu ucapan, Anda perlu mendapatkan daftar suara yang tersedia di objek window. Segera setelah objek window dimuat, audio menjadi tidak tersedia. Ini adalah operasi asinkron. Acara dipicu saat suara dimuat. Anda dapat mengatur fungsi yang akan dijalankan saat suara dimuat.
window.speechSynthesis.onvoiceschanged = () => {
// On Voices Loaded
};
Anda dapat menggunakan window.speechSynthesis.getVoices() untuk mendapatkan daftar suara. Mengembalikan larik objek SpeechSynthesisVoice yang dapat diakses. Simpan daftar ke array global dan gunakan untuk memperbarui menu pilihan di halaman web Anda dengan audio yang tersedia.
let voices = []; // global array
window.speechSynthesis.onvoiceschanged = () => {
// Get List of Voices
voices = window.speechSynthesis.getVoices();
// Initially set the First Voice in the Array.
speech.voice = voices[0];
// Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
let voiceSelect = document.querySelector("#voices");
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};
Sekarang menu suara telah berubah, Anda dapat menambahkan listener acara perubahan untuk memperbarui suara instance SpeechSynthesisUtterance Anda. Memanfaatkan nomor indeks (ditetapkan sebagai nilai setiap opsi) dan array global audio untuk memperbarui audio saat pengguna memperbarui audio.
document.querySelector("#voices").addEventListener("change", () => {
speech.voice = voices[document.querySelector("#voices").value];
});
Controls
Seperti yang mungkin Anda ingat, index.html memiliki beberapa tombol kontrol seperti start, resume, pause dan cancel. Mari buat mereka bekerja menggunakan antarmuka SpeechSynthesis dan metodenya.
start:
Anda harus meneruskan instance SpeechSynthesisUtterance ke window.speechSynthesis.speak() saat tombol start ditekan. Ini akan memulai proses konversi teks ke ucapan.
Anda harus mengatur properti teks sebelum memanggil fungsi ini.
Jika Anda memulai instance text-to-speech lain saat sedang berjalan, instance baru akan diantrekan setelah instance saat ini.
document.querySelector("#start").addEventListener("click", () => {
speech.text = document.querySelector("textarea").value;
window.speechSynthesis.speak(speech);
});
berhenti sebentar:
Anda dapat menggunakan window.speechSynthesis.pause() untuk menangguhkan instance SpeechSynthesisUtterance yang sedang berjalan.
document.querySelector("#pause").addEventListener("click", () => {
window.speechSynthesis.pause();
});
melanjutkan:
Anda dapat menggunakan window.speechSynthesis.resume() untuk melanjutkan instance SpeechSynthesisUtterance yang saat ini ditangguhkan.
document.querySelector("#resume").addEventListener("click", () => {
window.speechSynthesis.resume();
});
Kita dapat membatalkan instance SpeechSynthesisUtterance yang sedang berjalan saat ini menggunakan window.speechSynthesis.cancel().
document.querySelector("#cancel").addEventListener("click", () => {
window.speechSynthesis.cancel();
});
Sekarang semua kontrol sudah selesai dan properti yang diperlukan sudah disetel. Oleh karena itu, versi terakhir dari text-to-speech.js adalah:
// Initialize new SpeechSynthesisUtterance object
let speech = new SpeechSynthesisUtterance();
// Set Speech Language
speech.lang = "en";
let voices = []; // global array of available voices
window.speechSynthesis.onvoiceschanged = () => {
// Get List of Voices
voices = window.speechSynthesis.getVoices();
// Initially set the First Voice in the Array.
speech.voice = voices[0];
// Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
let voiceSelect = document.querySelector("#voices");
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};
document.querySelector("#rate").addEventListener("input", () => {
// Get rate Value from the input
const rate = document.querySelector("#rate").value;
// Set rate property of the SpeechSynthesisUtterance instance
speech.rate = rate;
// Update the rate label
document.querySelector("#rate-label").innerHTML = rate;
});
document.querySelector("#volume").addEventListener("input", () => {
// Get volume Value from the input
const volume = document.querySelector("#volume").value;
// Set volume property of the SpeechSynthesisUtterance instance
speech.volume = volume;
// Update the volume label
document.querySelector("#volume-label").innerHTML = volume;
});
document.querySelector("#pitch").addEventListener("input", () => {
// Get pitch Value from the input
const pitch = document.querySelector("#pitch").value;
// Set pitch property of the SpeechSynthesisUtterance instance
speech.pitch = pitch;
// Update the pitch label
document.querySelector("#pitch-label").innerHTML = pitch;
});
document.querySelector("#voices").addEventListener("change", () => {
// On Voice change, use the value of the select menu (which is the index of the voice in the global voice array)
speech.voice = voices[document.querySelector("#voices").value];
});
document.querySelector("#start").addEventListener("click", () => {
// Set the text property with the value of the textarea
speech.text = document.querySelector("textarea").value;
// Start Speaking
window.speechSynthesis.speak(speech);
});
document.querySelector("#pause").addEventListener("click", () => {
// Pause the speechSynthesis instance
window.speechSynthesis.pause();
});
document.querySelector("#resume").addEventListener("click", () => {
// Resume the paused speechSynthesis instance
window.speechSynthesis.resume();
});
document.querySelector("#cancel").addEventListener("click", () => {
// Cancel the speechSynthesis instance
window.speechSynthesis.cancel();
});
Dan ini adalah hasil akhir dari layar browser.
Final Output
Sekarang masukkan teks di textarea dan klik tombol Start untuk mendengar kata yang baru saja Anda tulis.
Terima kasih telah membaca!