Javascript Suara Ke Text
Berbagi Javascript suara ke tulisan
https://www.saepul.biz.id
Membuat script JavaScript yang mengonversi suara ke tulisan.
Membuat script JavaScript yang mengonversi Suara ke text/tulisan adalah cara praktis untuk menambahkan dimensi baru ke konten tulisan pada website Anda.
Dengan menggunakan javascript kita dapat mengubah teks menjadi suara dan sebaliknya, yaitu suara ke teks yang dapat didengar pengguna, dan pengguna juga dapat merekam suara nya dan akan di konversi jadi teks
Pertama, Anda akan membutuhkan kode javascript nya, nah sekarang kode javascript bisa di copy di bawah ini dan simpan js nya di hosting javascript kepercayaan anda:
try {
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
var recognition = new SpeechRecognition();
}
catch(e) {
console.error(e);
$('.no-browser-support').show();
$('.app').hide();
}
var noteTextarea = $('#note-textarea');
var instructions = $('#recording-instructions');
var notesList = $('ul#notes');
var noteContent = '';
// Dapatkan semua catatan dari sesi sebelumnya dan tampilkan.
var notes = getAllNotes();
renderNotes(notes);
/*-----------------------------
Pengenalan suara
------------------------------*/
// Jika salah, rekaman akan berhenti setelah beberapa detik hening.
// Jika benar, periode hening lebih lama (sekitar 15 detik),
// memungkinkan kami untuk terus merekam bahkan ketika pengguna berhenti sejenak.
recognition.continuous = true;
// Blok ini dipanggil setiap kali Speech APi menangkap sebuah baris.
recognition.onresult = function(event) {
// acara adalah objek SpeechRecognitionEvent.
// Ini menampung semua garis yang telah kita tangkap sejauh ini.
// Kita hanya membutuhkan yang sekarang.
var current = event.resultIndex;
// Dapatkan transkrip dari apa yang dikatakan.
var transcript = event.results[current][0].transcript;
// Tambahkan transkrip terkini ke isi Catatan kita.
// Ada bug aneh di ponsel, dimana semuanya terulang dua kali.
// Sejauh ini belum ada solusi resmi sehingga kami harus menangani sebuah
var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);
if(!mobileRepeatBug) {
noteContent += transcript;
noteTextarea.val(noteContent);
}
};
recognition.onstart = function() {
instructions.text('Pengenalan suara diaktifkan. Cobalah berbicara ke mikrofon.');
}
recognition.onspeechend = function() {
instructions.text('Anda terdiam beberapa saat sehingga pengenalan suara mati dengan sendirinya.');
}
recognition.onerror = function(event) {
if(event.error == 'no-speech') {
instructions.text('Tidak ada ucapan yang terdeteksi. Coba lagi.');
};
}
/*-----------------------------
Tombol dan masukan aplikasi
------------------------------*/
$('#start-record-btn').on('click', function(e) {
if (noteContent.length) {
noteContent += ' ';
}
recognition.start();
});
$('#pause-record-btn').on('click', function(e) {
recognition.stop();
instructions.text('Pengenalan suara dijeda.');
});
// Sinkronkan teks di dalam area teks dengan variabel noteContent.
noteTextarea.on('input', function() {
noteContent = $(this).val();
})
$('#save-note-btn').on('click', function(e) {
recognition.stop();
if(!noteContent.length) {
instructions.text('Tidak dapat menyimpan catatan kosong. Silakan tambahkan pesan ke catatan Anda.');
}
else {
// Simpan catatan ke Penyimpanan lokal.
// Kuncinya adalah tanggalWaktu dengan detik, nilainya adalah isi catatan.
saveNote(new Date().toLocaleString(), noteContent);
// Reset variabel dan perbarui UI.
noteContent = '';
renderNotes(getAllNotes());
noteTextarea.val('');
instructions.text('Catatan berhasil disimpan.');
}
})
notesList.on('click', function(e) {
e.preventDefault();
var target = $(e.target);
// Dengarkan nada yang dipilih.
if(target.hasClass('listen-note')) {
var content = target.closest('.note').find('.content').text();
readOutLoud(content);
}
// Hapus catatan.
if(target.hasClass('delete-note')) {
var dateTime = target.siblings('.date').text();
deleteNote(dateTime);
target.closest('.note').remove();
}
});
/*-----------------------------
Sintesis Ucapan
------------------------------*/
function readOutLoud(message) {
var speech = new SpeechSynthesisUtterance();
// Mengatur atribut teks dan suara.
speech.text = message;
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
/*-----------------------------
Fungsi Pembantu
------------------------------*/
function renderNotes(notes) {
var html = '';
if(notes.length) {
notes.forEach(function(note) {
html+= `<li class="note">
<p class="header">
<span class="date">${note.date}</span>
<a href="#" class="listen-note" title="Listen to Note">Dengarkan Catatan</a>
<a href="#" class="delete-note" title="Delete">Menghapus</a>
</p>
<p class="content">${note.content}</p>
</li>`;
});
}
else {
html = '<li><p class="content">Anda belum memiliki catatan apa pun.</p></li>';
}
notesList.html(html);
}
function saveNote(dateTime, content) {
localStorage.setItem('note-' + dateTime, content);
}
function getAllNotes() {
var notes = [];
var key;
for (var i = 0; i < localStorage.length; i++) {
key = localStorage.key(i);
if(key.substring(0,5) == 'note-') {
notes.push({
date: key.replace('note-',''),
content: localStorage.getItem(localStorage.key(i))
});
}
}
return notes;
}
function deleteNote(dateTime) {
localStorage.removeItem('note-' + dateTime);
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Aplikasi Catatan yang Dikendalikan Suara</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta16/shoelace.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Aplikasi Catatan yang Dikendalikan Suara</h1>
<p class="page-description">Sebuah aplikasi kecil yang memungkinkan Anda membuat catatan dengan merekam suara Anda</p>
<h3 class="no-browser-support">Maaf, Browser Anda Tidak Mendukung Web Speech API. Coba Buka laman Ini Di Google Chrome.</h3>
<div class="app">
<h3>Tambahkan Catatan Baru</h3>
<div class="input-single">
<textarea id="note-textarea" placeholder="Buat catatan baru dengan mengetik atau menggunakan pengenalan suara." rows="6"></textarea>
</div>
<button id="start-record-btn" title="Start Recording">Mulai Perekaman</button>
<button id="pause-record-btn" title="Pause Recording">Jeda Perekaman</button>
<button id="save-note-btn" title="Save Note">Simpan Catatan</button>
<p id="recording-instructions">tekan <strong>Mulai merekam</strong> tombol dan izinkan akses.</p>
<h3>Catatan Saya</h3>
<ul id="notes">
<li>
<p class="no-notes">Anda tidak memiliki catatan apa pun.</p>
</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://localhost:2435/storage/emulated/0/Download/4K+Video+Downloader/kerangka-dasar-xtgem/script.js"></script>
</body>
</html>
Lupa Untuk CSS nya jika di perlukan silahkan di pake juga:
ul {
list-style: none;
padding: 0;
}
p {
color: #444;
}
button:focus {
outline: 0;
}
.container {
max-width: 700px;
margin: 0 auto;
padding: 100px 50px;
text-align: center;
}
.container h1 {
margin-bottom: 20px;
}
.page-description {
font-size: 1.1rem;
margin: 0 auto;
}
.tz-link {
font-size: 1em;
color: #1da7da;
text-decoration: none;
}
.no-browser-support {
display: none;
font-size: 1.2rem;
color: #e64427;
margin-top: 35px;
}
.app {
margin: 40px auto;
}
#note-textarea {
margin: 20px 0;
}
#recording-instructions {
margin: 15px auto 60px;
}
#notes {
padding-top: 20px;
}
.note .header {
font-size: 0.9em;
color: #888;
margin-bottom: 10px;
}
.note .delete-note,
.note .listen-note {
text-decoration: none;
margin-left: 15px;
}
.note .content {
margin-bottom: 40px;
}
@media (max-width: 768px) {
.container {
padding: 50px 25px;
}
button {
margin-bottom: 10px;
}
}
/* -- Demo ads -- */
@media (max-width: 1200px) {
#bsaHolder{ display:none;}
}
Demo nya lupa pula jika mau liat silahkan cari di blog ini aja saya lupa link nya 🤦🏽🤣
Posting Komentar untuk "Javascript Suara Ke Text"