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


#905

That would completely fail when the code runs with other buttons.


#906

What exactly do you mean?


#907

The whole purpose of passing in the src, is so that the code can be used on a variety of different play buttons. That's why the button has the information as a data-audio attribute on the play button itself.


#908

This issue needs to be fixed first:
https://jsfiddle.net/zfs5qqq9/258/

The delay doesn't work with other players.


#909

What issue?


#910

A bunch of different issues I might not even use it now.

The delay is an issue....

But, what we just did, I can incorporate into my other players.


#911

I am confident in saying that all of those issues won't occur, when only one set of code is used to control all of the buttons.


#912

I removed delay

Version 1: Two arguments
https://jsfiddle.net/6ts492f6/383/

Version 2: Three arguments
https://jsfiddle.net/6ts492f6/392/


#913

Do you have a question?


#914

Without delay, which code do I stick with?

Version 1: Two arguments
https://jsfiddle.net/6ts492f6/383/

  function playButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
    showButton(button, playing);
    manageAudio(player, playing);
  }

Version 2: Three arguments
https://jsfiddle.net/6ts492f6/392/

  function playButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
    var src = button.getAttribute("data-audio");
    showButton(button, playing);
    manageAudio(player, playing, src);
  }

Or do I stick with this one?
https://jsfiddle.net/6ts492f6/396/

 function playButton(button) {
    var player = getAudio();
    if (isPlaying(button)) {
      showPlayButton(button);
      pauseAudio(player);
    } else {
      showPauseButton(button);
      playAudio(player, button);
    }
  }

#915

Less function parameters are better, when it doesn't come at the expense of flexibility.


#916

This:

Version 1: Two arguments
https://jsfiddle.net/6ts492f6/383/

  function playButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
    showButton(button, playing);
    manageAudio(player, playing);
  }

Would be better than this?

Version 2: Three arguments
https://jsfiddle.net/6ts492f6/392/

  function playButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
    var src = button.getAttribute("data-audio");
    showButton(button, playing);
    manageAudio(player, playing, src);
  }

#917

Two arguments are not better than three when it comes at the expense of flexibility of the code.


#918

Also, there is the matter of "separation of concerns" that must be considered when it comes to functions. It's not good when a function deals with more than one concern. The audio functions should not deal with concerns about the button, for example.


#919

Which one do you like better?

Version 1:
https://jsfiddle.net/6ts492f6/383/

  function playButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
    showButton(button, playing);
    manageAudio(player, playing);
  }

Version 2:
https://jsfiddle.net/6ts492f6/392/

  function playButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
    var src = button.getAttribute("data-audio");
    showButton(button, playing);
    manageAudio(player, playing, src);
  }

Version 3:
https://jsfiddle.net/6ts492f6/396/

 function playButton(button) {
    var player = getAudio();
    if (isPlaying(button)) {
      showPlayButton(button);
      pauseAudio(player);
    } else {
      showPauseButton(button);
      playAudio(player, button);
    }
  }

#920

None of them. I prefer passing in configurable information as an opts object.


#921

What does that mean?


#922

That means, I prefer the code from post #897 instead.


#923

How do you use that when there are only 2 arguments?


#924

Like this?

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