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

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

What exactly do you mean?

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.

1 Like

This issue needs to be fixed first:

The delay doesn’t work with other players.

What issue?

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.

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.

1 Like

I removed delay

Version 1: Two arguments

Version 2: Three arguments

Do you have a question?

Without delay, which code do I stick with?

Version 1: Two arguments

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

Version 2: Three arguments


  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);
    }
  }

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

1 Like

This:

Version 1: Two arguments

  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

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

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

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.

1 Like

Which one do you like better?

Version 1:

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

Version 2:

  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);
    }
  }

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

What does that mean?

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

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

Like this?

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