Conditional checkbox action for Tone.js (Web Audio)

Question

I'm trying to create a checkbox ( $('#button') ) the action of which changes depending on the state of player (whether the audio is playing or not) using Tone.js and jQuery.

So, the logic is that if the audio is already started , then the action of the checkbox is simply to mute (or unmute) the audio. However, if the audio is not already started then I want the checkbox to start player (with the default player.mute == false ) and change its own action to mute /unmuting. This will mean that, once the player.state == started you cannot change it , only toggle whether it is muted or not.

I've managed to get a function together that toggles the state or the mute value, but not one where the action of the checkbox itself is conditioned by the state . The code I have below is my attempt at this but it doesn't seem to work ☹️ – any help would be really appreciated.

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

Just for context: This is all because whether autoplay is allowed or not varies between browsers. In some an autoplay function I have earlier in the script means that the player begins on the page load (👍🏼), in others an explicit user action is required (👎🏼).

Answer 1

What i understood is, the desired behavior is as follows:-

Whenever the player.state === 'started' Clicking on the button should mute the audio and again clicking on it should unmute the audio. and keep on toggling till the player.state === 'started' If player.state === 'stopped', clicking on button should start the audio and then keepo toggling the mute/unmute till the player is in started state.

Below is the implementation of the same. const button = $('#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);
  }
});

//with this implementation, on checkbox implies unmute and started state. //off checkbox implies stopped or started+mute state.