If I were to put 2 of these on a page, it would look like


#41

Adjusted, but in the same style/cosmetic structure. Maybe that's a better way to put it.


#42

Real fast, do you know what I did wrong here?
https://jsfiddle.net/j9anqqak/5/

<style>
  .playButton2 {
    margin-top: 8px;
    width: 266px;
    height: 266px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
    background-repeat: no-repeat;
    box-sizing: border-box;
    border: 3px solid #0059dd;
  }
  
  .playButton2.playing {
    border: 3px solid #e77d19;
    background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
    background-color: transparent;
    background-repeat: no-repeat;
  }
  
  .initial {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
    margin: 76px 85px;
  }
  
  .pause {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
    margin: 76px 85px;
    display: none;
  }
  
  .play {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
    display: none;
  }
  
  .speaker {
    margin: 94px 100px;
    display: none;
  }

</style>

<div class="playButton2">

  <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " 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" width="90" height="108" viewbox="-13 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" 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="speaker" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="play" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " 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>

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

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

    function playButtonClickHandler() {
      var button = document.querySelector("playButton2");
      var player = document.querySelector("#player2");
      document.querySelector(".playButton2 .initial").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton2 .play").style.display = "none";
        document.querySelector(".playButton2 .pause").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton2 .pause").style.display = "none";
        document.querySelector(".playButton2 .play").style.display = "inline-block";
        player.pause();
      }
      " onmouseover="
      var player = document.querySelector("#player2");
      player.isPlaying = function() {
        return player.paused === false;
      }
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .speaker").style.display = "none";
        document.querySelector(".playButton2 .pause").style.display = "inline-block";
      }
      " onmouseout="
      var player = document.querySelector("#player2");
      player.isPlaying = function() {
        return player.paused === false;
      }
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .pause").style.display = "none";
        document.querySelector(".playButton2 .speaker").style.display = "inline-block";
      }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

#43

The button variable isn't able to find the element that querySelector is trying to find.


#44

What you mean is, instead of having 3 individual scripts of these, only 1?

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

</script>

#45

This CSS and Scripting code is a lot closer to how it should be.
https://jsfiddle.net/muek65ss/6/


#46

That's what I said. "That way, the one playButton function will be able to work on all of the players."

In the case of the code at https://jsfiddle.net/muek65ss/6/ it seems more appropriate to have named the function togglePlayer instead.

    function togglePlayer(button) {
      var player = button.querySelector("audio");
      player.volume = 1.0;
      if (player.paused) {
        button.querySelector(".pause").classList.remove("hide");
        button.querySelector(".play ").classList.add("hide");
        player.play();
      } else {
        button.querySelector(".pause").classList.add("hide");
        button.querySelector(".play ").classList.remove("hide");
        player.pause();
      }
    }

#47

How come in the classes, each one needs to have inline-block, why not only the main one?


#48

The display property is a CSS properties that is not inherited by its children.


#49

Can it be set up to?


#50

If browsers did that then it would break the internet.

An alternative is to place common things in a css declaration so that things only need to specified once.

For example at https://jsfiddle.net/muek65ss/8/

  .playButtons, .playButtons div {
    display: inline-block;
  }

#51

foreach doesn't work in internet explorer, what would be an alternative, or I guess I just won't care about that.


#52

It looks like you haven't yet read my post #36 with a solution for Internet Explorer.


#53

I was not able to figure this one out. Can you provide more info on what needs to be done?


#54

I tried, it doesn't work in there.

But the inline-javascript version works in internet explorer:
https://jsfiddle.net/44n7650c/6/

Maybe maybe it can be converted to javascript a different way then.

inline is below.

<style>
  .playButton3 {
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color: #000000;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
    margin-top:8px;
  }
  
  .playButton3.svoefm svg {
    fill: #aaff00;
  }
  
  .playButton3.soundpark svg {
    fill: #ffaa00;
  }
  
  .playButton3.cavoparadisoclub svg {
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton3 svoefm" style="width: 83px; border-left: 3px solid #0059dd;" onclick="playButton3(event)">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" 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:15px 37px;" width="10" height="14" 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>


    <audio preload="none" style="display:none;">
      <source src='http://163.172.187.253:8081/radio/svoefm/icecast.audio' type='audio/mpeg' />

    </source></audio>
  </div>
  <div class="playButton3 soundpark" style="width: 88px; border-left: 3px solid #0059dd;border-right: 3px solid #0059dd;" onclick="playButton3(event)">

    <svg class="play" style="margin:15px 39px;" width="12" height="14" 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:15px 40px;" width="10" height="14" 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>


    <audio preload="none" style="display:none;">
      <source src='http://163.172.187.253:8081/radio/soundeep/icecast.audio' type='audio/mpeg' />

    </source></audio>
  </div>
  <div class="playButton3 cavoparadisoclub" style="width: 83px;border-right: 3px solid #0059dd; " onclick="playButton3(event)">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" 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:15px 37px;" width="10" height="14" 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>


    <audio preload="none" style="display:none;">
      <source src='http://s5.onweb.gr:8488/;' />

    </source></audio>
  </div>
</div>
<script>
  function getButton(el) {
    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
      el = el.parentNode;
    }
    return el;
  }

  function playButton3(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    button.classList.add("clicked");
    player.volume = 1.0;

    if (player.paused) {
      play.style.display = "none";
      pause.style.display = "inline-block";
      player.play();
    } else {
      play.style.display = "inline-block";
      pause.style.display = "none";
      player.pause();
    }
  }

  function showPause(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      button.querySelector(".pause").style.display = "inline-block";
    }
  }

  function showSpeaker(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      button.querySelector(".pause").style.display = "none";
    }
  }

</script>

#55

You know what you need to give me from here.


#56

https://jsfiddle.net/muek65ss/13/


#57

You haven't yet added the forEach polyfill to that code.


#58

How do I get the button variable to find the element that querySelector is trying to find?


#59

Which code are you working with now?


#60

This one please.
https://jsfiddle.net/j9anqqak/5/