If I wanted the audio to start playing first, what would I adjust?

JavaScript
1

Code

  (function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");

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

    function hideAllButtons(button) {
      button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
    }

    function getPlay(button) {
      return button.querySelector(".play");
    }

    function getPause(button) {
      return button.querySelector(".pause");
    }

    function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
    }

    function isPlaying(button) {
      const play = getPlay(button);
      return play.classList.contains("hide");
    }

    function pauseAllButtons() {
      const buttons = document.querySelectorAll(".playButton");
      buttons.forEach(function hidePause(button) {
        if (isPlaying(button)) {
          showPlayButton(button);
        }
      });
    }

    function showPauseButton(button) {
      const pause = getPause(button);
      pauseAllButtons();
      hideAllButtons(button);
      show(pause);
    }

    function getAudio() {
      return document.querySelector("audio");
    }

    function playAudio(player, src) {
      player.volume = 1.0;
      if (player.getAttribute("src") !== src) {
        player.setAttribute("src", src);
      }
      player.play();
    }

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

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

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

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

    function playButtonClickHandler(evt) {
      const button = getButtonContainer(evt.target);
      togglePlayButton(button);
    }

    function initButton(selector) {
      const wrapper = document.querySelector(selector);
      wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
  }());
2

For the audio to start playing first while the play button is still showing is a bad user interface design.
For the audio to start playing first with the pause button showing instead, is a bad user experience.

Are you wanting to do something different than those, that would not be bad for the user?

1 Like
3

All my audio codes are written one way, I have no idea how the other way would be written.

I just wanted to know how it would be written. And I know if it’s used, google chrome is going to block that functionality anyway.

It’s good to know and see how codes can be written.

I only know how it’s written one way, and not the other.

4

This would be an acceptable way of it working, where the user is expecting to hear sound.

<a href="https://jsfiddle.net/pezuLqvo/73/" target="_blank">Play Some Music</a>

Is it just a piece of code I would add, or remove, or is there more to it than that?


  (function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");

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

    function hideAllButtons(button) {
      button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
    }

    function getPlay(button) {
      return button.querySelector(".play");
    }

    function getPause(button) {
      return button.querySelector(".pause");
    }

    function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
    }

    function isPlaying(button) {
      const play = getPlay(button);
      return play.classList.contains("hide");
    }

    function pauseAllButtons() {
      const buttons = document.querySelectorAll(".playButton");
      buttons.forEach(function hidePause(button) {
        if (isPlaying(button)) {
          showPlayButton(button);
        }
      });
    }

    function showPauseButton(button) {
      const pause = getPause(button);
      pauseAllButtons();
      hideAllButtons(button);
      show(pause);
    }

    function getAudio() {
      return document.querySelector("audio");
    }

    function playAudio(player, src) {
      player.volume = 1.0;
      if (player.getAttribute("src") !== src) {
        player.setAttribute("src", src);
      }
      player.play();
    }

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

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

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

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

    function playButtonClickHandler(evt) {
      const button = getButtonContainer(evt.target);
      togglePlayButton(button);
    }

    function initButton(selector) {
      const wrapper = document.querySelector(selector);
      wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
  }());

I tried reversing these:

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

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

To this, but that didn’t work:
https://jsfiddle.net/pezuLqvo/76/

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

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

That differs quite strongly from playing the audio first.
Can you explain more clearly what you require?

6

How, isn’t it the same thing?

Like with auto play with the youtube.
<a href="https://jsfiddle.net/pezuLqvo/73/" target="_blank">Play Some Music</a>

7

Because that doesn’t start playing first. It waits for the user to indicate that they want it to play. That is how it’s not the same thing as what you asked.

8

Click on this one:
Play Some Music 2
https://testblogerlayout.blogspot.com/

When you click on the 2nd link it starts playing inside chrome, which is acceptable.


<a href="https://jsfiddle.net/pezuLqvo/73/" target="_blank">Play Some Music</a>

<br>
<br>

<a href="https://testblogerlayout.blogspot.com/" target="_blank">Play Some Music 2</a>

Getting this one to work like that:

How would I get this one to start playing music.

9

From the first link above, both links on that page open a new browser tab window for me, on my tablet at the moment.

1 Like
10

Which one does the audio start right away?

This one:

<a href="https://testblogerlayout.blogspot.com/" target="_blank">Play Some Music 2</a>

How would I get the audio to start on this one:

1 Like
11

None of them have the audio start right away.

2 Likes
12

When I click on this link it starts right up inside chrome:
<a href="https://testblogerlayout.blogspot.com/" target="_blank">Play Some Music 2</a>

Could it be because I’m on a desktop?

Different settings for tablets and mobile devices.

797×420 18.2 KB

13

It might be. Your experience with your browser on your computer can differ widely from the experience of other people.

It’s not for nothing that it’s said, “front end development is the most hostile development environment in the world”

2 Likes
14

Does this one start up right away after the image is clicked?
https://testblog56frt5.blogspot.com/

15

It goes black with green lines for a few seconds.
Then white with green lines for a few seconds.
Then black with green lines for a second.
Then the YouTube player shows, not playing.

Clicking on the YouTube player shows black with green lines for six seconds, then the start image of the video shows for three more seconds, before it starts playing,

1 Like
16

Which is how that is supposed to work.

That one uses load player.

Maybe to have it work across all platforms, there would need to be an image over the YouTube.

Then I think I’m going to just leave this other audio stuff alone in this thread until further notice.

17

It never pauses though, or stops playing, is that a better way to put it?

18

For six seconds, that’s long, how can that be?

That doesn’t make sense.

19

I put in the wrong code:

Try it again:

This one is using the api, the other code wasn’t.

Any difference?
https://testblog56frt5.blogspot.com/

20

Wireless on tablet with not so good internet at the community centre, is the reality of what I’m dealing with here. Sometimes slow and crappy occurs.

1 Like