Disabling the play/pause button until there is a connection with the audio

JavaScript
1

How would I set this up so that after ‘Set’ is pressed, the play svg won’t change unless there’s a valid stream link inserted?

https://jsfiddle.net/29sm1zet/28/

(function iife() {
    "use strict";
    const player = document.getElementById("player");
    const button = document.getElementById("button");
    const value = document.getElementById("input");
    const sent = document.getElementById("sent");

    function playPauseIcon(play) {
        if (play) {
            button.classList.add("is-playing");
        } else {
            button.classList.remove("is-playing");
        }
    }
    button.addEventListener("click", function() {
        if (player.paused) {
            player.play();
            playPauseIcon(true);
        } else {
            player.pause();
            playPauseIcon(false);
        }
    });
    button.addEventListener("mousedown", function(evt) {
        if (evt.detail > 1) {
            evt.preventDefault();
        }
    }, false);
    sent.addEventListener("click", function(evt) {
        player.src = value.value;
        player.volume = 1.0;
        playPauseIcon(true);
        evt.preventDefault();
    });
}());
2

To make sure I’m understanding, you want to disable the play/pause button until the stream is actually playing? To do this, you might want to change a few things:

All your functions within your event handlers are currently anonymous functions, in that they have no names. Move them OUT of the event handlers (specifically, the one handling button.onClick), and then, when the ‘Set’ button is clicked, you can removeEventListener() on the button el. Once the player is playing, you can re-enable that event listener.

More about removeEventListener on MDN.

1 Like
3

What did I do wrong here, how would I fix it?
https://jsfiddle.net/29sm1zet/53/

(function iife() {
  "use strict";
  const player = document.getElementById("player");
  const button = document.getElementById("button");
  const value = document.getElementById("input");
  const sent = document.getElementById("sent");

  function playPauseIcon(play) {
    if (play) {
      button.classList.add("is-playing");
    } else {
      button.classList.remove("is-playing");
    }
  }

  if (player.paused) {
    player.play();
    playPauseIcon(true);
  } else {
    player.pause();
    playPauseIcon(false);
  }


  button.addEventListener("mousedown", function(evt) {
    if (evt.detail > 1) {
      evt.preventDefault();
    }
  }, false);
  sent.removeEventListener("click", function() {

  });

  sent.addEventListener("click", function(evt) {
    player.src = value.value;
    player.volume = 1.0;
    playPauseIcon(true);

  });
}());
4

That question is too broad. Not sure exactly what part of the thing you’re currently trying to adjust/edit. What are you trying to accomplish? What behavior are you getting? Is there a specific part of the code you’re currently editing and getting unexpected behavior?

5

I moved this out of the function like you told me to.

  if (player.paused) {
    player.play();
    playPauseIcon(true);
  } else {
    player.pause();
    playPauseIcon(false);
  }

Is something supposed to go in here?
removeEventListener

  sent.removeEventListener("click", function() {

  });

  sent.addEventListener("click", function(evt) {
    player.src = value.value;
    player.volume = 1.0;
    playPauseIcon(true);

  });
6

Ah. So ish. That might be well used by being wrapped in a function, which you can then call:

function togglePlayer(){
  if (player.paused) {
    player.play();
    playPauseIcon(true);
  } else {
    player.pause();
    playPauseIcon(false);
  }
}

Then, elsewhere:

button.addEventListener("click", togglePlayer);

And in your sent handler:

  sent.addEventListener("click", function(evt) {
    // disable the play/pause
    button.removeEventListener("click", togglePlayer() );
    player.src = value.value;
    player.volume = 1.0;
    playPauseIcon(true);

  });

Then, of course, when the playback has started, you need to re-attach the addEventListener.

7

What do I need to do to get this fixed?

I don’t know if it’s almost working or not.

How would I do this?
re-attach the addEventListener.

This is what I have right now:
https://jsfiddle.net/29sm1zet/67/

(function iife() {
    "use strict";
    const player = document.getElementById("player");
    const button = document.getElementById("button");
    const value = document.getElementById("input");
    const sent = document.getElementById("sent");

    function playPauseIcon(play) {
        if (play) {
            button.classList.add("is-playing");
        } else {
            button.classList.remove("is-playing");
        }
    }

    function togglePlayer() {
        if (player.paused) {
            player.play();
            playPauseIcon(true);
        } else {
            player.pause();
            playPauseIcon(false);
        }
    }
    button.addEventListener("mousedown", function (evt) {
        if (evt.detail > 1) {
            evt.preventDefault();
        }
    }, false);
    button.addEventListener("click", togglePlayer);
    sent.addEventListener("click", function () {
        // disable the play/pause
        button.removeEventListener("click", togglePlayer());
        player.src = value.value;
        player.volume = 1.0;
        playPauseIcon(true);
    });
}());