Two versions of a playButton Binding Audio With a grid link structure

I made a playbutton for it.

<style>
  .playButton {
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    fill: #aaff00;
  }
  
  .playButton.playing {
    background-color: #000000;
  }

</style>

<div class="playButton">

  <svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

</div>

<audio id="player" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
  </source>
</audio>

<script>
(function iife() {
    "use strict";
    function playButtonClickHandler() {
        var button = document.querySelector(".playButton");
        var player = document.querySelector("#player");
        player.volume = 1.0;
        if (player.paused) {
            button.classList.add("playing");
            document.querySelector(".playButton .play").style.display = "none";
            document.querySelector(".playButton .pause").style.display = "inline-block";
            player.play();
        } else {
            button.classList.remove("playing");
            document.querySelector(".playButton .play").style.display = "inline-block";
            document.querySelector(".playButton .pause").style.display = "none";
            player.pause();
        }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

After I do one, I should be able to implement it on the other also.

Playbutton:

I would need to bind it to each of these.

I added the buttons to both jsfiddles.

no-margin

with margin:
https://jsfiddle.net/0yxvpa09/25/

Version 1: Audio initiates after you click on the image
Play, click, audio starts, see pause button.

Version 2: Audio initiates only if you click on the button after the cover screen.
Just a regular play/pause after cover.
cover, click, see play

I was able to do this, but not implemented in the proper way you have set up.

Button no-margin

Button margin

Basing it off of your example, I did something like this but now Iā€™m confused.

Iā€™m going to need to wait till you get back to set this up the proper way.

<script>
  (function iife() {
    "use strict";

    function playButtonClickHandler() {
        var button = document.querySelector(".playButton");
        var player = document.querySelector("#player");
        player.volume = 1.0;
        if (player.paused) {
            button.classList.add("playing");
            document.querySelector(".playButton .play").classList.add("hide");
            document.querySelector(".playButton .pause").classList.remove("hide");
            player.play();
        } else {
            button.classList.remove("playing");
            document.querySelector(".playButton .play").style.display = "inline-block";
            document.querySelector(".playButton .pause").style.display = "none";
            player.pause();
        }
    }



    function playButton(button, player, play, pause) {
        ...
            play.classList.add("hide");
            pause.classList.remove("hide");
        ...
            play.classList.remove("hide");
            pause.classList.add("hide");
        ...
    }


    function playButtonClickHandler() {
        var button = evt.target;
        playButton({
            button: button,
            player: document.querySelector("#player"),
            play: button.querySelector(".play"),
            pause: button.querySelector(".pause")
        });
    }

I havenā€™t looked at any of the code that youā€™ve posted here because I am not in to interpreting chicken gizzards for signs.

Please explain in words what you want to achieve, and give a link to code that is currently not doing what you want to achieve.

2 Likes

I have 2 versions of this code.

1st Version
One where when you click on it, it starts playing right away.

2nd Version
And another where when you click on it, it doesnā€™t start playing right away.

1st Version
Is there anything wrong with how the javascript is set up?

<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink1").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink1").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector(".playButton1 .initial1").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

2nd Version:
Is there anything wrong with how the javascript is set up? And if there is, whatā€™s wrong with it?

<script>
  (function iife() {
    "use strict";

    document.querySelector(".myLink1").classList.add("hide");
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", firstClick);
    var player = document.querySelector("#player1");

    function firstClick() {
      document.querySelector(".myLink1").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      document.querySelector('.playButton1 .initial1').style.display = 'none';
      playButton.addEventListener("click", playButtonClickHandler);
      document.querySelector(".playButton1 .play1").style.display = "inline-block";
      document.querySelector(".playButton1 .pause1").style.display = "none";
      button.classList.add("playing");
    }

    function playButtonClickHandler() {

      player.volume = 1.0;
      if (player.paused) {
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }


  }());

</script>

Please take your CSS code over to the CSS forum.

When you have any questions relating to JavaScript, that then is a good time to post in the JavaScript channel about your code.

I edited the post.

The click handler should have one one or two lines of code in it, handing off control to well-named functions. That helps to give you a better idea of what the code is supposed to do.

Too many class names

  • myLink1 is used twice when assigning it to a variable results in less complexity.
  • playButton1 is used seven times!! Only once is all thatā€™s needed.
  • #player1 doesnā€™t need to be used at all. Put it inside the play button with the SVG code, and you can then more easily find it, and acces sit without needing any unique identifier.
  • You access the pay/pause buttons too many times. Assign them to variables and use those variables instead.

Accessing the DOM is expensive in terms of time for the browser to make the request, so reducing how much the DOM is accessed results in big performance gains.

style.display is bad - stop using it. Use classList.add/remove instead.

With the second code, the above information is all relevant to that code too.

Bad function name. firstClick might tell you what happens, but tells you nothing about what that function is supposed to do. Thatā€™s as bad as using a ā€œredā€ classname, because when the style is changed to be orange instead, you then have a ā€œredā€ class that makes things orange. The function name of showLinks would be much more appropriate than firstClick.

Also, the second code assigns an event listener before the function. The code related to adding the event listener should appear below the function. It is preferable to have the functions grouped together, with all of the other code organised after all of the functions.

1 Like

Letā€™s start with the 1st code:

<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink1").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink1").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector(".playButton1 .initial1").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

We can start with how to do this first.
This will help with all my other codes too.

I donā€™t understand how you do this. You mentioned this in another post too.

Here is how you assign a reference to an HTML element to a variable.

var playButton = document.querySelector(".playButton");

From then on, you can use playButton to refer to that HTML element. For example, to get the <audio> element thatā€™s in the playButton element.

var player = playButton.querySelector("audio");

Like that?

<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink1").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink1").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector(".initial1").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".play1").style.display = "none";
        document.querySelector(".pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".play1").style.display = "inline-block";
        document.querySelector(".pause1").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

Replace
.style.display = "none";

with this
.classList.remove("hide");

Replace
.style.display = "inline-block";

with this
.classList.add("inline-block");

Like what? I am not wasting time investigating and doing a line-by-line comparison with the many versions of your other code today. I am not interpreting signs from chicken gizzards today.

Use your words, and tell me the changes that you made to your code.

1 Like

this

document.querySelector(".playButton1 .initial1").style.display = "none";
document.querySelector(".playButton1 .play1").style.display = "none";
document.querySelector(".playButton1 .pause1").style.display = "inline-block";
document.querySelector(".playButton1 .play1").style.display = "inline-block";
document.querySelector(".playButton1 .pause1").style.display = "none";

to this

document.querySelector(".initial1").style.display = "none";
document.querySelector(".play1").style.display = "none";
document.querySelector(".pause1").style.display = "inline-block";
document.querySelector(".play1").style.display = "inline-block";
document.querySelector(".pause1").style.display = "none";

No, the code still has ā€œdocumentā€ as the base instead of the ā€œ.playButton1ā€ element as the base.

like this?


playButton1.querySelector(".initial1").style.display = "none";
playButton1.querySelector(".play1").style.display = "none";
playButton1.querySelector(".pause1").style.display = "inline-block";
playButton1.querySelector(".play1").style.display = "inline-block";
playButton1.querySelector(".pause1").style.display = "none";

Close, but the base name used needs to be the same as the variable name used to reference what was selected

var playButton = document.querySelector(".playButton1");

That goes in this part?

Iā€™m way confused.



  function playButtonClickHandler() {
      document.querySelector(".myLink1").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector(".initial1").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {