I am trying to build a circuit training app and found your code to be useful.
I tried the code for playing audio files you posted and it works however when I tried to play a sound through with a timeout function it works only after a certain point in time. After that no sound is played.
This is my code below;
beep.js
var beep = "sounds/Japanese Temple Bell.mp3";
var tone = "sounds/tone.mp3";
var time = 0, Ex_time = 0, Rest_time = 0, Sets_time = 0;
var RepeatsDisplay = 0, SetsDisplay = 0;
var num = 0;
var Exercise_Interval= 0, Rest_Interval= 0, Sets_Interval= 0;
var Sets = 0, Repeats = 0;
var interval = 0, global_Interval = -1, Global = -1;
var state = -1;
var context = 0;
var seconds = -1, minutes = -1, global_seconds = -1, global_minutes = -1, display_mins = 0, display_secs = 0;
g = 0, t = 0;
//functions used to play sounds
function playMP3(sound) {
var mp3URL = getMediaURL(sound);
var media = new Media(mp3URL, null, mediaError);
media.play();
}
function getMediaURL(s) {
if(device.platform.toLowerCase() === "android") return "/android_asset/www/" + s;
return s;
}
function mediaError(e) {
alert('Media Error');
alert(JSON.stringify(e));
}
//functions that show user inputs
function toggleRow(id) {
var row = document.getElementById(id) ;
if (row.style.display == 'none') {
row.style.display = 'inline';
}
else {
row.style.display = 'none';
}
}
function toggleData(table,id) {
var table = document.getElementById(table);
for (var i = 0, row; row = table.rows[i]; i++) {
if (row.className == id) {
for (var j = 0, col; col = row.cells[j]; j++) {
if (col.style.display == '') {
col.style.display = 'inline';
}
else {
col.style.display = '';
}
}
}
}
}
//Function that validates inputs
function minmax(value, min, max)
{
if(parseInt(value) < min || isNaN(value))
return min;
else if(parseInt(value) > max)
return max;
else return value;
}
//functions that show user inputs in the sets table
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
function toggleRowByClassName(Table, ClassName) {
var table = getElementsByClassName(document, Table);
//var elements = getElementsByClassName(document, ClassName),
n = table.length;
for (var i = 0; i < n; i++) {
var e = table[i];
if (e.className == ClassName) {
if(e.style.display == 'none') {
e.style.display = 'inline';
} else {
e.style.display = 'none';
}
}
}
}
//function counts the exercise and rest time
function countdown() {
if (interval == 0 && seconds == 0 && minutes ==0) {
state++;
playMP3(beep);
interval = 0, seconds = -1, minutes = -1;
if (state % 2 == 0) {
Repeats--
document.getElementById('Repeats_Display').textContent = Repeats + "x";
}
start();
if (parseInt(Repeats) == 0) {
clearTimeout(t);
clearTimeout(g);
}
}
t = setTimeout(function() {startclock(time, context)}, 1000);
}
function countzero() {
if (interval == 0 && seconds == 0 && minutes ==0) {
state++;
interval = 0, seconds = -1, minutes = -1;
if (state % 2 == 0) {
Repeats--
document.getElementById('Repeats_Display').textContent = Repeats + "x";
}
start();
if (parseInt(Repeats) == 0) {
clearTimeout(t);
clearTimeout(g);
}
}
}
function startclock(time, context) {
if (parseInt(Repeats) == 0) {
return 0;
}
if (interval == 0) {
context = context
minutes = Math.floor(time / 60);
seconds = time - Math.round(minutes * 60);
interval = parseInt(time);
}
if (seconds == 0 && minutes > 0) {
minutes--
seconds = 60;
}
if (seconds > 1 && seconds < 5) {
playMP3(tone);
}
seconds--;
interval--;
context.textContent = (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" +
(seconds > 9 ? seconds : "0" + seconds);
if (seconds ==0 && minutes == 0) {
context.textContent = getTimeDisplay(time);
}
countdown();
}
//function that decreases global timer
function Globalcountdown() {
if (global_Interval == 0) {
global_Interval = -1
}
g = setTimeout(function() {startglobalclock(global_Interval)}, 1000);
}
function startglobalclock(startglobalInterval) {
if (Global < 0 && startglobalInterval > 0) {
global_minutes = Math.floor(global_Interval / 60);
global_seconds = global_Interval - Math.round(global_minutes * 60);
Global = global_Interval
}
if (global_seconds == 0 && global_minutes > 0) {
global_minutes--
global_seconds = 60;
}
global_seconds--;
Global--;
Global_time.textContent = (global_minutes ? (global_minutes > 9 ? global_minutes : "0" + global_minutes) : "00") + ":" +
(global_seconds > 9 ? global_seconds : "0" + global_seconds);
Globalcountdown();
}
function getTimeDisplay(time) {
display_mins = Math.floor(time / 60);
display_secs = time - Math.round(display_mins * 60);
var result = (display_mins < 10 ? "0" + display_mins : display_mins) + ":" + (display_secs < 10 ? "0" + display_secs : display_secs);
display_mins = 0, display_secs = -1;
return result;
}
//Set the variables
function setvar() {
Sets = document.getElementById('Sets').value;
Repeats = document.getElementById('Repeats').value;
Exercise_Interval = document.getElementById('Exercise_Interval').value;
Rest_Interval = document.getElementById('Rest_Interval').value;
Sets_Interval = document.getElementById('Sets_Interval').value;
Global_time = document.getElementById('Global_time');
Ex_time = document.getElementById('Ex_time');
Rest_time = document.getElementById('Rest_time');
Sets_time = document.getElementById('Sets_time');
RepeatsDisplay = document.getElementById('Repeats_Display');
SetsDisplay = document.getElementById('Sets_Display');
interval = 0, minutes = -1, seconds = -1;
}
function start() {
if (state == -2) {
clearTimeout(t);
t = 0, s = 0;
Repeats = document.getElementById('Repeats').value;
global_Interval = (parseInt(Exercise_Interval) + parseInt(Rest_Interval)) * parseInt(Repeats)
Global_time.textContent = getTimeDisplay(global_Interval);
Ex_time.textContent = getTimeDisplay(Exercise_Interval);
Rest_time.textContent = getTimeDisplay(Rest_Interval);
Sets_time.textContent = getTimeDisplay(Sets_Interval);
document.getElementById('Repeats_Display').textContent = Repeats + "x";
state = 0;
playMP3(beep);
Globalcountdown();
}
if (state == -1) {
setvar();
global_Interval = (parseInt(Exercise_Interval) + parseInt(Rest_Interval)) * parseInt(Repeats)
Global_time.textContent = getTimeDisplay(global_Interval);
Ex_time.textContent = getTimeDisplay(Exercise_Interval);
Rest_time.textContent = getTimeDisplay(Rest_Interval);
Sets_time.textContent = getTimeDisplay(Sets_Interval);
document.getElementById('Repeats_Display').textContent = Repeats + "x";
document.getElementById('Sets_Display').textContent = Sets + "x";
state = 0;
playMP3(beep);
Globalcountdown();
countdown();
}
if (state % 2 == 0) {
time = parseInt(Exercise_Interval);
context = Ex_time;
} else {
time = parseInt(Rest_Interval);
context = Rest_time;
if (time == 0) {
minutes = 0, seconds = 0;
countzero();
}
}
if (parseInt(Repeats) == 0) {
clearTimeout(t);
clearTimeout(g);
interval = 0, minutes = -1, seconds = -1, state = -3;
Global = -1, global_minutes =-1, global_seconds = -1;
if (parseInt(Sets) > 1) {
state = -3;
clearTimeout(t);
clearTimeout(g);
Repeats = document.getElementById('Repeats').value;
document.getElementById('Repeats_Display').textContent = Repeats + "x";
Sets--
document.getElementById('Sets_Display').textContent = Sets + "x";
time = parseInt(Sets_Interval);
context = Sets_time;
} else {
stop();
}
}
}
//clear interval and clear timeout
function stop() {
setvar();
global_Interval = (parseInt(Exercise_Interval) + parseInt(Rest_Interval)) * parseInt(Repeats);
Global_time.textContent = getTimeDisplay(global_Interval);
Ex_time.textContent = getTimeDisplay(Exercise_Interval);
Rest_time.textContent = getTimeDisplay(Rest_Interval);
Sets_time.textContent = getTimeDisplay(Sets_Interval);
document.getElementById('Repeats_Display').textContent = Repeats + "x";
document.getElementById('Sets_Display').textContent = Sets + "x";
clearTimeout(t);
clearTimeout(g);
Repeats = 0, Sets = 0;
interval = 0, minutes = 0, seconds = 0, state = -1;
Global = -1, global_minutes =-1, global_seconds = -1;
}
//function for start button
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
document.querySelector("#start").addEventListener("touchend", start, false);
document.querySelector("#stop").addEventListener("touchend", stop, false);
};
index.html
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/beep.js"></script>
<ion-pane>
<ion-header-bar class="bar-dark">
<h1 class="title"> Beeper</h1>
</ion-header-bar>
<ion-content>
<br><br><br>
<div class ="card">
<table id="Exercise_table">
<tr>
<th>Exercise</th>
<td class="time"><div ><time id="Ex_time"><b>00:30</b></time></div></td>
</tr>
<tr>
<td colspan="2" class="arrow"><button id="show-Exercise" onclick="toggleData('Exercise_table','data')"><img src="./img/arrow.png"></button></td>
</tr>
<tr class="data">
<td id="Ex-a">Interval (in sec):</td>
<td id="Ex-b"><input type="number" onkeyup="this.value = minmax(this.value, 0, 999)" id="Exercise_Interval" value="30"></td>
</tr>
</table>
<table id="Rest_table">
<tr>
<th>Rest</th>
<td class="time"><div id =Rest_time><time><b>00:00</b></time></div></td>
</tr>
<tr>
<td colspan="2" class="arrow"><button id="show-Rest" onclick="toggleData('Rest_table','data')"><img src="./img/arrow.png"></button></td>
</tr>
<tr class="data">
<td id="Rest-a">Interval (in sec):</td>
<td id="Rest-b"><input type="number" onkeyup="this.value = minmax(this.value, 0, 999)" id="Rest_Interval" value="0"></td>
</tr>
</table>
<table id="Repeats_table">
<tr>
<th>Repeats</th>
<td><div class="wrapper" id = "Repeats_Display">10x</div></td>
</tr>
<tr>
<td colspan="2" class="arrow"><button id="show-Repeats" onclick="toggleData('Repeats_table','data')"><img src="./img/arrow.png"></button></td>
</tr>
<tr class="data">
<td id="Repeats-a">Number of Repeats:</td>
<td id="Repeats-b"> <input type="number" onkeyup="this.value = minmax(this.value, 1, 99)" id="Repeats" value="10"></td>
</tr>
</table>
<table id="Sets_table">
<tr>
<th>Sets</th>
<td><div class="wrapper"id="Sets_Display">1x</div></td>
</tr>
<tr>
<th>Sets-Rest</th>
<td class="time"><div id=Sets_time><time><b>00:10</b></time></div></td>
</tr>
<tr>
<td colspan="2" class="arrow"><button id="show-sets" onclick="toggleData('Sets_table','data')""><img src="./img/arrow.png"></button></td>
</tr>
<tr class="data">
<td id="Sets-a">Number of Sets:</td>
<td id="Sets-b"><input type="number" onkeyup="this.value = minmax(this.value, 1, 99)" id="Sets" value="1"></td>
<td id="Sets-c">Interval (in sec):</td>
<td id="Sets-d"><input type="number" onkeyup="this.value = minmax(this.value, 0, 999)" id="Sets_Interval" value="10"></td>
</tr>
</table>
<table class="main">
<tr>
<td class="container">
<button class="start-button" data-l10n-id="start" id="start" type="button">Start</button>
<button class="stop-button" data-l10n-id="stop" id="stop" type="button">Stop/Reset</button>
</td>
<td class="global"><h2><time id="Global_time">05:00</time></h2></td>
</tr>
</table>
</div>
</ion-content>
</ion-pane>