add semakin imut

costumer_service/assets/js/textToSpeech.js

@@ -0,0 +1,222 @@
+const speech = new SpeechSynthesisUtterance();
+
+speech.lang = "en";
+
+let voices = [];
+let myAudio1 = document.getElementById('myAudio1')
+let myAudio2 = document.getElementById('myAudio2')
+let myAudio3 = document.getElementById('myAudio3')
+let myAudio4 = document.getElementById('myAudio4')
+let myAudio5 = document.getElementById('myAudio5')
+let myAudio6 = document.getElementById('myAudio6')
+let counts	 =0;
+
+
+window.speechSynthesis.onvoiceschanged = () => {
+  voices = window.speechSynthesis.getVoices();
+  speech.voice = voices[3];
+  let voiceSelect = document.querySelector("#voices");
+  voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
+};
+
+document.querySelector("#rate").addEventListener("input", () => {
+  const rate = document.querySelector("#rate").value;
+  speech.rate = rate;
+  document.querySelector("#rate-label").innerHTML = rate;
+});
+
+document.querySelector("#volume").addEventListener("input", () => {
+  const volume = document.querySelector("#volume").value;
+  speech.volume = volume;
+  document.querySelector("#volume-label").innerHTML = volume;
+});
+
+
+
+document.querySelector("#voices").addEventListener("change", () => {
+  speech.voice = voices[document.querySelector("#voices").value];
+});
+
+$(document).ready(function(){
+ $('#start').click(function(){
+
+       
+});
+    });
+  // set time out 2 sec
+     setTimeout(function(){
+        $('#start').trigger('click');
+    }, 2000);
+
+
+
+
+
+function announce(){
+
+    let table=document.getElementById('datatable')
+    var tx=table.rows[1].cells[1].innerText+',' + table.rows[1].cells[2].innerText.toLowerCase() +'...diharap menuju ke'+table.rows[1].cells[4].innerText; 
+
+
+
+
+
+
+
+  speech.text = tx;
+
+  speech.pitch = 1.4;
+  speech.rate = 0.7;
+
+  
+  myAudio1.volume=0.1;
+  myAudio2.volume=0.7;
+  myAudio3.volume=0.3;
+  myAudio4.volume=0.7;
+  myAudio5.volume=0.1;
+
+
+  
+  myAudio1.play();
+  // intro music
+  if( myAudio1.addEventListener('ended',()=>{myAudio2.play();}));  
+  // begining 
+  if(myAudio2.addEventListener('ended',()=>{window.speechSynthesis.speak(speech);}) );
+  
+  // closing
+  if( speech.addEventListener('end',()=>{window.speechSynthesis.cancel();myAudio4.play();}));
+ 
+
+  if(myAudio4.addEventListener('ended',()=>{ myAudio5.play();}));
+  if(myAudio5.addEventListener('ended',()=>{ speech.text="";loop(); countset(); }));
+
+};
+
+function countset(){
+    let table=document.getElementById('datatable');
+	var canceltxt= document.getElementById('canceltxt');
+counts ++;
+
+if(counts == 2){
+canceltxt.innerHTML=table.rows[1].cells[6].innerHTML;
+
+$("#submit").trigger('click');
+
+
+};
+
+}
+
+
+
+
+function loop(){
+
+var table= $("#datatable").dataTable();
+  
+var tableCount=table.fnGetData().length;
+
+
+if(tableCount>0){
+announce();
+}else{
+
+  myAudio6.volume=0.1;
+  myAudio6.play();
+
+$(document).ready(function (){ 
+  
+  
+  
+  $('#start').click(function(){ 
+
+
+});
+  // set time out 2 sec
+     setTimeout(function(){
+        $('#start').trigger('click');
+    }, 2000);
+});
+
+
+  }
+}
+
+
+
+
+
+document.querySelector("#start").addEventListener("click",()=> {
+
+loop()
+  
+});
+
+document.querySelector("#pause").addEventListener("click", () => {
+  window.speechSynthesis.pause();
+});
+
+document.querySelector("#resume").addEventListener("click", () => {
+  window.speechSynthesis.resume();
+});
+
+document.querySelector("#cancel").addEventListener("click", () => {
+  window.speechSynthesis.cancel();
+});
+
+
+
+function timerFunction(){
+   var sec = 0;
+ 
+    function pad ( val ) { return val > 9 ? val : "0" + val; }
+
+    setInterval( function(){
+    var hour= pad(parseInt(sec/360,10));
+var minute=  pad(parseInt(sec/60,10));
+var second= pad(++sec%60);
+       document.getElementById('timer').innerHTML= hour +':'+minute+':'+ second;
+        if(hour == 1){
+    location.reload();
+    }
+ 
+    }, 1000);
+	
+
+    
+  
+}
+
+
+const pauseIconClassName = document.getElementById('pause')
+const playIconClassName = document.getElementById('start')
+const stopIconClassName= document.getElementById('submit');
+const btns = document.querySelectorAll('.btn')
+
+function onChange (event) {
+  // get the button elememt from the event
+    const buttonElement = event.currentTarget
+  
+  // check if play button class is present on our button
+  const isPlayButton = buttonElement.contains(playIconClassName)
+  const isStopPlay=buttonElement.contains(stopIconClassName)
+  
+  // if a play button, remove the play button class and add pause button class
+  if (isPlayButton) {
+    pauseIconClassName.hidden=false;
+    playIconClassName.hidden=true;
+    
+    // if a pause button, remove pause button class and add play button class
+  } else {
+    playIconClassName.hidden=false;
+    pauseIconClassName.hidden=true;
+  }
+
+
+  // You can also use .toggle function on classList as mentioned by the person in other answer
+}
+
+// query selector all returns a list of nodes, therefore we need to iterate over it and attach an event listener to each button seperatly
+btns.forEach(btn => {
+    btn.addEventListener('click', onChange)
+})