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

JavaScript
1

I want to make 2 versions.

First Version:

After you click the cover. It will start playing music.

This is what you see after you click.

And then you can stop it in the middle or start it again.

Second Version:

This is just a cover, no audio plays after you click it.

After you click on it you’ll see a playbutton in the middle that you can turn on.

This is the code for the cover and grid,
https://jsfiddle.net/0yxvpa09/1/

<style>
      
        .cover {

    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;
  }
      
      
      .links div {
        margin: 0 0 12px 0;
      }
      
      .links a {
        display: block;
        width: 50px;
        height: 50px;
        background-color: green;
        margin: -50px 0 0;
        transition: 0.5s ease-in-out;


      }
      
      a.x1 {
        margin: 0
      }
      
      a.x2 {
        margin-left: 54px
      }
      
      a.x3 {
        margin-left: 108px
      }
      
      a.x4 {
        margin-left: 162px
      }
      
      a.x5 {
        margin-left: 216px
      }
      
      .links a:hover,
      .links a:active,
      .links a:focus {
        background: blue;
      }
      
      .scrl a:visited {
        background: orange;
        color: #000000;
      }
      
      .scrl a:hover {
        background: red;
      }

  .hide {
    display: none;
  }
.links div:last-child{margin-bottom:0;}

    </style>

<div class="cover">Links</div>

<div class="test hide">
    <div class="links">
      <div>
        <a class="x1" href="" target="_blank"></a>
        <a class="x2" href="" target="_blank"></a>
        <a class="x3" href="" target="_blank"></a>
        <a class="x4" href="" target="_blank"></a>
        <a class="x5" href="" target="_blank"></a>
      </div>

      <div>
        <a class="x1" href="" target="_blank"></a>
        <a class="x2" href="" target="_blank"></a>
        
        <a class="x4" href="" target="_blank"></a>
        <a class="x5" href="" target="_blank"></a>
      </div>

      <div>
        <a class="x1" href="" target="_blank"></a>
        <a class="x2" href="" target="_blank"></a>
        <a class="x3" href="" target="_blank"></a>
        <a class="x4" href="" target="_blank"></a>
        <a class="x5" href="" target="_blank"></a>
      </div>
      </div>
      </div>
    
<script>
  (function iife() {
    "use strict";

    function hideClickedElement(evt) {
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".test").classList.remove("hide");
    }
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  }());

</script>

I got this far on the play button if I’m doing it right:
https://jsfiddle.net/0yxvpa09/

<style>
  .playButton {
    width: 260px;
    height: 168px;
    cursor: pointer;
    border: 3px solid #0059dd;
       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");
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton.playing {
    width: 50px;
    height: 50px;
    background: red;
border: none;
  }

.

</style>

<div class="playButton">Links

  <svg class="play" width="39" height="40" style="margin: 2px 284px;" viewbox="5 8 50 56">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path fill="#0059dd" d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"></path>
    <path fill="#0059dd" d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z"></path>

  </svg>

  <svg class="pause" style="display:none;margin: 2px 284px;" width="39" height="40" viewbox="0 -3.4 24 24">
    <path d="M12.086,5.63 C10.705,5.63 9.586,6.748 9.586,8.13 C9.586,9.511 10.705,10.63 12.086,10.63 C13.467,10.63 14.586,9.511 14.586,8.13 C14.586,6.748 13.467,5.63 12.086,5.63"></path>
    <path d="M7.507,14.434 C7.135,14.183 6.787,13.896 6.472,13.58 C6.157,13.266 5.87,12.917 5.618,12.544 C5.367,12.174 5.15,11.775 4.972,11.356 C4.793,10.929 4.655,10.486 4.564,10.038 C4.47,9.579 4.422,9.105 4.422,8.63 C4.422,8.155 4.47,7.68 4.564,7.219 C4.655,6.772 4.793,6.329 4.972,5.905 C5.148,5.489 5.365,5.089 5.618,4.715 C5.868,4.344 6.155,3.996 6.472,3.68 C6.791,3.361 7.14,3.073 7.509,2.824 L8.625,4.485 C8.363,4.66 8.114,4.866 7.886,5.094 C7.66,5.32 7.454,5.57 7.275,5.834 C7.094,6.102 6.94,6.387 6.814,6.684 C6.687,6.986 6.589,7.301 6.524,7.619 C6.456,7.95 6.422,8.289 6.422,8.63 C6.422,8.97 6.456,9.309 6.524,9.638 C6.589,9.958 6.687,10.274 6.814,10.578 C6.941,10.874 7.095,11.159 7.274,11.423 C7.456,11.692 7.661,11.941 7.886,12.166 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434"></path>
    <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751"></path>
    <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434"></path>
    <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751"></path>
    <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z"></path>
  </svg>

</div>


<audio id="player" preload="none" style="display:none;">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</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 = "none";
            player.play();
        } else {
            button.classList.remove("playing");
            document.querySelector(".playButton .play").style.display = "none";
            document.querySelector(".playButton .pause").style.display = "none";
            player.pause();
        }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
}());

