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

[asasass]

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

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

[asasass]

Is there any way I can make use of

.playButtone inside the CSS?
https://jsfiddle.net/tavcvcu6/44/

[asasass]

My 2nd question is,

How come no audio is playing when I click on the buttons.
https://jsfiddle.net/t4kpkgr0/143/

I can't seen to figure it out.

player is null

[Paul_Wilkins]

player is null

You have no audio player. Add one.

[asasass]

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

You don't see it?

[asasass]

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

[chrisofarabia]

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

[asasass]

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>

[asasass]

<audio>
</audio>

https://jsfiddle.net/t4kpkgr0/155/

[Paul_Wilkins]

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.

[asasass]

Do you have an answer for this?

#1308

[Paul_Wilkins]

Do you have an answer for this?

#1308

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

[asasass]

Can I replace initial or links with .playButtone?

https://jsfiddle.net/tavcvcu6/44/

[Paul_Wilkins]

Can I replace initial or links with .playButtone?

https://jsfiddle.net/tavcvcu6/44/

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?

[Paul_Wilkins]

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

[asasass]

Can that be done?

[Paul_Wilkins]

Can that be done?

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

[asasass]

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?

[Paul_Wilkins]

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.

[asasass]

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