Only change from Play to Pause if the audio link is working

JavaScript
22

I commented both out:

Then what?
https://jsfiddle.net/vhgL96se/114/

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

    function playPauseIcon(play) {
        if (!canPlay) {
            return;
        }
        if (play) {
            button.classList.add("is-playing");
        } else {
            button.classList.remove("is-playing");
        }
    }
    button.addEventListener("click", function() {
        if (!canPlay) {
            return;
        }
        if (player.paused) {
            player.play().then(function() {
                //playPauseIcon(true);
            }).catch(function(err) {
                playPauseIcon(false);
            });
        } else {
            player.pause();
            playPauseIcon(false);
        }
    });
    button.addEventListener("mousedown", function(evt) {
        if (evt.detail > 1) {
            evt.preventDefault();
        }
    }, false);
    sent.addEventListener("click", function() {
        player.src = value.value;
        player.volume = 1.0;
        playPauseIcon(true);
    });
    input.addEventListener("click", function() {
        value.value = "";
        button.classList.remove("is-playing");
        player.pause();
        canPlay = false;
    }, false);
    /* player.onloadstart = function () {
          if (value.value !== "") {
              canPlay = true;
              playPauseIcon(true);
          }
      };*/
}());
23

I guess I’m confused. Again, you’re handling a lot of similar things in a lot of different places. If you comment the player.onloadstart out, it doesn’t toggle the pause button on load. If you comment out the one in play/pause, when you click on the play/pause, it doesn’t toggle back.

Uncomment both.

But seriously, look for ways to encapsulate your code. Look for ways to simplify. Creating a player that wraps your custom player and its controls would be pretty trivial, and then you create an API to connect to it.

24

Uncommented both:

https://jsfiddle.net/vhgL96se/122/


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

    function playPauseIcon(play) {
        if (!canPlay) {
            return;
        }
        if (play) {
            button.classList.add("is-playing");
        } else {
            button.classList.remove("is-playing");
        }
    }
    button.addEventListener("click", function () {
        if (!canPlay) {
            return;
        }
        if (player.paused) {
            player.play().then(function () {
                playPauseIcon(true);
            }).catch(function (err) {
                playPauseIcon(false);
            });
        } else {
            player.pause();
            playPauseIcon(false);
        }
    });
    button.addEventListener("mousedown", function (evt) {
        if (evt.detail > 1) {
            evt.preventDefault();
        }
    }, false);
    sent.addEventListener("click", function () {
        player.src = value.value;
        player.volume = 1.0;
        playPauseIcon(true);
    });
    input.addEventListener("click", function () {
        value.value = "";
        button.classList.remove("is-playing");
        player.pause();
        canPlay = false;
    }, false);
    player.onloadstart = function () {
        if (value.value !== "") {
            canPlay = true;
            playPauseIcon(true);
        }
    };
}());
25

And now it looks as you expect? From where I sit, it seems to be doing what you want.

edit Nope. It doesn’t. Now, when you error, it still sets that play/pause button. I think the problem is when you set the play button. Rather than doing

player.onloadstart = function(){
  /***
   * Regardless of what the content of src is, we are trying to load SOMETHING,
   *   so we display the pause button regardless of whether we got a valid src or not.
   ***/
}

Change when that happens. There is another event that may be more appropriate to what you want: oncanplay:

player.oncanplay = function(){ 
  /***
   * Here, the content was successfully loaded, and we can play--show the button! 
   ***/
 }

Try changing that last event handler, let me know if that does it.

26

oncanplay works

Play button changes from Play to Pause
http://hi5.1980s.fm/;

Play button does not change from Play to Pause
when the stream is not valid.
h://hi5.1980s.fm/;

And I put it back to this:

It seems like oncanplay was the only thing that it needed to be changed to.

    button.addEventListener("click", function () {
        if (!canPlay) {
            return;
        }
        if (player.paused) {
            player.play();
            playPauseIcon(true);
        } else {
            player.pause();
            playPauseIcon(false);
        }
    });

Full Code:
https://jsfiddle.net/vhgL96se/132/


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

    function playPauseIcon(play) {
        if (!canPlay) {
            return;
        }
        if (play) {
            button.classList.add("is-playing");
        } else {
            button.classList.remove("is-playing");
        }
    }
    button.addEventListener("click", function () {
        if (!canPlay) {
            return;
        }
        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 () {
        player.src = value.value;
        player.volume = 1.0;
        playPauseIcon(true);
    });
    input.addEventListener("click", function () {
        value.value = "";
        button.classList.remove("is-playing");
        player.pause();
        canPlay = false;
    }, false);
    player.oncanplay = function () {
        if (value.value !== "") {
            canPlay = true;
            playPauseIcon(true);
        }
    };
}());
27

Thank you for helping me figure this out. It turns out, it was just that piece ‘onloadstart’ that needed to be changed in the code to oncanplay.

28

After all that… sigh. Of course, It was a good thing to get familiar with promises too. Just glad it worked out. :wink: