0

我正在尝试使用 Tone.js 和 jQuery 创建一个复选框 ( $('#button'))，其操作会根据状态player（是否正在播放音频）而变化。

因此，逻辑是如果音频已经是started，则复选框的操作只是mute（或取消静音）音频。但是，如果音频还没有，那么started我希望复选框start player（使用默认值player.mute == false）并将其自己的操作更改为mute/unmuting。这意味着，一旦player.state == started您无法更改它，只能切换是否muted。

我设法获得了一个可以切换state 或值的mute函数，但不是复选框本身的操作受state. 我下面的代码是我对此的尝试，但它似乎不起作用☹️ - 任何帮助将不胜感激。

  const button = $('#button');

  if(player.state == 'started') {
    $(button).attr('checked', true);
  } else if(player.state == 'stopped') {
    $(button).attr('checked', false);
  }

  if(player.state == 'started') {
    $(button).change(function(){
        if(player.mute == true) {
          player.mute == false;
          $(this).attr('checked', true);
        } else if(player.mute == false) {
          player.mute == true;
          $(this).attr('checked', false);
        }
      });
  } else if(player.state == 'stopped') {
    $(button).change(function(){
      player.start();
      $(this).attr('checked', true);
    });
  }

仅用于上下文：这完全是因为是否允许自动播放因浏览器而异。在脚本前面的某些自动播放功能中，意味着player从页面加载开始（），在其他情况下，需要明确的用户操作（）。

4

1 回答 1

1

我的理解是，所需的行为如下： -

每当 player.state === 'started' 点击按钮应该静音音频，再次点击它应该取消静音。并继续切换直到 player.state === 'started' 如果 player.state === 'stopped'，单击按钮应该启动音频，然后继续切换静音/取消静音，直到播放器处于启动状态。

下面是相同的实现。常量按钮 = $('#button');

//First set the button state to checked on unchecked depending on state
if(player.state == 'started') {
  button.attr('checked', true); //this means now the player is playing musing and is unmute.
} else if(player.state == 'stopped') {
    button.attr('checked', false); //this means now the player is stopped and is also mute
}

button.change(function(){
  if(player.state === 'started') {
    if(player.mute) {
      player.mute = false;
      button.attr('checked', false);
    } else {
      player.mute = true;
      $(this).attr('checked', true);
    }
  } else if (player.state === 'stopped') { //button was clicked and player is in stopped state. so start the player and turn on the checkbox so it displays that it is playing and is unmute
    player.start();
    button.attr('checked', true);
  }
});

//使用此实现，复选框表示取消静音和启动状态。//关闭复选框意味着停止或启动+静音状态。

于 2018-08-09T13:54:04.853 回答