Audio play/pause button in header

Hi there, Im new to square space so just learning how this ecosystem works.

I'm building a website for a radio station and want to put a play/pause button (white colour) on the right hand side of the header, that when clicked, will start playing our live audio stream. 

https://icast1.streamcom.net/TeUpoko 

I've seen a couple of other examples of play buttons in the header but wasn't able to get it working using the script / code they were given.

our current site is https://www.teupoko.nz/ and we've decided to move from wix to squarespace.

I'm looking to create a play button that performs in the same way as it does on our current site.

Any help is greatly appreciated

Karl

For anyone interested in also doing this I did get it working using the code at the bottom of this post inserted into the footer of the page, but there were a few additional things I had to do 

the page is now at https://teupoko.squarespace.com

After I inserted the code into the footer the play  button would only show in the menu bart if the button element was also added to the header/menu bar. I didn't need 2 play buttons, so I tried using css to hide the element button, but it also hid the play button that I wanted to keep, 

so what I did was made the element button the same colour as the menu bar with no text or no link connected to it so it's still there but invisible and not clickable, and doing whatever it does to keep the button from the footer code visible.

I also had to move the social links to the left as they were on top of the html play button on the right.

Now I just have to figure out how to make it white instead of black to fit in with the colours xD



heres the code I inserted into the footer, replace "https://icast1.streamcom.net/TeUpoko" with a link to your audio.
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/>
<script>
  $(document).ready(function() { 
  // audio icon 
  $('<a id="play-pause-button" class="fa fa-play"></a>').appendTo('.header-actions--right .header-actions-action');
    });
</script>
<script>
$(document).ready(() => {
    var audio = new Audio("https://icast1.streamcom.net/TeUpoko");
    audio.onended = function() {
        const list = document.querySelectorAll('#play-pause-button');
        for (let i=0; i<list.length; i++) {
            $(list[i]).removeClass('fa-pause');
            $(list[i]).addClass('fa-play');
        }
    };
         
    window.addEventListener('mousedown', (e) => {
        const btn = e.target
        if (btn.id === 'play-pause-button') {
            console.log(3534);
            if($(btn).hasClass('fa-play'))
               {
                 $(btn).removeClass('fa-play');
                 $(btn).addClass('fa-pause');
                 audio.play();
               }
            else
               {
                 $(btn).removeClass('fa-pause');
                 $(btn).addClass('fa-play');
                 audio.pause();
               }
        }
        
    });
});
</script>

to turn it white I used css

.fa-play {
     color: #FFFFFF;
}


.fa-pause {
     color: #FFFFFF;
}

 

Next issue.. the play button disappears from the mobile menu.. If I find a fix I'll put it here, but hopefully someone who already knows can drop some pearls of wisdom 🙂

This shows the button in mobile view

/* Show button on mobile menu*/
@media screen and (max-width:1024px)
 

Did you solve or still need help?

hi.. i tried and it works with your radio link, but if i put a link to my audio doesnt work.

do I need to use a link of a streaming platform ? 

On 2/7/2024 at 6:39 PM, kokolandia17 said:

hi.. i tried and it works with your radio link, but if i put a link to my audio doesnt work.

 

do I need to use a link of a streaming platform ? 

Which exact code/link did you use + site url? We can check problem easier

On 2/8/2024 at 12:39 AM, kokolandia17 said:

hi.. i tried and it works with your radio link, but if i put a link to my audio doesnt work.

 

do I need to use a link of a streaming platform ? 

Hi there, the station audio is streamed from an icast server. I'm not sure what the rules are regarding the audio player and what kind of links it will accept, but if you have it on a server as an mp3 file, and use a URL to that file, I assume that would work? 

On 2/6/2024 at 11:55 PM, tuanphan said:

Did you solve or still need help?

Yup I got it sorted! but also wanted to put the solution up as it would have helped me a lot to find this info and might end up helping someone else 🙂