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

Both of them?


    </svg>
  </div>


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

The audio is now working.

That </div> below the audio is the end of the links element. The </div> above the audio is the playButton element. The end of the playButton div needs to be below the audio code.

Both div need to be below audio?

It doesnā€™t work with just 1 div underneath:

Currently the code is similar to this:

<div class="links">
    <div class="playButton">
        ...
    </div>
    <audio>
        ...
    </audio>
</div>

Youā€™ll see that the audio stuff is outside of the playButton element. It needs to be inside of it.
You can achieve that by cutting out the audio code, and pasting it above the play buttonā€™s closing div.

<div class="links">
    <div class="playButton">
        ...
        <audio>
            ...
        </audio>
    </div>
</div>

Done:

Whatā€™s next?

Links float: .style working version:

That float version uses a confusing stylename, because ā€œhideā€ is supposed to mean that everything is hidden, but the links one uses ā€œhideā€ to say that only the links will be hidden, not the play button.

To remain consistent, we should rename that to ā€œinactiveā€ instead, so that when ā€œinactiveā€ is removed from the links, the links will show.

Does that make sense?

Why are you attempting to convert non-working code to something that works, when you already have working code?

What are you wanting to achieve here?

So the style one looks like this?

Good one, I have it working with a few simple changes.

One is to add an ā€œinactiveā€ class to the links element, along with a CSS style declaration so that the anchor links are hidden.
Two is to add another CSS declaration so that the ā€œhideā€ class name successfully hides things.

That gets it looking good before you interact with it.

And three is to use scripting code to remove that ā€œinactiveā€ class from the links element when you click on it, so it looks good when itā€™s playing.

Wait a second:

Can I get it working like this?

I based it off of this:
Links float: .style working version:

That one doesnā€™t seem to work.

What else would I need to do to this

To be able to use this?


       hide(play);
        show(pause);
        player.play();
      } else {
        show(play);
        hide(pause);
        player.pause();
      }
    }

And I need to do something about this too I think.


  
  .links.hide a,
  .play {
    display: none;
  }

What is it with the https://jsfiddle.net/qL7dujbu/6/ code that you want to get working on the https://jsfiddle.net/cubphcqd/53/ code?

Look at:
#730

Are you just going to leave https://jsfiddle.net/cubphcqd/53/ unfinished when itā€™s so close to working?

This one is already working:

And so is https://jsfiddle.net/cubphcqd/53/ with much better code, once a few CSS fixes have occurred.

Weā€™ll do both since both are very close to being done.

One using upto

the other

getplaybutton.

getting the short syntaxes to work


We can finish up upto now:

With https://jsfiddle.net/cubphcqd/53/ we want the anchor links to not be shown when the page first opens.

We can achieve that by changing the document.querySelector line so that it adds ā€œinactiveā€ instead of ā€œhideā€

Why inactive? Because we separately need the ā€œhideā€ class for the show/hide stuff to work.

The CSS declaration to add to the CSS panel for that is:

.hide, .links.inactive a {
    display: none;
}