</script>
2

First off, when you have to out a class on every single element (such as every single anchor) then you know that you’re doing something wrong.

What you’re doing there can be easily done without using any classes on the links at all.

Set the anchor display to inline-block instead of block, because you want to affect their width and height but also keep them in the same line.
Remove the negative margin from those anchors, just remove the margin itself.
And remove the CSS a.x1 through to a.x5 styles

It all looks good after that tidy up, and the class names can be removed from those links.
Like leaving stuff scattered all over the floor, it becomes a detrimental distraction and needs to be cleaned up.

The center spot is where you can place another link with a class name, that gives it a white background instead of green, and gives you the good ability to put the play pause controls. "controls" seems like a good name for that class, until something better comes to mind.

1 Like
3

I just did this before I read what you wrote.

<style>
      
        .cover {

    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;
  }
      
      
      .links div {
        margin: 0 0 12px 0;
      }
      
      .links a {
        display: block;
        width: 50px;
        height: 50px;
        background-color: green;
        margin: -50px 0 0;
        transition: 0.5s ease-in-out;


      }
      
      a.x1 {
        margin: 0
      }
      
      a.x2 {
        margin-left: 54px
      }
      
      a.x3{
        margin-left: 108px
      }
      
      a.x4 {
        margin-left: 162px
      }
      
      a.x5 {
        margin-left: 216px
      }
      
      .links a:hover,
      .links a:active,
      .links a:focus {
        background: blue;
      }
      
      .scrl a:visited {
        background: orange;
        color: #000000;
      }
      
      .scrl a:hover {
        background: red;
      }

  .hide {
    display: none;
  }
.links div:last-child{margin-bottom:0;}


  .playButton {
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: red;

margin: -112px 0 0 108px;
  }
  



    </style>

<div class="cover">Links</div>

<div class="test hide">
    <div class="links">
      <div>
        <a class="x1" href="" target="_blank"></a>
        <a class="x2" href="" target="_blank"></a>
        <a class="x3" href="" target="_blank"></a>
        <a class="x4" href="" target="_blank"></a>
        <a class="x5" href="" target="_blank"></a>
      </div>

      <div>
        <a class="x1" href="" target="_blank"></a>
        <a class="x2" href="" target="_blank"></a>

        <a class="x4" href="" target="_blank"></a>
        <a class="x5" href="" target="_blank"></a>
      </div>

      <div>
        <a class="x1" href="" target="_blank"></a>
        <a class="x2" href="" target="_blank"></a>
        <a class="x3" href="" target="_blank"></a>
        <a class="x4" href="" target="_blank"></a>
        <a class="x5" href="" target="_blank"></a>
      </div>
      </div>
      </div>


<div class="playButton"></div>



    
<script>
  (function iife() {
    "use strict";
    function hideClickedElement(evt) {
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".test").classList.remove("hide");
    }
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  }());

</script>






<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.add("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>
4 
 .cover {
display:inline-block;
5

How can they?

class names can be removed from those links.

Then they will all get messed up.

6

I’m not wasting my time trying to hunt down differences between different versions of your code.
Please explain in words if you can.

7

How can they what?

They didn’t get all messed up in the test version that I created.

8

What you’re doing there can be easily done without using any classes on the links at all.

How?

9

I explained it all in post #2

If you failed to read it, then it’s there for your reference.

10 
  .links a {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: green;
        margin: -50px 0 0;
        transition: 0.5s ease-in-out;
11
12

Done:

13

How do you enable

white-space: nowrap;?

14

Why would that help?

15

How do you prevent it from wrapping?

16

It looks like you have a really narrow screen.

17

When you move the sidebar to the right that happens, with margin it doesn’t happen.

18

When you speak of sidebar, are you speaking of the jsfiddle division between the HTML/JavaScript code on one side, and the CSS and Display on the other?

19

This worked.

Good or not?

 .preventWrapping { white-space: nowrap; }

<div class="preventWrapping">
</div>
20

If it’s solving a problem that only occurs only jsfiddle when messing with the center bar, and won’t occur elsewhere such as on blogger, then it’s not a good thing.

1 Like