Getting audio players to play their respective streams out of their element


Do I add something like this?

     function playButtonClickHandler(button) {
        var link = upTo(button, ".linkse");


Don't do that. I'm working on a post that takes us through how to do it properly. I'll post what I'm up to, and then carry on from there.


Would go with this?

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


To remove the initial overlay code, we can do what the hideInitialOverlay() function does, and comment it out from the initialOverlayClickHandler() function.

Just commenting out the hideInitialOverlay() function results in the test failing, which is bad, so we need to do what that hideInitialOverlay() function does to return the test back to passing.

The first thing that it does is to remove inactive from the links. We can instead remove the code that adds inactive to the links.


But the test still fails. The next thing is to hide the initial element. We can do that by adding hidee to the initial element in the HTML code.

And the test passes, but the play button isn't visible. We want the code to start by showing the play button, and currently all the tests we have are green and passing, so we need another test that tells us that things are failing.

  it("Starts by showing the play button", function () {
    var playImage = button.querySelector(".playe");

But, that test passes, so that test doesn't help us at all.

Instead, we need to first understand why the play button isn't showing, before we can write a test for what we expect when it is showing.


here look:

the button is broken


Currently we can just add activated to the button and the play button will show, but I want to remove the need for that activated, especially since we haven't even interacted with the button yet.

So instead, activated adds a fill to the play button, and it's that fill that we can look for in the test as well.

    expect(window.getComputedStyle(playImage).fill).toBe("rgb(170, 255, 0)");

Now those are better tests, where the rbg color is what the browser has when the play button is given a color of #aaff00

We can now work on making that test pass, which can temporarily be done by adding the activated class name to the play button.

And the tests all pass.

We still have two refactoring tasks to do though, one is to remove more of the intialOverlay code, and the other is to remove the need for that activated class on the play button.


The hideInitialOverlayButton() function can now be removed, and the tests all pass and the button still works.
The commented line in the initialOverlayClickHandler() function can be removed now too.

We can now change the addEventListener line and replace initialOverlayClickHandler with playButtonClickHandler instead, but that causes the code to fail.

Why does it fail? Because the code was clicking on the button. Remove that click code, and the tests all pass, allowing us to remove more of the initialOverlay code.


The initialOverlayClickHandler() function can be completely removed now, and the commented-out line that added inactive can be removed too. There's no more scripting code that related to the initial overlay, so the "activated" part can be worked on now.

Remove activated from the CSS code, and we continue to have working code:

/* .playButtone.activated { */
.playButtone {

The activated classname can now be removed from the HTML playbutton,

<!-- <div class="playButtone activated" data-audio=";"> -->
<div class="playButtone" data-audio=";">

and the two refactoring tasks that we were doing, of removing initial overlay, and the activated class name, are all now complete.


What if I used this instead?

   function getButtonContainer(el) {
        while (el.classList.contains("playButtone") === false) {
            el = el.parentNode;
        return el;

        function playButtonClickHandler(evt) {
        var button = getButtonContainer(;

Instead of this:

   function upTo(el, selector) {
        while (el.matches(selector) === false) {
            el = el.parentNode;
        return el;

    function playButtonClickHandler(evt) {
        var button = upTo(, ".playButtone");


The function name is more descriptive, so it shouldn't hurt.



How would I get initial to work at the top of the code?

It's not opening when you click on it.

Web console is not telling me anything.


First your post was just:

And then it changed to be:

And then it changed to be:

If you edit your code, you need to be aware that nobody will be notified of the changes that you make, unless they are directly watching the post.

Normally when you make a post there are notifications that go out to everybody that's watching the thread, and emails get sent out too. When you edit your post though to add significant information, you need to be aware that your changes might not be seen by anybody.


I should have written a new reply instead?


You shouldn't be so quick to hit the reply button.


ok, I will remember that.


I should be back in about 5 hours to help further with things.


ok. thank you.


It would take some kind of CSS change to hide the initial image. I recommend that you get the advice of CSS people to find out the CSS changes to get that initial one to work, and whether it means adding another classname to it, or some other technique.


Could I turn initiale into .playButtone?


From this:

  <div class="playButtone" data-audio=";">

    <div class="initiale">

to this:

  <div class="playButtone" data-audio=";">

.playButtone {
  height: 168px;
  background: url("");
  border: 3px solid #0059dd;
  cursor: pointer;

.playButtone p {
  font-family: Tahoma;
  font-weight: 900;
  font-size: 30px;
  color: #0059dd;
  line-height: 40px;
  text-align: center;

.playButtone::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;

.playButtone::after {
  left: 177px;

.playButtone.activated {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border: 3px solid #0059dd;
  fill: #aaff00;