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.
Related
I've created a countdown timer using javascript in asp.net. After completion of time, Button1 becomes disabled, but when I reload the page, the countdown timer is reset and Button1 is enabled.
I want to permanently disable Button1 when timer is equal to zero. My code is:
var tim;
var min = 01;
var sec = 00;
var f = new Date();
function f1() {
f2();
}
function f2() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = ""+min+" Minutes ,"+sec+" Seconds";
tim = setTimeout("f2()", 1000);
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == -1) {
clearTimeout(tim);
$("#Button1").prop('disabled', true);
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "" + min + " Minutes ," + sec + " Seconds";
tim = setTimeout("f2()", 1000);
}
}
}
}
<body onload="f1()">
<div><h3>Time will be finished after:</h3>
</div>
<div id="showtime"></div>
<div> <asp:Button ID="Button1" runat="server" Text="Submit"/></div>`
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
function f2() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = ""+min+" Minutes ,"+sec+" Seconds";
tim = setTimeout("f2()", 1000);
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == -1) {
clearTimeout(tim);
$("#Button1").prop('disabled', 'true');
storeValue('disabled', 'true');
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "" + min + " Minutes ," + sec + " Seconds";
tim = setTimeout("f2()", 1000);
}
}
}
}
function storeValue(key, value) {
if (localStorage) {
localStorage.setItem(key, value);
} else {
$.cookies.set(key, value);
}
}
function getStoredValue(key) {
if (localStorage) {
return localStorage.getItem(key);
} else {
return $.cookies.get(key);
}
}
function f1() {
f2();
var model =getStoredValue('disabled');
if(model == 'true')
{
$("#Button1").prop('disabled', 'true');
}
}
var tim;
var min = 01;
var sec = 00;
var f = new Date();
</script>
Use this code and make the thrid party localstorage to use in browser
When you reload the page, the state of the page is completely reset so it's as if a new visitor has found your page so you need to be able to store that state between visits.
One solution would be to use a cookie which you could set when the timer expires, and check for the presence of the cookie when the page loads. If it's there, disable the button straight away without a timer.
A more complicated solution would be to investigate saving session state on your server, but I've no idea what you have going on server-side so I can't give you much to go on there.
You could set a cookie when timer is off. And at every page load check for the cookie and disable the button if required. There is no other way.
FYI: you could use the same cookie to disable the button at server side itself.
Javascript
document.getElementById("myBtn").disabled = true;
or if u need it with a jquery- Click
$('.rbutton').on('click',function() {
$(this).prop("disabled",true);
});
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();
I have a timer running using jquery setInterval and a button that toggles between play and pause. I need the timer to pause and/or continue running when the user clicks on the play/pause button. Also, for some reason, the seconds goes from "59" to "01". It's skipping "00". I'm not sure why. Thanks for your help!
HTML:
<div id="clock">0:00</div>
<div id="audioBtn">
<div class="btn play"></div>
<div class="btn pause"></div>
</div>
JQuery
var output = $('#clock');
var isPaused = false;
var min = 0;
var sec = 0;
var t = window.setInterval(function() {
if(!isPaused) {
sec++;
if (sec < 10) {
output.html(min + ":0" + sec);
} else {
output.html(min + ":" + sec);
}
if (sec === 59) {
sec = 0;
min++;
}
}
}, 1000);
if ($('.btn').hasClass('pause')) {
$('#audioBtn').on('click', function(e) {
e.preventDefault();
console.log("should pause");
isPaused = true;
});
};
if ($('.btn').hasClass('play')) {
$('#audioBtn').on('click', function(e) {
e.preventDefault();
console.log("should play");
isPaused = false;
});
};
change it to
if (sec == 59) {
sec = -1;
min++;
}
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()
I have a Javascript block in which it creates a timer based on mouse movements. If you are not doing any activity the timer starts and when it reaches say 1 minute left time it displays an alert to the user and if the user does not respond it navigates to another page. The problem I am facing is that when I show an alert to the user the timer execution stops and it just waits for the user to press enter. What I need is that the timer should continue in the background whether the user clicks OK or not.
var mins, secs, TimerRunning, TimerID;
TimerRunning = false;
var activity;
document.documentElement.onmousemove = function () {
clearInterval(activity);
activity = Init();
// activity = setInterval(saySomething, 5000);
}
function Init() //call the Init function when u need to start the timer
{
mins = 2;
secs = 0;
StopTimer();
StartTimer();
}
function StopTimer() {
if (TimerRunning)
clearTimeout(TimerID);
TimerRunning = false;
}
function StartTimer() {
TimerRunning = true;
window.status = "if no activity is detected you will be logged out in " + Pad(mins) + ":" + Pad(secs);
TimerID = self.setTimeout("StartTimer()", 1000);
Check();
if (mins == 0 && secs == 0)
StopTimer();
if (secs == 0) {
mins--;
secs = 60;
}
secs--;
}
function Check() {
if (mins == 1 && secs == 0)
toggle();
alert("You have only 2 minutes remaining");
if (mins == 0 && secs == 0) {
window.location = "http://Test";
}
}
function Pad(number) //pads the mins/secs with a 0 if its less than 10
{
if (number < 10)
number = number;
return number;
}
Instead of using an alert, just use a modal dialog (basically a div that floats on top of everything else), or in the worst case a popup window.
I highly doubt this is feasible in javascript as it runs inside browser's ui thread...
But you can do what you want with jquery-ui (dialog widget) or similar javascript framework!