Multiple audio players on blogger

Works Here:

Works Here too.
https://testing45435.blogspot.com/

What exactly is the issue?

And I placed the CSS in the CSS section on Blogger.

Get them working together first on jsfiddle to more easily deal with any issues, and then put them together on blogger.

These are together

I placed the same exact code on blogger.

Oh hell no, you’ve alphabetically named the class names.

I’m going no further with this one until they both use the same well-named class names.

That’s fine, when I get it working, I’ll let you know. If I can’t, we’ll do it your way.

False alarm, tried it again and got it this time.
https://testing45435.blogspot.com/

As you implement playButtonc, playButtond, playButtone, playButtonf, playButtong and so on, you will end up duplicating everything.

There are much easier and efficient solutions than duplication all of your work.

When I have them all up, then we can try your way.

Here you go:
https://testing45435.blogspot.com/

A

B
https://jsfiddle.net/mntrmfsb/1/

C
https://jsfiddle.net/xfeo5wfo/3/

D
https://jsfiddle.net/nox5btmd/

E
https://jsfiddle.net/9d03h1hk/

F
https://jsfiddle.net/uuz2gyb2/

When those have played and are paused, they still all continue downloading while they are paused.

I don’t think that there is any way to stop them downloading the audio streams after they’ve been started either.

On the browser, when you turn it on, the audio sign appears, then when you shut it off it disappears.

And preload is set to none on all of them.

You are watching the visual interface that you have programmed with JavaScript. That has nothing to do with how the <audio> element behaves in the web browser.

That prevents them from downloading until they start playing. Once they start though, they cannot be stopped. Playback of the audio can be paused, but each audio player carries on downloading while they are paused.

And this is an issue because?

Do you want people to try them each out, and after they’ve paused them all, to find that they still have eight different audio streams all still downloading at the same time, without end?

Is there a solution?

And won’t it end after they leave my page, or close their browser?

You want to encourage them to leave the your page or close their browser? That’s bad for you.

Yes there is a solution. Use just the one audio player, and configure it for a different stream when something is played.
That way everything else stops too, when something else is played.

1 Like

How do you do that?

Instead of having the audio inside of the play button, you have just the one audio outside of the play buttons.
Each play button can have some data such as: data-audio="http://hi5.1980s.fm/;" which can be used to configure the audio player when you start playing.

How would you add that to this?


<audio preload="none">
    <source src="http://hi5.1980s.fm/;" type="audio/mpeg">

  </audio>
</div>

When the click handler is triggered, it would:

  • pause the audio
  • then it sets the new audio information on the audio player
  • and starts the audio playing
  • then set the pause image on all of the buttons (which works amazing with multiple players)
  • then set the play image on the current button