Membuat Fitur Text-to-Speech untuk Membaca Artikel Otomatis
www.jejaknesia.com - Hi web developer, Kembali lagi bersama Jejaknesia. Pada kesempatan kali ini, kami akan membahas secara mendalam bagaimana cara membuat fitur Text-to-Speech untuk membaca artikel secara otomatis menggunakan kombinasi HTML, CSS, dan JavaScript.
Fitur ini akan sangat bermanfaat untuk meningkatkan aksesibilitas dan pengalaman pengguna pada situs web Anda. Dengan adanya kemampuan untuk mendengarkan konten, pengunjung dapat menikmati artikel Anda meskipun sedang sibuk atau memiliki keterbatasan penglihatan.
Mari kita selami langkah-langkah pembuatannya bersama!
Membuat Fitur Text-to-speech guna Membaca Artikel Otomatis
Dalam dunia pengembangan web yang terus berkembang, pengalaman pengguna (User Experience - UX) menjadi salah satu kunci utama keberhasilan sebuah situs web. Berbagai fitur inovatif terus dikembangkan untuk memastikan pengguna dapat berinteraksi dengan konten secara lebih efisien dan menyenangkan. Salah satu fitur yang dapat secara signifikan meningkatkan aksesibilitas dan kemudahan penggunaan adalah Text-to-Speech (TTS), atau sering juga disebut T2S.
Fitur TTS memungkinkan pengguna untuk mendengarkan artikel atau konten teks lainnya yang mereka baca. Hal ini tidak hanya bermanfaat bagi individu dengan keterbatasan penglihatan, tetapi juga bagi mereka yang ingin melakukan multitasking atau lebih nyaman menerima informasi secara audio.
Artikel ini akan memandu Anda langkah demi langkah dalam membangun fitur Text-to-Speech menggunakan teknologi web dasar: HTML, CSS, dan JavaScript. Dengan mengimplementasikan fitur ini, Anda dapat memberikan nilai tambah yang signifikan bagi pengunjung situs web Anda, membuat konten Anda lebih mudah diakses, dan pada akhirnya, meningkatkan SEO melalui peningkatan interaksi pengguna.
Mengapa Kita Memerlukan Fitur Text-to-speech?
Sebelum kami masuk ke dalam detail teknis, penting guna memahami mengapa fitur Text-to-speech penting dalam pengembangan web. Fitur pada artikel kali 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.
Dengan menggunakan Text-to-speech, pengguna dapat mengonversi teks artikel menjadi audio yang dapat didengarkan. Hal pada artikel kali 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 guna membaca artikel otomatis:
1. Struktur HTML
Pertama-tama, kami perlu menyiapkan struktur HTML guna 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 jejaknesia.com -->
<html lang="en">
<head>
<title>Fitur Text-to-speech | jejaknesia.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, pada artikel kali 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 guna meningkatkan pengalaman pengguna. Salah satunya adalah dengan menyediakan fitur yang memungkinkan pengguna guna 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>
#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 infpada artikel kali inite;
}
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;
}
}
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 supaya lebih kompleks, letakan kode JavaScript berikut di atas tag body penutup </body> .
// Created By jejaknesia.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;
}Pastikan artikel yang anda 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.
Diharapkan 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 pada artikel kali ini berfungsi dengan baik dan memberikan manfaat bagi pengguna Anda.
Trimakasih sudah berkunjung semoga bermanfaat terimakasih.
Posting Komentar