Membuat Fitur Text-to-Speech untuk Membaca Artikel Otomatis
www.gurudzgn.com - Hi web developer, kembali lagi bersama dengan guru design kali ini kita akan membahas cara membuat "Fitur Text-to-speech untuk Membaca Artikel Otomatis dengan HTML, CSS, dan JavaScript."
Membuat Fitur Text-to-speech untuk Membaca Artikel Otomatis
Dalam dunia web development, ada berbagai cara untuk meningkatkan pengalaman pengguna. Salah satunya adalah dengan menyediakan fitur yang memungkinkan pengguna untuk mengakses dan membaca artikel secara lebih efisien. Salah satu cara untuk mencapai hal ini adalah dengan mengembangkan fitur Text-to-Speech (TTS) atau Text-to-speech (T2S) yang memungkinkan pengguna untuk mendengarkan artikel yang mereka baca. Pada artikel ini, kita akan menjelaskan cara membuat fitur Text-to-speech menggunakan HTML, CSS, dan JavaScript.
Mengapa Kita Memerlukan Fitur Text-to-speech?
Sebelum kita masuk ke dalam detail teknis, penting untuk memahami mengapa fitur Text-to-speech penting dalam pengembangan web. Fitur ini dapat membantu meningkatkan aksesibilitas dan kenyamanan pengguna, terutama bagi mereka yang mungkin memiliki keterbatasan dalam membaca teks atau hanya ingin mendengarkan konten tanpa harus membacanya secara manual, untuk informasi lebih lanjut mengenai Text-To-Speech bisa baca di sisni.
Dengan menggunakan Text-to-speech, pengguna dapat mengonversi teks artikel menjadi audio yang dapat didengarkan. Hal ini dapat berguna dalam berbagai konteks, seperti membantu pembaca yang memiliki masalah penglihatan, memungkinkan multitasking, atau memberikan alternatif bagi mereka yang lebih suka mendengarkan daripada membaca.
Tahapan Pembuatan Fitur Text-to-speech
Berikut adalah langkah-langkah dalam membuat fitur Text-to-speech untuk membaca artikel otomatis:
1. Struktur HTML
Pertama-tama, kita perlu menyiapkan struktur HTML untuk tombol Text-to-speech. Pastikan artikel tersebut memiliki markup yang jelas, seperti menggunakan tag <p>, <h1> sampai <h6> selain tag itu akan di abaikan, anda juga bisa menyesuaikannya pada javascript tambahkan tag yang diinginkan.
<!DOCTYPE html>
<!-- Created By gurudzgn.com -->
<html lang="en">
<head>
<title>Fitur Text-to-speech | gurudzgn.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button id="toggle-play">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
Putar
</button>
<div id="post-body">
<h2>Mengapa Kita Memerlukan Fitur Text-to-speech?</h2>
<p>Dalam dunia web development, ada berbagai cara untuk meningkatkan pengalaman pengguna. Salah satunya adalah dengan menyediakan fitur yang memungkinkan pengguna untuk mengakses dan membaca artikel secara lebih efisien.</p>
<h2>pengalaman Pengguna</h2>
<p>membuat fitur Text-to-speech yang dapat meningkatkan pengalaman pengguna pada situs web Anda.</p>
<p>Terimakasih sudah mengikuti tutorialnya!</p>
</div>
</body>
</html>2. Desain CSS
Gaya (CSS) akan membantu Anda mengatur tampilan dari fitur Text-to-speech yang akan Anda buat. Anda dapat mengatur tata letak, font, dan warna sesuai dengan kebutuhan dan desain situs web Anda, letakan kode css berikut di dalam tag <head>
<style>
#post-body {
width: 100%;
margin: 0 auto;
}
p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
.highlighttts {
display: inline;
}
.highlighttts:after{
content: "";
margin-right: -1.86px;
border-right: 2px solid #19aee8;
animation: kedip 1s linear infinite;
}
svg.icon {
width: 24px;
height: 24px;
margin-right: 8px;
fill: #19aee8;
}
#toggle-play{
position: relative;
display: flex;
align-items: center;
border-radius: 50px;
padding: 0 15px 0 10px;
border: 1px solid #19aee8;
color:#000;
background: #fff;
}
@keyframes kedip {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>3. Implementasi JavaScript
Ini adalah langkah penting dalam pembuatan fitur Text-to-speech. Anda perlu mengimplementasikan JavaScript untuk mengonversi teks artikel menjadi audio yang dapat diputar. Anda dapat menggunakan Web Speech API atau pihak ketiga library yang mendukung TTS agar lebih kompleks, letakan kode JavaScript berikut di atas tag body penutup </body> .
<script>
// Created By gurudzgn.com
const togglePlayButton = document.getElementById("toggle-play");
const textContainer = document.getElementById("post-body");
let isPlaying = false;
let currentParagraph = 0;
const paragraphs = textContainer.querySelectorAll("p,h1,h2,h3,h4,h5,h6");
let currentHighlightedSpan = null;
let currentWordIndex = 0;
togglePlayButton.addEventListener("click", function () {
if (!isPlaying) {
if (currentParagraph >= paragraphs.length) {
// Reset ke awal jika sudah selesai
currentParagraph = 0;
}
isPlaying = true;
togglePlayButton.innerHTML = `
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
</svg>
Jeda
`;
play();
} else {
isPlaying = false;
togglePlayButton.innerHTML = `
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
Putar
`;
speechSynthesis.cancel();
}
});
function play() {
if (currentParagraph < paragraphs.length) {
const paragraph = paragraphs[currentParagraph];
const text = paragraph.textContent;
speak(text);
} else {
isPlaying = false;
togglePlayButton.innerHTML = `
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
Putar
`;
}
}
function speak(text) {
const words = text.split(" ");
const rate = 1.0; // Atur kecepatan (contoh: 1.0 = 1x lebih cepat)
function speakWord() {
if (currentWordIndex < words.length) {
if (currentHighlightedSpan) {
unhighlightWord(currentHighlightedSpan);
}
const word = words[currentWordIndex];
highlightWord(paragraphs[currentParagraph], currentWordIndex);
const utterance = new SpeechSynthesisUtterance(word);
utterance.lang = "id-ID"; // Atur bahasa yang sesuai
utterance.rate = rate; // Atur kecepatan baca
speechSynthesis.speak(utterance);
utterance.onend = function () {
currentWordIndex++;
speakWord();
};
} else {
// Setelah selesai membaca kata-kata, lanjutkan ke kata berikutnya
currentWordIndex = 0;
currentParagraph++;
setTimeout(play, 500); // Jeda 500ms sebelum membaca paragraf berikutnya
}
}
speakWord();
}
function highlightWord(paragraph, wordIndex) {
const words = paragraph.textContent.split(" ");
words[wordIndex] = `<span class="highlighttts">${words[wordIndex]}</span>`;
paragraph.innerHTML = words.join(" ");
currentHighlightedSpan = paragraph.querySelector(".highlighttts");
}
function unhighlightWord(span) {
const text = span.textContent;
span.outerHTML = text;
}
</script>Pastikan artikel yang kita tulis berada dalam id post-body jika berbeda pastikan samakan id pada JavaScript diatas dengan id yang ada pada blog atau web anda.
Beberapa kelebihan:
- Tombol yang bisa play atau pause kapan saja.
- terdapat indikator baca yang di tandai blok warna.
Setelah fitur Text-to-speech telah diimplementasikan, penting untuk menguji dengan cermat. Pastikan bahwa teks diucapkan dengan benar dan bahwa pengguna dapat mengontrol pengaturan audio dengan mudah. Perbaiki masalah jika ditemukan.
Dengan mengikuti langkah-langkah di atas, Anda berhasil membuat fitur Text-to-speech yang dapat meningkatkan pengalaman pengguna pada situs web Anda. Pastikan untuk terus mengikuti perkembangan teknologi dan praktik terbaik dalam pengembangan web untuk memastikan bahwa fitur ini berfungsi dengan baik dan memberikan manfaat bagi pengguna Anda.
Trimakasih sudah berkunjung semoga bermanfaat terimakasih.
