HTML audio not stopping on variable count

Question

It's a simple program which starts the audio in HTML as variable in betNo in javascript starts from 0.

But I am having trouble stopping the audio when variable reaches 10. I have reduced the original code to make it simpler. The counter is necessary for my program so removing it can't be an option. You can see the varible count in the console.

You can use jquery to solve as I am already using it.

Thank you in advance.

document.addEventListener('DOMContentLoaded', function(event) {
  var betNo = 0;
  var boxTimer = setInterval(function() {
    var myAudio = document.getElementById('songOne');
    var isPlaying = false;

    function togglePlay() {
      if (isPlaying) {
        myAudio.pause();
      } else {
        myAudio.play();
      }
    };
    myAudio.onplaying = function() {
      isPlaying = true;
    };
    myAudio.onpause = function() {
      isPlaying = false;
    };
    if ((betNo == 0) || (betNo == 10)) {
      togglePlay();
    }
    console.log(betNo);
    betNo++;
    if (betNo >= 20) {
      clearInterval(boxTimer);
    }
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="songOne" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>

Answer 1

I have edited my answer. The button to start the timer will allow the sound to be played on safari mobile The timer doesn't re-declare variables and functions like it did before You could make it cleaner with less global variables but I don't know how the rest of your code would be affected by this so I didn't change it.

<button onclick=start()>start</button>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script> <audio id = "songOne" src = "http://www.sousound.com/music/healing/healing_01.mp3" preload = "auto" > </audio> 
<script>
// declaring variables
var betNo = 0 ;
var myAudio = document . getElementById ( 'songOne' );
var isPlaying =false;
var togglePlay=function(){
if (isPlaying) { 
myAudio . pause (); }
else { 
myAudio . play (); } }; 
myAudio . onplaying = function () { isPlaying = true ;}; 
myAudio . onpause = function () { isPlaying = false ;};
var start=function(){

// setTimer with only the necessary code inside so variables are not being declared more than once
boxTimer = setInterval ( function (){ if (( betNo == 0 )||( betNo == 10 )){ 
togglePlay (betNo); } 
console . log ( betNo ); 
betNo ++; if ( betNo >= 20 ){ 
clearInterval ( boxTimer ); } }, 1000 ); }
</script>

Answer 2

The solution is much simpler (cause was just a silly mistake). Thanks @Rory McCrossan for pointing that out in the comments.

I just took the var isPlaying = false; out of the setInterval function, otherwise it was being set to false even if the song was playing.

document.addEventListener('DOMContentLoaded', function(event) {
  var betNo = 0;
  var isPlaying = false;
  var boxTimer = setInterval(function() {
    var myAudio = document.getElementById('songOne');

    function togglePlay() {
      if (isPlaying) {
        myAudio.pause();
      } else {
        myAudio.play();
      }
    };
    myAudio.onplaying = function() {
      isPlaying = true;
    };
    myAudio.onpause = function() {
      isPlaying = false;
    };
    if ((betNo == 0) || (betNo == 10)) {
      togglePlay();
    }
    console.log(betNo);
    betNo++;
    if (betNo >= 20) {
      clearInterval(boxTimer);
    }
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="songOne" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>

document.addEventListener('DOMContentLoaded', function(event) {
  var betNo = 0;
  var boxTimer = setInterval(function() {
    var myAudio = document.getElementById('songOne');
    var isPlaying = false;

    function togglePlay() {
      if (isPlaying) {
        myAudio.pause();
      } else {
        myAudio.play();
      }
    };
    myAudio.onplaying = function() {
      isPlaying = true;
    };
    myAudio.onpause = function() {
      isPlaying = false;
    };
    if ((betNo == 0) || (betNo == 10)) {
      togglePlay();
    }
    console.log(betNo);
    betNo++;
    if (betNo >= 20) {
      clearInterval(boxTimer);
    }
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="songOne" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>

document.addEventListener('DOMContentLoaded', function(event) {
  var betNo = 0;
  var boxTimer = setInterval(function() {
    var myAudio = document.getElementById('songOne');
    var isPlaying = false;

    function togglePlay() {
      if (isPlaying) {
        myAudio.pause();
      } else {
        myAudio.play();
      }
    };
    myAudio.onplaying = function() {
      isPlaying = true;
    };
    myAudio.onpause = function() {
      isPlaying = false;
    };
    if ((betNo == 0) || (betNo == 10)) {
      togglePlay();
    }
    console.log(betNo);
    betNo++;
    if (betNo >= 20) {
      clearInterval(boxTimer);
    }
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="songOne" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>