Membuat Aplikasi Penghitung Dzikir Menggunakan Web Speech API ( menghitung menggunakan ucapan )

APA YANG AKAN KITA BUAT Kita akan mencoba membuat aplikasi menghitung dzikir dengan menggunakan ucapan, awal pembuatan aplikasi ini saya ter inspirasi dari tutorial pembuatan terminal bot sekolah koding, di tutorial itu kita membuat program untuk menampilkan sesuatu sesuai perintah-perintah yang telah kita ajarkan.., nah saya sempet berfikir gimana kalo terminal bot nya itu dibuat sesuai dengan perintah-perintah yang kita ucapkan?? terfikir keren seperti JARVIS, "engine on", "nyalakan motor" hehehe.. nah pas mau nyoba buat.. malah bingung coba coba buat apa yaaah?? nah dan ga sengaja lagi liat lliat showcase app app mobile, lupa lagi dapet liat dari image atau url nya, dimana saya nemuin aplikasi dzikir, di aplikasi itu menghitung dhikr nya dengan cara touch screen atau click button nah akhir nya muncul keinginan untuk nyoba buat sendiri aplikasi dzikir ini tapi menghitungnya dengan menggunakan ucapan, yahh langsung ajaa...

SIMULASI APLIKASI

APA SIH YANG DIBUTUHIN UNTUK BUAT APLIKASI INI? - HTML - CSS - Javascript - NodeJs ( npm ) [ optional ] - Web Speech API (only chrome)

Note : untuk npm sebenernya opsional, saya menggunakan npm untuk install css framework ' Milligram : A minimalist CSS framework '

PEMBUATAN APLIKASI # STEP 1 Karena dalam pembuatan aplikasi ini saya menggunakan css framework miligram, maka kita install dulu miligramnya lewat cmd pada windows atau terminal pada linux/mac, ketik perintah..

$ npm install milligram

# STEP 2 Setelah miligram ter install, kita buat project dengan menggunakan perintah miligram, nah sebelumnya masuk dulu ke directory project nya, misal saya ingin buat project di directory 'document' makaa..

// masuk ke direktori document
$ cd document
// buat project dengan menggunakan miligram ' miligram init namaproject '
$ milligram init dhikr_counter
// masuk ke direktori project dzikir counter
$ cd dhikr_counter

# STEP 3 Setelah terinstall kita buka project ' dhikr_counter ' dengan text-editor nahh.. disini kita hanya akan focus di folder ' src ', karena content aplikasi yang akan kita buat semua di simpan disini.. langsung aja.. kita buat atau mengubah file index.html yang ada di folder ' src/index.html '

untuk script index.htmlnya buat seperti ini

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="Gunali Rezqi Mauludi">
	<meta name="description" content="This is an application to counting dhikr using speech.">
	<title>Dhikr Counter.</title>
	<link rel="icon" href="images/favicon.ico">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
	<link rel="stylesheet" href="lib/normalize.css/normalize.css">
	<link rel="stylesheet" href="lib/milligram/dist/milligram.min.css">
	<link rel="stylesheet" href="styles/main.css">
</head>

<body>

	<main class="wrapper">
		<section class="container">
			<div class="container">
				<div id="main">
					<h4><img src="images/logo.png" alt=""></h4>
					<button class="button-white button-outline" onclick="startDictation(event)">Mulai Dhikr</button>
				</div>
				<div id="content">
					<h1>Lafazhkan</h1>
					<h3>untuk mulai menghitung..</h3>
					<table>
						<tr>
							<td>
								<button class="button-white button-outline button-large counter">0</button>
							</td>
							<td style="width:100%">
								<p>Dari 33</p>
								<p><em id="dictation"></em></p>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</section>
	</main>

	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="scripts/main.js"></script>
</body>

</html>

selanjutnya kita buat atau ubah file main.css , css di folder src/styles/main.css

body {
    background-color: #ff1744;
    color: white;
}

td p {
    margin-top: 0;
    margin-bottom: 0;
}

.container {
    max-width: 80.0rem;
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;
}

.button-white {
  background-color: white;
  border-color: white;
	color: white;
}

.button-white.button-clear,
.button-white.button-outline {
  background-color: transparent;
  color: white;
}

.button-white.button-clear {
  border-color: transparent;
}

.button-large {
    font-size: 1.4rem;
    height: 4.5rem;
    line-height: 4.5rem;
    padding: 0 2rem;
}

dan selanjutnya lagiii, kita akan buat atau ubah file main.js nya, yang ada di folder src/scripts/main.js

'use strict';

console.info('Yeah!! dhikr counter app.');

// Set default counter
var count = 0;

// Toogle to show main segment
toogleSegment('main');

