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.
I don’t need this in it?
data-audio="
That’s the code that allows the audio player to play from different buttons.
Before that will work though, each playButton element needs a data-audio attribute with the appropriate audio source information.
<div class="playButton" data-audio="http://hi5.1980s.fm/;">
That way when a different player is clicked, the different audio source can be easily found from there.
1 Like
audio player to play from different buttons.
What does that mean exactly?
When a page has multiple play buttons on it with one HTML audio element on the page, that audio element can service all of those play buttons on the page.
After I added all this code to it, how can I tell if it’s doing what it’s supposed to be doing?
Not downloading while paused and such?
It’ll still download while paused, but you won’t have 8 different audio players all busy downloading while paused. You’ll only have one of them.
The network panel is how you can keep track of what it’s doing.
I’ll need to made 2 of 1 player, then 2 of another player on a different page to see the difference.
I have an issue with the new player.
2 different streams,
They both play the same stream.
That’s the first issue.
Doesn’t happen with the old code.
That code is developed for being used with only one audio element, not several audio elements. That development is mostly there, but not fully complete.
How would I implement it?
You would change the individually numbered class names so that they all use the same class name, so that the one set of JavaScript code can control all of the playbutton elements.
In the old code they are numbered and there are no issues.
How come in the old code they have no issue telling the streams apart?
If you want to manage eight full sets of CSS code and eight sets of JavaScript code for eight different buttons, then just keep on ignoring the advice.
1 Like
I put it back to this and it fixed the issue:
function togglePlayButton(button) {
var player = button.querySelector("audio");
For some reason when both players use this code, they can’t tell the 2 different streams apart from each other.
Do you know how that would be fixed?
function getAudio() {
return document.querySelector("audio");
}
That code is not designed for multiple players.
I do have a solution that works well both for when audio players are in the playbutton elements, and for when no audio element is found in the playbutton element, but as you have no use for that right now I won’t waste your time with it, until there’s a need for it.
Both players are able to tell the streams apart when they both use this code:
function togglePlayButton(button) {
var player = button.querySelector("audio");
But not this code:
function getAudio() {
return document.querySelector("audio");
}
Stay with the first code then, as that’s working in the environment that you’ve set up for yourself.
I think it’s the document part that’s making it an issue.
Would I be right?
function getAudio() {
return document.querySelector("audio");
}