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

I don’t think that would be possible, thought I’d ask.

Only because, playButtone is not used in the CSS at all.

Is there any way I can make use of

.playButtone inside the CSS?

My 2nd question is,

How come no audio is playing when I click on the buttons.

I can’t seen to figure it out.

player is null

You have no audio player. Add one.

I do though, in the code it’s in there.

You don’t see it?

data-audio="http://getradio.me/svoefm">

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

If I’m not mistaken, I think Paul is referring to your HTML, not your JavaScript.

2 Likes

I don’t get it, what’s missing?

<div class="playButtonsc">

  <div class="playButtonc svoefm" data-audio="http://getradio.me/svoefm">
    <svg class="playc" focusable="false" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" width="10" focusable="false" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>
  </div>

  <div class="playButtonc soundpark" data-audio="http://getradio.me/spdeep">
    <svg class="playc" focusable="false" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" focusable="false" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>
  </div>

  <div class="playButtonc cavoparadisoclub" data-audio="http://s5.onweb.gr:8488/;">
    <svg class="playc" focusable="false" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" focusable="false" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>
  </div>
</div>
<audio>
</audio>

I believe that I mentioned earlier, that keeping the <audio> element at the top of the HTML code makes it easy to tell if anything’s wrong such as for example, if its gone missing.

2 Likes

Do you have an answer for this?

#1308

Can you please explain further what you want to do and why?

Can I replace initial or links with .playButtone?

Do you want playButtone to be the top-level element under which all of the other things like initial and links and buttons are put?

if not, why are you wanting to replace initial or links?

Can that be done?

I’ve mentioned three things. About which one are you asking can be done?

This one:

Do you want playButtone to be the top-level element under which all of the other things like initial and links and buttons are put?

You already have many buttons that use that technique.

All of them, but not on this type of code.