// Test browser support
if ('webkitSpeechRecognition' in window) {

    // This will invite the user to allow a page access to their microphone.
    // the only browser that supports this API is Chrome
    // creating a speech recognition object
    var recognition = new webkitSpeechRecognition();

    // Sets the type of the recognition (one-shot or continuous).
    // If its value is set to true we have a continuous recognition,
    // otherwise the process ends as soon as the user stops talking.
    // Recogniser doesn't stop listening even if the user pauses
    recognition.continuous = false;

    // Specifies if we want interim results.
    // If its value is set to true we’ll have access to interim results that we can show to the users to provide feedback.
    // If the value is false, we’ll obtain the results only after the recognition ends. By default it’s set to false.
    recognition.interimResults = false;

    // Sets a callback that is fired when a speech recognition error occurs. Listen for errors
    recognition.onerror = function(event) {
        console.log(event.error);
    };

    // Sets a callback that is fired when the service has disconnected.
    recognition.onend = function() {
        recognition.start();
    };

    // Sets a callback that is fired when the speech recognizer returns a result.
    recognition.onresult = function(event) {
        console.log(event.results[0][0].transcript);
        if (event.results[0][0].transcript == 'Subhanallah') {
            countDictation('Subhanallah', 'Alhamdulillah');

            // Change background color
            $('body').css('background-color', '#9B4DCA');
        } else if (event.results[0][0].transcript == 'Alhamdulillah') {
            countDictation('Alhamdulillah', 'Allahu Akbar');

            // Change background color
            $('body').css('background-color', '#FF6D00');
        } else if (event.results[0][0].transcript == 'Allahu Akbar') {
            countDictation('Allahu Akbar', 'Alhamdulillah');

            // Change background color
            $('body').css('background-color', '#304FFE');
        }
    };
}

function startDictation(event) {

    // Toogle to show content segment
    toogleSegment('content');

    // Set default dictation text
    $('#dictation').text('( Subhanallah )');

    // setting the language that the speaker is using
    recognition.lang = 'id';

    // Start talking and when you stop the onresult
    recognition.start();
}

// Toogle to show content segment
function countDictation(dictation, nextDictation) {
    // console.log('dictation : ' + dictation + ', next dictation : ' + nextDictation);
    count = count + 1;

    // Set dictation text
    $('#dictation').text('( ' + dictation + ' )');
    if (count > 33) {

        // Change dictation text
        $('#dictation').text('( ' + nextDictation + ' )');

        // Reset counting
        count = 0;
    }

    // Set value counting
    $('.counter').html(count);
}

// Toogle segment
function toogleSegment(div) {
    if (div == 'main') {
        $('#main').show();
        $('#content').hide();
    } else if (div == 'content') {
        $('#main').hide();
        $('#content').show();
    }
}

SELESAI!!, JALANIN APLIKASINYA ? Silahkan masuk ke directory project dhikr_counter nya dan ketik perintah ini pada cmd atau terminal :

$ npm start

nanti akan muncul browser otomatis.. belum sempat di coba di browser lain.. tapi dari baca" sih supportnya di chrome.. dan saya coba pun di chrome, nah untuk mulainya.. tampilan awalnya seperti ini.. , jika ingin memulainya klik saja button ' mulai dhikr '

lalu akan muncul perintah untuk mengucapkan atau me-lafazhkan, sperti pada gambar ini..

terkadang ucapan yang diterima oleh browser tidak sesuai atau aga lambat dalam meresponnya :)

nahh.. selesai deh..

emm... bagi saya sendiri, berharap, mungkin ini awal dan nantinya bisa membuat sesuatu yang dapat di perintah oleh sendiri seperti jarvis hehe.. untuk penjelasan lebih lanjutnya dan mungkin convert ke android app hybrid nya menyusul, jika ada pertanyaan.. silahkan...

mohon maaf jika ada salah kata & semoga aplikasi ini bermanfaat.. :)

referensi link : miligram : <a href='http://milligram.github.io/#getting-started'>http://milligram.github.io/#getting-started</a> intro web speech api : <a href='https://www.sitepoint.com/introducing-web-speech-api/'>https://www.sitepoint.com/introducing-web-speech-api/</a>

avatar gunalirezqimauludi
@gunalirezqimauludi

350 Kontribusi 243 Poin

Dipost 7 tahun yang lalu

3 Jawaban:

Subhanallah, keren. Coba praktekkan deh

avatar jamilr
@jamilr

8 Kontribusi 7 Poin

Dipost 7 tahun yang lalu

klo tanpa milligram gimana ya

avatar mamet
@mamet

2 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

saya coba file main.js tidak ada ya..? folder script juga gada

avatar mamet
@mamet

2 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban