Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Function untuk play audio
Mohon bantuannya, saya menuliskan script function pada program antrian saya yang menggunakan bahasa pemrograman php, dalam program tersebut terdapat function untuk memainkan audio yang dijalankan pada saat menekan tombol tertentu.
Permasalahan saya adalah ketika ada 2 loket yang menekan tombol secara bersamaan maka audio tersebut akan dimainkan bersamaan pula sehingga menimbulkan kerancuan suara.
Apakah ada yang dapat membantu saya supaya saat 2 loket menekan tombol secara bersamaan maka hanya 1 audio yang akan dimainkan terlebih dahulu lalu audio berikutnya akan dimainkan setelah audio pertama selesai
6 Jawaban:
kasih delay saja gan, antara audio pertama dengan berikutnya
terimakasih @dianarifr apakah dapat dijelaskan delay seperti apa yang dimaksud? karena delay yang saya pikirkan sepertinya tidak akan menyelesaikan persoalan, karena setiap tombol ditekan tidak memberikan kepastian waktu, loket yang diperlukan pun tidak hanya 2 tetapi lebih dari itu.
mungkin dapat saya terangkan lebih mengenai program yang saya kerjakan.
terdapat sekitar 5 loket yang akan saya butuhkan, setiap loket memiliki script yang sama namun yang membedakan adalah variabel loketnya dimana saat tombol ditekan pada loket tertentu maka memainkan audio berupa "Nomor antrian 1 ke loket N" N adalah variabel loket tersebut yang berbeda antara loket satu dengan loket lainnya. tentu saja nomor pada nomor antrianpun akan bertambah setelahnya.
saat beberapa loket menekan tombol secara bersamaan atau hampir bersamaan makan audio akan dimainakn dengan tumpang tindih antara audio loket satu dengan loket lainnya.
saya sedang moemikirkan cara bagaimana ketika loket satu menekan tombol dan loket dua juga menekan tombol secara bersamaan makan audio loket dua akan dimainkan setelah audio loket satu selesai dimainkan
mesti dibikin 1 function buat ngatur audio yang dijalankan. ga bisa kalo masing2 loket play sendiri tanpa ada function yang mengatur. jadi nantinya tiap loket memanggil fungsi yang sama dengan parameter nama loketnya dan nomor antriannya.
nah di fungsi utama yang mengatur, bisa pakai array untuk simpan antrian dari tiap loket yang nantinya dipanggil satu persatu sampai antrian di array tersebut kosong lagi
kalo disimulasikan dengan timeout kira2 seperti ini
<pre> // fungsi utama function LocketAudio() { this.queue = []; // array untuk simpan antrian
this.playAudio = function(locket_num, queue_num) { let self = this; self.queue.push({ locket_num: locket_num, queue_num: queue_num }); // antrian di push ke array if (self.queue.length === 1) { self._call(); } }
this._call = function() { let self = this; // disini dicek apakah antrian di array masih ada if (self.queue.length) { setTimeout(() => { console.log('Nomor antrian ' + self.queue[0].queue_num + ' ke loket ' + self.queue[0].locket_num, new Date().toTimeString()); // panggil antrian index 0 alias yang pertama self.queue.shift(); // setelah dipanggil, index 0 diremove self._call(); // recursive / pengulangan }, Math.floor(Math.random() * 3000) + 1000); // random timeout antara 1 - 3 detik } }
}
// pengujian var main = new LocketAudio(); // pemanggilan 3x bersamaan (grup pertama) main.playAudio('A', 1); main.playAudio('B', 2); main.playAudio('C', 3); // pemanggilan 3x bersamaan setelah 10 detik (grup kedua) setTimeout(() => { main.playAudio('B', 4); main.playAudio('A', 5); main.playAudio('C', 6); }, 10000);
// output // Nomor antrian 1 ke loket A 16:32:35 GMT+0700 (Western Indonesia Time) -> panggilan pertama grup pertama // Nomor antrian 2 ke loket B 16:32:36 GMT+0700 (Western Indonesia Time) -> jeda 1 detik // Nomor antrian 3 ke loket C 16:32:38 GMT+0700 (Western Indonesia Time) -> jeda 2 detik // Nomor antrian 4 ke loket B 16:32:45 GMT+0700 (Western Indonesia Time) -> panggilan pertama grup kedua // Nomor antrian 5 ke loket A 16:32:48 GMT+0700 (Western Indonesia Time) -> jeda 3 detik // Nomor antrian 6 ke loket C 16:32:49 GMT+0700 (Western Indonesia Time) -> jeda 1 detik </pre>
Terimakasih @rachmatsasongko untuk jawaban yang sangat membantu saya, namun saya masih belum berhasil menerapkan cara anda pada aplikasi saya. Kode yang saya tulis adalah berikut
<pre> <html>
<script type="text/javascript" > $(document).ready(function(){ $("#play").click(function(){ document.getElementById('suarabel').play(); }); }); </script>
<form name="form1" method="post" action=""> <label> <b><a name="play" class="tombol" onClick="mulai();">PANGGIL</a></b> <c hidden><a class="tombol2";>Sedang Memanggil..</a></c> </label> </form>
<!-- Suara -->
<script type="text/javascript">
function mulai(){
$("b").hide();
$("c").show();
//MAINKAN SUARA BEL PADA SAAT AWAL document.getElementById('suarabel').pause(); document.getElementById('suarabel').currentTime=0; document.getElementById('suarabel').play();
//SET DELAY UNTUK MEMAINKAN REKAMAN NOMOR URUT
totalwaktu=document.getElementById('suarabel').duration*1000;
//MAINKAN SUARA NOMOR URUT
setTimeout(function() {
document.getElementById('suarabelnomorurut').pause();
document.getElementById('suarabelnomorurut').currentTime=0;
document.getElementById('suarabelnomorurut').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php //JIKA KURANG DARI 10 MAKA MAIKAN SUARA ANGKA1 if($antrian<10){ ?>
setTimeout(function() { document.getElementById('suarabel0').pause(); document.getElementById('suarabel0').currentTime=0; document.getElementById('suarabel0').play(); }, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian ==10){
//JIKA 10 MAKA MAIKAN SUARA SEPULUH
?>
setTimeout(function() {
document.getElementById('sepuluh').pause();
document.getElementById('sepuluh').currentTime=0;
document.getElementById('sepuluh').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian ==11){
//JIKA 11 MAKA MAIKAN SUARA SEBELAS
?>
setTimeout(function() {
document.getElementById('sebelas').pause();
document.getElementById('sebelas').currentTime=0;
document.getElementById('sebelas').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian < 20){
//JIKA 12-20 MAKA MAIKAN SUARA ANGKA2+"BELAS"
?>
setTimeout(function() {
document.getElementById('suarabel1').pause();
document.getElementById('suarabel1').currentTime=0;
document.getElementById('suarabel1').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('belas').pause();
document.getElementById('belas').currentTime=0;
document.getElementById('belas').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian < 100){
//JIKA PULUHAN MAKA MAINKAN SUARA ANGKA1+PULUH+AKNGKA2
?>
setTimeout(function() {
document.getElementById('suarabel0').pause();
document.getElementById('suarabel0').currentTime=0;
document.getElementById('suarabel0').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('puluh').pause();
document.getElementById('puluh').currentTime=0;
document.getElementById('puluh').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('suarabel1').pause();
document.getElementById('suarabel1').currentTime=0;
document.getElementById('suarabel1').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian == 100){
//JIKA PULUHAN MAKA MAINKAN SUARA ANGKA1+PULUH+AKNGKA2
?>
setTimeout(function() {
document.getElementById('seratus').pause();
document.getElementById('seratus').currentTime=0;
document.getElementById('seratus').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian < 110){
//JIKA PULUHAN MAKA MAINKAN SUARA ANGKA1+PULUH+AKNGKA2
?>
setTimeout(function() {
document.getElementById('seratus').pause();
document.getElementById('seratus').currentTime=0;
document.getElementById('seratus').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('suarabel2').pause();
document.getElementById('suarabel2').currentTime=0;
document.getElementById('suarabel2').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian == 110){
//JIKA PULUHAN MAKA MAINKAN SUARA ANGKA1+PULUH+AKNGKA2
?>
setTimeout(function() {
document.getElementById('seratus').pause();
document.getElementById('seratus').currentTime=0;
document.getElementById('seratus').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('sepuluh').pause();
document.getElementById('sepuluh').currentTime=0;
document.getElementById('sepuluh').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian == 111){
//JIKA PULUHAN MAKA MAINKAN SUARA ANGKA1+PULUH+AKNGKA2
?>
setTimeout(function() {
document.getElementById('seratus').pause();
document.getElementById('seratus').currentTime=0;
document.getElementById('seratus').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('sebelas').pause();
document.getElementById('sebelas').currentTime=0;
document.getElementById('sebelas').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian < 120){
//JIKA PULUHAN MAKA MAINKAN SUARA ANGKA1+PULUH+AKNGKA2
?>
setTimeout(function() {
document.getElementById('seratus').pause();
document.getElementById('seratus').currentTime=0;
document.getElementById('seratus').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('suarabel2').pause();
document.getElementById('suarabel2').currentTime=0;
document.getElementById('suarabel2').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('belas').pause();
document.getElementById('belas').currentTime=0;
document.getElementById('belas').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}elseif($antrian < 200){
//JIKA PULUHAN MAKA MAINKAN SUARA ANGKA1+PULUH+AKNGKA2
?>
setTimeout(function() {
document.getElementById('seratus').pause();
document.getElementById('seratus').currentTime=0;
document.getElementById('seratus').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('suarabel1').pause();
document.getElementById('suarabel1').currentTime=0;
document.getElementById('suarabel1').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('puluh').pause();
document.getElementById('puluh').currentTime=0;
document.getElementById('puluh').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
setTimeout(function() {
document.getElementById('suarabel2').pause();
document.getElementById('suarabel2').currentTime=0;
document.getElementById('suarabel2').play();
}, totalwaktu);
totalwaktu=totalwaktu+1000;
<?php
}else{
//JIKA LEBIH DARI 200
//Karena aplikasi ini masih sederhana maka logika konversi hanya sampai 100
//Selebihnya akan langsung disebutkan angkanya saja
//tanpa kata "RATUS", "PULUH", maupun "BELAS"
?>
<?php for($antrian=0;$antrian<$panjang;$antrian++){ ?>
totalwaktu=totalwaktu+1000; setTimeout(function() { document.getElementById('suarabelloket<?php echo $antrian; ?>').pause(); document.getElementById('suarabelloket<?php echo $antrian; ?>').currentTime=0; document.getElementById('suarabelloket<?php echo $antrian; ?>').play(); }, totalwaktu); <?php } } ?>
totalwaktu=totalwaktu+1000; setTimeout(function() { document.getElementById('loket').pause(); document.getElementById('loket').currentTime=0; document.getElementById('loket').play(); }, totalwaktu);
totalwaktu=totalwaktu+1000; setTimeout(function() { $("b").show(); $("c").hide();
document.getElementById('suarabelloket&lt;?php echo $loket; ?&gt;').pause();
document.getElementById('suarabelloket&lt;?php echo $loket; ?&gt;').currentTime=0;
document.getElementById('suarabelloket&lt;?php echo $loket; ?&gt;').play();
}, totalwaktu);
} </script>
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.11.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
&lt;script src="../js/vendor/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="../js/plugins.js"&gt;&lt;/script&gt;
&lt;script src="../js/main.js"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 0;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
&lt;/script&gt;
</html> </pre>
wah agak bingung juga ngikutin script panjang begitu.
ini saya bikin contoh pake real audio, mungkin bisa jadi inspirasi <a href='https://codepen.io/rachmatsasongko/pen/WKYYPa'>https://codepen.io/rachmatsasongko/pen/WKYYPa</a>