如何在播放/暂停控制功能中停止无限循环

Posted 2023-02-25

【中文标题】如何在播放/暂停控制功能中停止无限循环

【英文标题】：How to stop the infinite loop in the play/pause control function

【发布时间】：2016-11-10 22:08:16

【问题描述】：

在我的音乐播放器中，我有一个控制音频对象的功能，当单击播放/暂停按钮时，它决定暂停声音或播放它。此外，如果单击按钮时正在播放任何其他音频，它会暂停它们并播放与单击按钮对应的声音。

这是函数：

  function manageAudio() 
    if (audio.paused) 

      //play after 150ms
      setTimeout(function() 
        audio.play();
      , 150);

      $('.playButton.playing').click();

      $(thisObj).addClass("bekhon");
      $(".sMusicPlyaer").removeClass("nakhon ");
     else 
      audio.pause();

      $(thisObj).addClass("nakhon");
      $(".sMusicPlyaer").removeClass("bekhon");
    
  

这里是完整的演示来看看：

$.fn.MusicPlayer = function(options) 
  var settings = $.extend(
    // These are the defaults
    title: "",
    track_URL: "",
    load_playlist: ""
  , options);
  var audio, thisObj, playPauseBTN;
  audio = new Audio();
  thisObj = this;
  playPauseBTN = $(".playButton", thisObj);

  //Statuses Evnts
  $(audio).on("playing", function() 
    togglePlying(playPauseBTN, true);
    $(playPauseBTN).addClass("pause");
  );
  $(audio).on("pause", function() 
    togglePlying(playPauseBTN, false);
    $(playPauseBTN).removeClass("pause");
  );


  thisObj.each(function() 
    audio.src = settings.track_URL;
    $(".title", thisObj).text(settings.title);

    if (settings.load_playlist == "true") 
      $(thisObj).css("height", "140px");
      $(thisObj).append("<div class='playlist'></div>");
      $(".playlist", thisObj).append("<div class='row' data-src='https://p.scdn.co/mp3-preview/c92cc644b1eb5094ce65cf561c41b0c6d9f3faaa'>music 1</div>");
      $(".playlist", thisObj).append("<div class='row' data-src='https://p.scdn.co/mp3-preview/dc73c2b8aa08c7b5ac2c72813326fbd6aa65787b'>music 2</div>");
      $(".playlist", thisObj).append("<div class='row' data-src='https://p.scdn.co/mp3-preview/b2da3e7ee2834c24fbf5a0927e59d34cc618e30e'>music 3</div>");
    
  );


  $(playPauseBTN, thisObj).on("click tap", function() 
    manageAudio();
  );

  $(".playlist > .row", thisObj).on("click tap", function() 
    audio.src = $(this).attr("data-src");
    manageAudio();
  );


  function manageAudio() 
    if (audio.paused) 

      //play after 150ms
      setTimeout(function() 
        audio.play();
      , 150);
      
      console.log("print");
      $('.playButton.playing').click();

      $(thisObj).addClass("bekhon");
      $(".sMusicPlyaer").removeClass("nakhon ");
     else 
      audio.pause();

      $(thisObj).addClass("nakhon");
      $(".sMusicPlyaer").removeClass("bekhon");
    
  



// Utility functions
function togglePlying(aClassName, bool) 
  $(aClassName).toggleClass("playing", bool);


$("#player1").MusicPlayer(
  title: "title 1",
  track_URL: "https://rjmediamusic.com/media/mp3/mp3-256/Alireza-JJ-Sijal-Nassim-Ki-Khoobe-Ki-Bad-(Ft-Behzad-Leito-Sami-Low-AFX).mp3"
);

$("#player2").MusicPlayer(
  title: "title 2",
  track_URL: "http://myst729.qiniudn.com/within-temptation_pale.mp3",
  load_playlist: "true"
);

$("#player3").MusicPlayer(
  title: "title 3",
  track_URL: "https://p.scdn.co/mp3-preview/657f7141682f667253bf9c3afab5feebccf75105"
);

body 
  background: url(http://wallpapercave.com/wp/VkyGWEi.jpg) no-repeat;
  background-size: cover;


.sMP 
  background: rgba(255, 255, 255, 0.5);
  color: #000;
  width: 400px;
  height: 50px;
  margin: 10px;


.playButton 
  background: url(https://cdn4.iconfinder.com/data/icons/standard-free-icons/139/Play01-64.png);
  background-size: 30px 30px !important;
  width: 30px;
  height: 30px;


.playButton.pause 
  background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-pause-48.png);


.row 
  border: 1px solid black;
  margin: 5px 0 5px 0;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sMP" id="player1">
  <div class="playButton"></div>
  <div class="title"></div>
</div>
<div class="sMP" id="player2">
  <div class="playButton"></div>
  <div class="title"></div>
</div>
<div class="sMP" id="player3">
  <div class="playButton"></div>
  <div class="title"></div>
</div>

JSFiddle：

要查看错误，请单击播放器 2 中的播放按钮，然后通过单击同一播放列表中的另一个曲目来更改曲目。 它以Uncaught RangeError: Maximum call stack size exceeded(…) 错误结束。很可能与$('.playButton.playing').click();有关。

有解决办法吗？

【参考方案1】：

您必须确保单击当前播放列表之外的播放按钮。

因此，您可以这样做，而不是 $('.playButton.playing').click();：

  var $playing = $('.playButton.playing');

  if ($(thisObj).find($playing).length === 0) 
     $playing.click();
  

这样您就不会再次单击中间框中的播放按钮。