Question

这是一个简单的程序，它以HTML中的betNo中的变量启动HTML中的音频，从0开始。

但是当变量达到10时我无法停止音频。我减少了原始代码以使其更简单。计数器对我的程序是必要的，因此删除它不是一个选项。您可以在控制台中看到可变计数。

您可以使用jquery解决，因为我已经在使用它。

提前谢谢。

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

Answer 1

我已经编辑了我的答案。启动计时器的按钮将允许在safari mobile上播放声音计时器不像之前那样重新声明变量和函数你可以用更少的全局变量使它变得更干净，但我不知道你的代码会如何受到影响，所以我没有改变它。

<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

解决方案更简单（原因只是一个愚蠢的错误）。感谢@Rory McCrossan在评论中指出了这一点。

我刚从var isPlaying = false;函数中取出setInterval，否则即使正在播放该歌曲，它也会设置为false。

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>

HTML音频不会因变量计数

2 个答案: