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


#1186

Did I fix it here:
});
());


#1187

broken:
https://jsfiddle.net/Lu6k4c9c/10/

What's web console telling you?


#1188

There are no more syntax errors in the code, which is progress.

The audio works, but the visual display doesn't, which is all due to what you have done in the showButton() function.

    function showButton(button, playing) {
      if (playing) {
        showPlayButton(button);
      } else {
        showPauseButton(button);
      }
    }

The second parameter needs to be opts, and the condition must be opts.playing instead.


#1189

Is that everything?
https://jsfiddle.net/Lu6k4c9c/15/


#1190

Yes, an extremely simple process has just been achieved. That seems to be everything.


#1191

You'll find that most of the good programming techniques are all simple tasks and processes, because that's what has been found to be reliable, and it's easy to achieve.


#1192

I was just looking for information about refactoring JavaScript to pass on to you, and unsettlingly I keep on finding my own article that I wrote last year about JavaScript refactoring techniques.

There is a good book about it, called Refactoring JavaScript which can be legally read free as a PDF file.

More detailed material can be found at 7 patterns to refactor JavaScript applications but that's getting into trickier code.

But mostly, good benefit is gained from browing the refactoring techniques website, for the information there is valid across most programming languages.


#1193

Did I do this one right?

2nd Version:
https://jsfiddle.net/Lu6k4c9c/25/

  function manageAudio(player, opts) {
      if (opts.playing) {
        pauseAudio(player);
      } else {
        playAudio(player, opts.src);
      }
    }


      manageAudio(player, {
      src: button.getAttribute("data-audio"),
        playing
      });
    }

#1194

The src: line needs to be indented by two spaces, which I suspect will be automatically fixed the next time that you use the Tidy button, but other than that it looks right.


#1195

100.12
'pauseAudio' is out of scope.
pauseAudio(player);

1st Version:
https://jsfiddle.net/Lu6k4c9c/17/

2nd Version:
https://jsfiddle.net/Lu6k4c9c/25/


#1196

This fixed it:

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player);
        }
    }

#1197

I added audio delay to this code, but how do I fix it?
https://jsfiddle.net/Lu6k4c9c/40/

Web console isn't telling me anything.


#1198

Whenever you click on the button, the showButton() function is being run twice. It should only be run once.
Why is it being run twice? It's because the playButton() function is being run twice.

The playButtonClickHandler() function is where you'll find where you messed up.


#1199

Fixed:
https://jsfiddle.net/Lu6k4c9c/45/


#1200

My 2nd question is, how would I enable delay, only on first click?
https://jsfiddle.net/Lu6k4c9c/45/

So, there would only be a delay only when you click on it the first time. If you click on it again, it would pause, then when you click on it again,

there would be no delay.


#1201

The initialOverlayClickHandler() function is where you would need to make that change, by removing the last line that calls the playButtonClickHandler() function, and replacing it with the delayBeforeAudio code from the playButtonClickHandler() function instead.


#1202

Remove this?
playButtonClickHandler(evt);

  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

#1203

Yes. You have all the details of what needs to be done there,

I should be able to help further about 10 hours from now.


#1204

I think got it.

https://jsfiddle.net/Lu6k4c9c/64/

    function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    playButton(button);
  }

function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    var delayBeforeAudio = 1500;
    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButton(button, delayBeforeAudio);
  }

#1206

Click on the first player, then the 2nd player.

https://jsfiddle.net/19htLogp/1/

Audio from the 1st player doesn't stop.

How do I fix that?