Embedding audio - javascript

I have created a Pomodoro clock(timer). I want to play a sound after each session or break ends.
function countDownTimer() {
timer = setInterval(function() {
if (!pause) {
if (sec == 0) {
if (minutes !== 0)
minutes--;
if (minutes == 0 && hours !== 0) {
display(hours, minutes, sec);
hours--;
minutes = 59;
}
display(hours, minutes, sec = 59);
} else {
sec--;
display(hours, minutes, sec);
}
}
}, 1000);
}
function display(hr, min, sec) {
checkIfOver(hr,min,sec);
if (hr < 10)
hr = "0" + hr;
if (min < 10)
min = "0" + min;
if (sec < 10)
sec = "0" + sec;
document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec;
}
function checkIfOver(hr,min,sec){
if ((hr == 0 && min == 0 & sec == 0) && session == true) {
session = false;
breaks = true;
if (confirm("Session is over. Start Break??"))
setTime();
else {
clearInterval(timer);
document.getElementById("start").disabled = false;
}
} else if ((hr == 0 && min == 0 & sec == 0) && breaks == true) {
session = true;
breaks = false;
if (confirm("Break is over. Start Session??"))
setTime();
else {
clearInterval(timer);
document.getElementById("start").disabled = false;
}
}
}
I have tried embedding an audio src through html and playing it via js. Also I have tried using an audio object. Is there any other way to do it??
Full Code here:http://codepen.io/jpninanjohn/pen/WwBWpO?editors=1010

Convert to mp3 format and use the HTML5 audio element:
<audio src="success.mp3">
Your browser does not support the audio element.
</audio>
Another solution is to create the Audio object directly without any html elements:
var audio = new Audio('success.mp3');
audio.play();

Related

JQuery - How to update variable after call function?

I have a timer function, I want to change the value of my variable after the timer reaches 0?
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counter = document.getElementById("timer");
current_minutes = mins - 1
seconds--;
counter.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
if (parseInt(current_minutes) === 0 && parseInt(seconds) === 00) {
sendAgain.show();
finalMin = parseInt(current_minutes);
finalSec = parseInt(seconds);
}
if (seconds > 0) {
timeoutHandle = setTimeout(tick, 1000);
} else {
if (mins > 1) {
// countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst
setTimeout(function () { countdown(mins - 1); }, 1000);
}
}
}
tick();
}
variables :
let finalMin = null;
var finalSec = null;
I want the variables to be set after the following code is executed?
if (parseInt(current_minutes) === 0 && parseInt(seconds) === 00) {
sendAgain.show();
finalMin = parseInt(current_minutes);
finalSec = parseInt(seconds);
}
countdown(2);
console.log(finalMin); ===== show "0"

Javascript setInterval flickering

I'm trying to create a chess clock using JavaScript. I've settle almost all of the issues with the clock's functionality except for this one. I'm using setInterval to essentially create the "countdown" effect on each player's clock. However, when it is triggered with the method I'm currently using the clock flickers. From my understanding/research, this is likely because there are overlapping 'intervals' that cause the code to try to display multiple intervals at the same time. Essentially the clock buttons (stopclock and stopclock2) when clicked call the functions on the bottom of my code. Could anyone provide some input on my code (below) and why this might be occurring?
clear1mils = "";
clear2mils = "";
//Clock Functions
function countdownmils2() {
document.getElementById("milsvalue2").innerHTML = --mil2;
if (mil2 == 0) {
mil2 = mil2 + 59;
if (sec2 == 0) {
if (min2 == 0) {
clearInterval(clear2mils);
document.getElementById("milsvalue2").innerHTML = "00";
}else if (min2 !== 0) {
sec2 = 60;
document.getElementById("minutesvalue2").innerHTML = --min2;
document.getElementById("secondsvalue2").innerHTML = --sec2;
}
}else if (sec2 !== 0) {
document.getElementById("secondsvalue2").innerHTML = --sec2;
if (sec2 <= 10) {
document.getElementById("secondsvalue2").innerHTML = "0" + sec2;
}
}
}else if (mil2 <= 10) {
document.getElementById("milsvalue2").innerHTML = "0" + mil2;
}
}
function countdownmils() {
document.getElementById("milsvalue").innerHTML = --mil;
if (mil == 0) {
mil = mil + 59;
if (sec == 0) {
if (min == 0) {
clearInterval(clear1mils);
document.getElementById("milsvalue").innerHTML = "00";
}else if (min !== 0) {
sec = 60;
document.getElementById("minutesvalue").innerHTML = --min;
document.getElementById("secondsvalue").innerHTML = --sec;
}
}else if (sec !== 0) {
document.getElementById("secondsvalue").innerHTML = --sec;
if (sec <= 10) {
document.getElementById("secondsvalue").innerHTML = "0" + sec;
}
}
}else if (mil <= 10) {
document.getElementById("milsvalue").innerHTML = "0" + mil;
}
}
//Clock 1
document.querySelector("#stopclock").addEventListener("click", () => {
clear2mils = setInterval(countdownmils2, 10);
clearInterval(clear1mils);
document.getElementById("stopclock").innerHTML = "DOWN";
document.getElementById("stopclock2").innerHTML = "UP";
document.getElementById("stopclock").setAttribute("disabled", "true");
document.getElementById("stopclock2").removeAttribute("disabled", "true");
});
//Clock 2
document.querySelector("#stopclock2").addEventListener("click", () => {
clear1mils = setInterval(countdownmils, 10);
clearInterval(clear2mils);
document.getElementById("stopclock2").innerHTML = "DOWN";
document.getElementById("stopclock").innerHTML = "UP";
document.getElementById("stopclock2").setAttribute("disabled", "true");
document.getElementById("stopclock").removeAttribute("disabled", "true");
});

