Adding additional play buttons

JavaScript
1

Can I place 2 additional songs on here, 2 new play button things?

Is this possible to do?



<div id="playButton2" style="width: 260px;height:44px;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );border: 3px solid #0059dd; cursor: pointer;" onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
          document.querySelector('#playButton2 .initial').style.display='none';
          document.querySelector('#playButton2 .speaker').style.display='none';
          document.querySelector('#playButton2 .play').style.display='none';
        player.volume=1.0; if (player.paused) {

        document.querySelector('#playButton2 .pause').style.display='inline-block';
        document.querySelector('#playButton2 .play').style.display='none';
        player.play();
        } else {

        document.querySelector('#playButton2 .pause').style.display='none';
        document.querySelector('#playButton2 .play').style.display='inline-block';
        player.pause();
        }" onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
}"

onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">


 <svg class="initial" style="margin:15px 124px;" width="12" height="14" viewBox="0 0 85 100"><path fill="white" 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"></path></svg>

<svg class="pause" style="display: none;margin:15px 125px;" width="10" height="14" viewBox="0 0 60 100"><path fill="#1ed760" 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"></path></svg>

<svg  class="speaker" style="display: none;margin:15px 122px;" width="16" height="14" viewBox="0 0 16 14"><path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760" fill-rule="evenodd"></path></svg>

<svg class="play" style="display: none;margin:15px 124px;" width="12" height="14" viewBox="0 0 85 100"><path fill="#1ed760" 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"></path></svg>

</div>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
2

Something like:


<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

<audio id="player3" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

<audio id="player4" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
3

Yes, that it possible. Currently though you would need to duplicate all of the scripting for each play button.

There are ways though to reduce all of that extra scripting. Do you want to know more?

2 Likes
4

Sure, yes.

5

The idea is to use a function where you give it the button and the player. That way you can call that function from several different buttons.

For example, where you have the existing scripting code:

var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
document.querySelector('#playButton2 .speaker').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
...

You would move all the code below the var to a separate function, and then call that function giving it the button and the player.

The togglePlayer() code is in a separate script section.

Here’s some of that code in a separate function, where the button is used to retrieve each reference.

<script>
function togglePlayer(button, player) {
    button.querySelector('.initial').style.display='none';
    button.querySelector('.speaker').style.display='none';
    button.querySelector('.play').style.display='none';
    ...
}
</script>

Each button then only needs to call the above function, giving an appropriate button and player.

var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
togglePlayer(button, player);
1 Like
6

One of the ways to do this without the code breaking, is to first create an empty playButton function, and then call that function from your onclick code.

That way, you can then move code in to it, one line at a time, testing that things keep working as it is expected to do.

7

I would creat2 additional id’s, right?

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

<audio id="player3" style="display:none;">
  <source src='http://149.56.23.7:20288/;' type='audio/mpeg'></source>
</audio>

<audio id="player4" style="display:none;">
  <source src='http://nl1.streamhosting.ch:80/;' type='audio/mpeg'></source>
</audio>
8

Yes.

9

Would I need to create 8 of these?

<svg class="initial" style="margin:15px 124px;" width="12" height="14" viewBox="0 0 85 100"><path fill="white" 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"></path></svg>

<svg class="pause" style="display: none;margin:15px 125px;" width="10" height="14" viewBox="0 0 60 100"><path fill="#1ed760" 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"></path></svg>

<svg  class="speaker" style="display: none;margin:15px 122px;" width="16" height="14" viewBox="0 0 16 14"><path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760" fill-rule="evenodd"></path></svg>

<svg class="play" style="display: none;margin:15px 124px;" width="12" height="14" viewBox="0 0 85 100"><path fill="#1ed760" 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"></path></svg>
10

Would it help to have a way to do without the one called “initial”?

11

I think I kinda need it. So, like, If I want each to have a different, initial color.

12

It’s not needed. You can have each start as whatever color you like, and when clicked just give it the same color as the pause button, for example.

13

You keep saying, get rid of initial, how do you do that?

14

Delete all of the lines that have initial in them, and move play up above pause.
Because you’ll be getting the fill from pause and applying it to the play, it helps to have play and pause as separate variables.

That way, you can set the play color with:

play.querySelector('path').setAttribute('fill', pause.querySelector('path').getAttribute('fill'));

That’s pretty long. Is there a shorter way to do it? Sure.

Instead, give the playButton2 div a class called “notClicked” and then use the click function to remove that class.
That allows is to remove the fill from the play button and it’s controlled by the that class name instead.

<style>
#playButton2.notClicked { fill: white; }
#playButton2 { fill: #1ed760; }
</style>
...
<svg class="play" ...><path ...></path></svg> <!-- removed the fill attribute -->

Here’s what you get as a result https://jsfiddle.net/hk4dvj15/5/

1 Like
15

If it’s only the play button that you want to be green, you can make the class declaration more restrictive:

<style>
#playButton2.notClicked .play { fill: white; }
#playButton2 .play { fill: #1ed760; }
</style>
16

I’ll try it both ways and see what I like.

17

I’ll need three of these then, and I’m going to need to add different margins to each of them.

<style>
#playButton2.notClicked { fill: white; }
#playButton2 { fill: #1ed760; }
</style>

<style>
#playButton2.notClicked { fill: red; }
#playButton2 { fill: #1ed760; }
</style>


<style>
#playButton2.notClicked { fill: orange; }
#playButton2 { fill: #1ed760; }
</style>
18

Why not just have three playButton containers, each with their own play/pause/speaker inside of them.
That way you will only need to position the playButton container, and everything else moves inside with it.

19

All of this seems complicated, maybe it’s not worth it. And the code is going to end up looking ginormous.

20

But I’ve just done it, it’s easy. See? https://jsfiddle.net/hk4dvj15/6/

As for the code, most of the duplication can be removed by moving most of the scripting code to a single function, as I explained earlier.