Konverter Teks ke Ucapan | Cara Membuat Text to Speech Converter

Hai semuanya, di video kali ini saya akan memberi tahu kalian semua tentang cara membuat Text to Speech Converter dengan mudah hanya dalam beberapa menit menggunakan HTML, CSS, dan JavaScript.

Konverter Teks ke Ucapan | Cara Membuat Text to Speech Converter

Text To Speech adalah salah satu jenis teknologi yang mengaktifkan teks Anda ke suara ucapan.

Di sini, Anda dapat dengan mudah mengonversi teks menjadi ucapan dan Anda juga dapat menjeda dan melanjutkan suara ucapan hanya dengan mengklik tombol dan ini hanya akan terlihat jika Anda memasukkan lebih dari 80 karakter di kotak teks dan Anda dapat mengubahnya dari kode berdasarkan kebutuhan bisnis Anda.

Terutama, kami tidak menggunakan tautan eksternal atau API apa pun untuk mengubah fungsionalitas teks menjadi ucapan dan di sini kami hanya menggunakan HTML, CSS, dan JavaScript Vanila.

Bagikan blog ini kepada orang-orang yang mengerjakan JavaScript dan AI dan tanpa terlambat kita akan melihat proses langkah demi langkah cara membuat konverter teks ke ucapan.

Langkah-langkah Membuat Text to Speech Converter

Di bawah ini adalah langkah-langkah mendetail untuk membuat alat konverter teks ke ucapan:

Buka Editor Kode

Pertama-tama, Anda harus membuka editor kode apa pun dan di sini saya menggunakan kode VS untuk memodifikasi kode.

Membuat File

Setelah Anda membuka salah satu editor kode, di sini Anda harus membuat folder baru dengan nama apapun, di bawah itu Anda harus membuat beberapa file seperti yang disebutkan di bawah ini.

Buat file index.html dan ekstensi file harus dalam format .html saja.

Buat file style.css dan ekstensi file harus dalam format .css saja.

Buat file script.js dan ekstensi file harus dalam format file .js saja.

Anda mungkin juga menyukai...

Cara membuat Ekstensi Chrome di HTML, CSS, dan JavaScript

Cara Membuat Formulir Kontak dengan PHP | Formulir Kontak Email PHP

Cara Membuat Jam Alarm Sederhana dalam HTML, CSS, dan JavaScript

Sekali, Anda membuat semua file yang dialamatkan di atas dalam editor kode Anda, maka Anda harus menambahkan kode di dalam file dan mengikuti langkah-langkah yang disediakan di bawah ini untuk menambahkan kode ke file yang ditentukan.

Menambahkan Kode HTML

Salin kode HTML yang disediakan di bawah dan tempel kode HTML yang disalin di dalam file index.html.

Setelah menambahkan kode, jangan lupa untuk menyimpan file tersebut.

<html>

<head>

<title>Text to Speech Converter</title>

</head>

<body>

<header>Text to Speech Converter</header>

<button>Convert to Speech</button>

</div>

</body>

</html>

Menambahkan Kode CSS

Salin kode CSS yang disediakan di bawah dan tempel kode CSS yang disalin di dalam file style.css.

Setelah menambahkan kode, jangan lupa untuk menyimpan file tersebut.

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Poppins", sans-serif;

}

body {

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: grey;

}

.container {

position: relative;

max-width: 350px;

width: 100%;

background: #87a5f8;

border-radius: 12px;

padding: 20px;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

}

header {

font-size: 18px;

color: #333;

font-weight: 500;

text-align: center;

}

textarea {

width: 100%;

height: 180px;

border-radius: 8px;

margin: 20px 0;

padding: 10px 15px;

resize: none;

outline: none;

border: 1px solid #aaa;

}

button {

width: 100%;

padding: 14px 0;

border: none;

border-radius: 8px;

color: #fff;

background: #6e93f7;

cursor: pointer;

transition: all 0.3s ease;

}

button:hover {

background: #4070f4;

}

Menambahkan Kode JavaScript

Salin kode JavaScript yang disediakan di bawah ini dan tempel kode JavaScript yang disalin di dalam file script.js.

Setelah menambahkan kode, jangan lupa untuk menyimpan file tersebut.

const textarea = document.querySelector("textarea");

const button = document.querySelector("button");

let isSpeaking = true;

const textToSpeech = () => {

const synth = window.speechSynthesis;

const text = textarea.value;

if (!synth.speaking && text) {

const utternace = new SpeechSynthesisUtterance(text);

synth.speak(utternace);

}

if (text.length > 50) {

if (synth.speaking && isSpeaking) {

button.innerText = "Pause";

synth.resume();

isSpeaking = false;

} else {

button.innerText = "Resume";

synth.pause();

isSpeaking = true;

}

} else {

isSpeaking = false;

button.innerText = "Speaking";

}

setInterval(() => {

if (!synth.speaking && !isSpeaking) {

isSpeaking = true;

button.innerText = "Convert to Speech";

}

});

};

button.addEventListener("click", textToSpeech);

Anda dapat memodifikasi kode yang disediakan di atas, berdasarkan kebutuhan Anda dan untuk mengubah warna dan gaya, Anda dapat memodifikasi CSS dan untuk mengubah suara, Anda harus memodifikasi JavaScript sesuai kebutuhan bisnis Anda.

Kesimpulan

Saya harap Anda semua telah memahami cara membuat alat konverter teks ke ucapan dengan mudah dengan menggunakan HTML, CSS, dan JavaScript.

Jika Anda mendapatkan kesalahan atau masalah dengan kode tersebut, harap hubungi kami melalui halaman kontak kami atau kirimkan email kepada kami.