Stop the coundown timer if the user wins

I added a timer to my memory game, and i want to stop it when the user matches all the 8 cards.
window.onload = function() {
var timeoutHandle;
function countdown(minutes, seconds) {
function tick() {
var timecounter = document.getElementById("timer");
timecounter.innerHTML = minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
seconds--;
if (seconds >= 0) {
timeoutHandle = setTimeout(tick, 1000);
} else {
if (minutes >= 1) {
setTimeout(function () {
countdown(minutes - 1, 59);
}, 1000);
}
}
if (seconds==0 && minutes ==0){
alert("Game over");
//reset();
}
}
tick();
}
countdown(1, 00); }
the above is the countdown timer function
if (matches == 8) {
document.getElementById("finalMove").innerHTML = moves;
clearTimeout(timeoutHandle);
showWinScreen();
}
can you suggest a solution for this.

Play sound on different prayer Times in ionic 2

I want to play sound in my ionic2 App on different prayer Times saved in db
e.g this is my GUI
here i am playing music in opening a div like:
in Html
<div item-right *ngIf="playAudio">
<audio controls autoplay="true">
<source [src]="this.audio">
</audio>
</div>
and in my ts file:
setInterval(() => {
var d = new Date();
var hours = d.getHours();
var min = d.getMinutes();
var minutes;
if (min < 10) {
minutes = "0" + min;
this.time = hours + ":" + minutes;
} else {
this.time = hours + ":" + min;
}
if (this.showPrayerTimes == true) {
this.checkprayerTime();
}
}, 60000)
checkprayerTime() {
if (this.time == this.prayerTime.FajarTime) {
this.playAudio= true;
}
else if (this.time == this.prayerTime.DhuhrTime) {
this.playAudio= true;
}
else if (this.time == this.prayerTime.AsrTime) {
this.playAudio= true;
}
else if (this.time == this.prayerTime.MaghribTime) {
this.playAudio= true;
}
else if (this.time == this.prayerTime.IshaTime) {
this.playAudio= true;
}
else if (this.time == this.prayerTime.JumuahTime) {
this.playAudio= true;
}
else {
console.log("time do not match");
}
}
it is working in this current page(only when we are on this page) but what if i want to check the prayer time in my app no matter on what page i am it checks and plays audio .
Thanks in advance
you can create separate Component for checking and playing and add that Component in the top of the App.
(kind of global header/footer component)
In my App component.ts I used set interval function and it runs in complete app and work as a background process in my app and plays sound regardless of at what page I am.

pause countdown javascript jquery

http://jsfiddle.net/vvccvvcc/mu45bptk/
how do I pause the timer? I want it to stop when it gets to 5 seconds
I tried this as seen in the fiddle
else {
isWaiting = true;
seconds--;
if (seconds == 5) {
seconds=seconds;}
}
does not work
The timer is initialized by setInterval(GameTimer, 1000);
if (seconds == 5) {
clearInterval(countdownTimer);
} else {
seconds--;
}
You will need to clear the interval in order to stop calling the function. Alternatively if you don't want to clear the interval you can say
if (seconds > 5) {
seconds--;
}
The way you've written it, second is decreased regardless of the condition (since it's before the if statement) and therefore, second = second becomes irrelevant.
Is this what you are looking for?
Fiddle: http://jsfiddle.net/mu45bptk/2/
var isWaiting = false;
var isRunning = false;
var seconds = 10;
var countdownTimer;
var finalCountdown = false;
function GameTimer() {
if (isWaiting) {
return;
}
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('waiting_time').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
if (finalCountdown) {
clearInterval(countdownTimer);
} else {
finalCountdown = true;
}
} else {
if (seconds == 5) {
isWaiting = true;
} else {
seconds--;
}
}
}
countdownTimer = setInterval(GameTimer, 1000);
You need to set isWaiting only if seconds == 5 and then check isWaiting on every run of GameTimer()

Categories