Would I need to create a new class to change the color of the 1st play button?

If I wanted to make the first play svg you see white, but never see that one again, after you click on it, is that something I would need to create a new class to do?

And how exactly would I set something like that up?

How do you direct the button to know after it’s pressed, it’s not going to show that one again?

<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" alt="" />
</div>

<button id="playButton2" style="width: 16px; height: 14px;padding:0;border:0; cursor: pointer;background-color: #000000;" 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) {
 playButton2.style.border='none';
        document.querySelector('#playButton2 .pause').style.display='inline-block';
        document.querySelector('#playButton2 .play').style.display='none';
        player.play();
        } else {
 playButton2.style.border='none'; 
        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" 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>

<svg class="pause" width="10" height="14" style="display: none;"  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;"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" width="12" height="14" style="display: none;"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>

</button>

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

Sorry about that, I just did it by changing the color of the initial class.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.