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

Change player text to all audio?

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

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

No, donā€™t change the scripting code at all. That doesnā€™t need to change for the audio problem currently being worked on.

Iā€™m trying to help you to understand what the problem is, so that once you understand it you can take steps to fix the problem.

Currently you seem to misunderstand something, so I am trying to draw out from you information that can help us to correct that misunderstanding.

Why do you think that in the HTML code at https://jsfiddle.net/87serhpf/1/ that the <audio> element is inside of the element called playButton?

1 Like

Without it the audio doesnā€™t play.

I want you to answer the question that Iā€™ve asked of you, because that will lead you to the solution.

Why do you think that in the HTML code at https://jsfiddle.net/87serhpf/1/ that the <audio> element is inside of the element called playButton?

Let me make this easier for you.

Find the HTML <audio> element in the HTML code at https://jsfiddle.net/87serhpf/1/ and also find the element with a classname of ā€œplayButtonā€

You said that the audio element is inside of the playButton element. Why do you think that it is inside?

1 Like

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

What Iā€™m asking you has nothing to do with the JavaScript.

It works now.

It does because you have made the code less efficient, and totally incapable of being used with multiple players.

You still fail to understand what Iā€™ve been trying to help you to understand. Can you please answer this simple question?

You said that the <audio> element is inside of the playButton element. Why do you think that it is inside?

1 Like

Technically itā€™s not. Thereā€™s no div tag behind it.

  <div class="playButton">
    <div class="initial">Links </div>
    <svg class="pause hide" style="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 hide " 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 preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>
1 Like

Thank you. Thatā€™s why button.querySelector wasnā€™t finding the audio element.

Put the code back to button.querySelector, and put the <audio> element inside of the bloody playButton.

Then it will work.

no it wonā€™t.

Why isnā€™t document instead of playButton?
It works like that though?

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


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

My repetition of playButton resulted in an error in the suggested code, which should have been button instead.
Iā€™ve corrected that error in the above post.

From what I see in https://jsfiddle.net/87serhpf/5/ youā€™ve put the <audio> element inside of the wrap, but the <audio> element is still not inside of the playButton element.

When it is, the following code will work:

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

Why document.querySelector is the wrong approach, is that it will always find only the first audio element on the page, which cannot work when you have multiple audio elements.

Move the <audio> element inside of the playButton element, and button.querySelector will be able to properly do its job.

I now must leave, but will return in a while.

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

should be:


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

I didnā€™t get it.

Not like this? Are you sure?

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

Wait a second, itā€™s button, isnā€™t it?

Like this?

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

Basing it off a previous code:

  function playButton(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    var play = button.querySelector(".play2");
    var pause = button.querySelector(".pause2");
    var speaker = button.querySelector(".speaker2");
    button.classList.add("clicked");

If you say this is fine, Iā€™ll start working on the 2nd version.

Now I know itā€™s not fine, so Iā€™m still on this one.

<style>
  .wrap1 {
    position: relative;
    display: table;
    white-space: nowrap;
    background: red;
  }
  
  .initial1 {
    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;
  }
  
  .playButton1.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;
  }
  
  .play1 {
    position: absolute;
    left: 9px;
    top: 5px;
    width: 38px;
    height: 40px;
  }
  
  .pause1 {
    position: absolute;
    left: 7px;
    top: 5px;
    width: 36px;
    height: 40px;
  }
  
  .link1 div {
    margin: 0 0 12px 0;
    height: 50px;
  }
  
  .link1 a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  .hide {
    display: none;
  }
  
  .link1 div:last-child {
    margin-bottom: 0;
  }

</style>

<div class="wrap1">
  <div class="myLink1">
    <div class="link1">

      <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="playButton1">

    <div class="initial1">Links </div>
    <svg class="pause1 hide" 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="play1 hide" 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>


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

<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 = button.querySelector("audio");
      playButton.querySelector(".initial1").classList.add("hide");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play1").classList.add("hide");
        playButton.querySelector(".pause1").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play1").classList.remove("hide");
        playButton.querySelector(".pause1").classList.add("hide");
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

You access the play/pause buttons too many times. Assign them to variables and use those variables instead.

Is this still the case?

What exactly do you mean, Assign them to variables?

Am I supposed to do something regarding what you said here?

I should assign myLink1 to a variable?

Yes, thatā€™s right. From the document comes the button, and from the button comes the player.

You assign something to a variable using the var statement. For example:

var play = button.querySelector(".play");
var pause = button.querySelector(".pause");

That way, you can use play.classList.add(ā€œhideā€) which uses the already-existing reference to the play button, instead of having to search the Document Object Model (DOM) all over again for it.