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


#85

While that's better, there's no need for the individual numbers on the class names, and most of those class names can be removed too.

Any CSS developer seeing those numbered class names will want to strangle you, because your techniques are extremely terrible, even if you don't know that they are terrible.


#86

That's already in the code.

var playButton = document.querySelector(".playButton1");
playButton.addEventListener("click", playButtonClickHandler);

}());


#87

If I'm going to have multiple audio codes on the same page, they all can't say playButton, unless you're telling me they can?

How will they all be able to differentiate themselves from other players on the page?

After I do this right, I'll use the same technique in others.


#88

playButton.querySelector(".initial").classList.remove("hide");
playButton.querySelector(".play").classList.remove("hide");
playButton.querySelector(".pause").classList.add("inline-block");
playButton.querySelector(".play").classList.add("inline-block");
playButton.querySelector(".pause").classList.remove("hide);

#89

  (function iife() {
    "use strict";
    playButton.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      playButton.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      playButtonquerySelector(".initial").classList.remove("hide");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play").classList.remove("hide");
        playButton.querySelector(".pause").classList.add("inline-block");
        player.play();
      } else {
        playButton.querySelector(".play").classList.add("inline-block");
        playButton.querySelector(".pause").classList.remove("hide);
        player.pause();
      }
    }
    var playButton = playButton.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

#90

(function iife() {
    "use strict";
    document.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = playButton.querySelector("#player");
      playButtonquerySelector(".initial").classList.remove("hide");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play").classList.remove("hide");
        playButton.querySelector(".pause").classList.add("inline-block");
        player.play();
      } else {
        playButton.querySelector(".play").classList.add("inline-block");
        playButton.querySelector(".pause").classList.remove("hide);
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

#91

It should only be used once?

   document.querySelector(".myLink1").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink1").classList.remove("hide");

#92

This is what I have so far. I also removed the numbers as you suggested.
https://jsfiddle.net/7ourwfrg/4/

<style>
  .wrap {
    position: relative;
    display: table;
    white-space: nowrap;
    background: red;
  }
  
  .initial {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-Shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
  }
  
  .link div {
    margin: 0 0 12px 0;
    height: 50px;
  }
  
  .link a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  .hide,
  .play1 {
    display: none;
  }
  
  .link div:last-child {
    margin-bottom: 0;
  }

</style>


<div class="wrap">
  <div class="myLink">
    <div class="link">

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>
    </div>
  </div>


  <div class="playButton">
    <div class="initial">Links</div>
    <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>

    <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>
  </div>
</div>


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

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

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = playButton.querySelector("#player");
      playButtonquerySelector(".initial").classList.remove("hide");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play").classList.remove("hide");
        playButton.querySelector(".pause").classList.add("inline-block");
        player.play();
      } else {
        playButton.querySelector(".play").classList.add("inline-block");
        playButton.querySelector(".pause").classList.remove("hide);
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

#93

 document.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = playButton.querySelector("#player");
      playButtonquerySelector(".initial").classList.add("hide");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play").classList.add("hide");
        playButton.querySelector(".pause").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play").classList.remove("hide");
        playButton.querySelector(".pause").classList.add("hide");
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

#94

And you said to remove #player out of there.

Put it inside the play button with the SVG code, and you can then more easily find it, and acces it without needing any unique identifier.


#95

I leave that the way it is?

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

#96

What do you mean by this?


#97

What I mean, is to move the positioning of the <audio> element so that it is contained by the play button, in the same way that the SVG elements are contained by the play button.


#98

You won't need the id there anymore, because you can retrieve it instead with:

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

Which retrieves a reference to the <audio> element that's inside of the play button.


#99
  Does this become audio? Or remove altogether?

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

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



 document.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      playButtonquerySelector(".initial").classList.add("hide");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play").classList.add("hide");
        playButton.querySelector(".pause").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play").classList.remove("hide");
        playButton.querySelector(".pause").classList.add("hide");
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

#100

Your questions don't seem to make much sense. Can you please provide further detail about your questions?


#101

Do I delete this whole line?
var player = playButton.querySelector("#player");

 function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = playButton.querySelector("#player");
      playButtonquerySelector(".initial").classList.add("hide");

#102

When you adjust your HTML code to move the audio element within the play button, you should also adjust the code that retrieves the audio element. When it's inside of the play button you can remove the id and class names from the audio element.


#103

Will this become audio, or do I remove the line?

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

Then this changes from player to audio then.


#104

It already is audio. You can tell that it is audio because it has "audio" in the double quotes. :banghead: