Add Audio to Header

Dear Community,

I am looking for some help to add a Audio (on and off) to the header of my website, like the picture attached in red

Does anybody know how to do this with some code lines? My website is www.khaia.co

Unfortunately Squarespace doesn't provide this option yet, they only offer to add an audio track outside of the header. 

Thank you in advance

Hi @SarahKhaia,

When starting a post, provide clarity and context by including key information such as:

• A detailed description of the question or problem
• Site links
• Your site's template and version
• Desired outcomes
• Any code you’ve already tried

This will help the Community provide a better answer.

Thank you, I updated the post accordingly

Hi. You mean you would like something more then the basic audio block that Squarespace offers?

https://support.squarespace.com/hc/en-us/articles/206543197-Audio-blocks

Hello Joseph,

Yes I would like something different, Squarespace offers a way to add Audio blocks directly in the content of the website - I would like to add the Audio blocks on the menu at the top ie in the header (like the pic attached from my first post) - Squarespace confirmed this is not something they do but I can ask the community for some help with some lines of code

I understand now ! Ok, I guess you need a custom code injected in the header ! Let me investigate it a little bit and I get back to you !

So the steps are the following:

1. You create an audio block in the top of the footer section

2. You add this code in the Injections menu > Footer:

<script>
   const headerAudio = document.querySelector('#footer-sections .sqs-block-audio');
   document.querySelector('#header .header-display-desktop .header-title').insertAdjacentHTML('afterEnd', headerAudio.innerHTML);
</script>  

3. You can also add a CSS in the custom CSS(to avoid ever displaying an audio in the footer, till javascript does it's job)

Custom CSS:

#footer-sections .sqs-block-audio {
  display: none;
}

For mobile version I am not sure if you want to display the audio so I did not cover that. The styling for the audio(spaces around) needs to be done manually from CSS

.header-display-desktop .sqs-block-audio {
   margin: 0 2%;
}

Thank you very much Joseph!

So unfortunately it doesn't work on my side

1. I created an audio block in the top of the footer section (cf. photo 1)

2. I added the code in the Injections menu (cf. photo 2)

3.  I added a CSS in the custom CSS (cf. photo 3)

The result => the audio disappeared from the audio block i initially added (photo 1), and everytime i want to add it back it just doesn't show up. Plus it stays in the bottom section of my website and doesn't show up in the header

Do you know what I did wrong?

Thank you!

Yes I can see you have an error ! (Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML'))

Let me check why.

Yes, the problem is that you added the script in the Advanced tab but you should add the script in the Injections panel > Footer 

Advanced tab adds script in top of document instead of bottom of the document. So the script executes before the element were loaded in the html, so it throws an error.

Hi!

I am having a similar issue and wanted to ask your help. I want to make a simple audio playback icon to be displayed on the right hand side of the header. It should only be displayed on my home page, not on any other pages. 

I tried to apply the code as described in this thread, and have gotten so far:

What remains is changing the design to a desired icon, and placeing it on the right hand side. I have included a simple sketch of what I want the header of my home page to look like. It would also be nice if the icon displays a difference betwee on/off as shown in the paratheses in my sketch.

Hope you might be able to help out!

Best,

Sigurd

On 12/16/2022 at 6:56 PM, sihole said:

Hi!

I am having a similar issue and wanted to ask your help. I want to make a simple audio playback icon to be displayed on the right hand side of the header. It should only be displayed on my home page, not on any other pages. 

I tried to apply the code as described in this thread, and have gotten so far:

What remains is changing the design to a desired icon, and placeing it on the right hand side. I have included a simple sketch of what I want the header of my home page to look like. It would also be nice if the icon displays a difference betwee on/off as shown in the paratheses in my sketch.

 

Hope you might be able to help out!

Best,

Sigurd

Hi, 

This is possible. This morning I Just solved a similar case. If you share link to your site, we can adjust the code for your case easier

23 hours ago, tuanphan said:

Hi, 

This is possible. This morning I Just solved a similar case. If you share link to your site, we can adjust the code for your case easier

Hi,

Wonderful, thank you so much! Here is my site

dahlia-chameleon-xdem.squarespace.com

Since my messag I have made a store, menaning I am not quite sure if the right hand side of the header is the best placement for the audio playback icon... happy to get ideas, and perhaps learn how I can change the placement in the code.

Best,

Sigurd

2 minutes ago, sihole said:

Hi,

Wonderful, thank you so much! Here is my site

dahlia-chameleon-xdem.squarespace.com

Since my messag I have made a store, menaning I am not quite sure if the right hand side of the header is the best placement for the audio playback icon... happy to get ideas, and perhaps learn how I can change the placement in the code.

Best,

Sigurd

Guessing you might need a password as my site is not yet live. Password is sketchingsound

Perhaps the right hand side of the header will work for placement if the audio icon is put next to the cart. Another solution might be to put it after my name in the middle of the header. 

Best,

Sigurd

On 12/21/2022 at 7:57 PM, sihole said:

Guessing you might need a password as my site is not yet live. Password is sketchingsound

Perhaps the right hand side of the header will work for placement if the audio icon is put next to the cart. Another solution might be to put it after my name in the middle of the header. 

Best,

Sigurd

Add to Settings > Advanced > Code Injection > Footer

<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://www.w3schools.com/tags/horse.ogg");
    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>

Replace https://www.w3schools.com/tags/horse.ogg

with your audio url

Thanks a lot, this code works nice!! There is however a couple of minor tweaks I am wondering if might be applied:

1) can playback start automatically on page open as default..?

2) icon: instead of play / pause buttons, may the icons be like this (transparent)? (where sound on is the one with soundwaves - this should then show on page open as playback starts automatically)

3) placement: now the icon is directly below the cart. I wonder if a better placement might be in the middle of the header, below "The music of Sigurd Hole", but then we would need a customized option for mobile as this would not look so good there I think..

On 12/29/2022 at 9:26 PM, sihole said:

Thanks a lot, this code works nice!! There is however a couple of minor tweaks I am wondering if might be applied:

1) can playback start automatically on page open as default..?

2) icon: instead of play / pause buttons, may the icons be like this (transparent)? (where sound on is the one with soundwaves - this should then show on page open as playback starts automatically)

3) placement: now the icon is directly below the cart. I wonder if a better placement might be in the middle of the header, below "The music of Sigurd Hole", but then we would need a customized option for mobile as this would not look so good there I think..

 

Hi,

#1. No. This won't run on all devices. Many devices do not allow Video/Audio with Sound play automatically.

#2. Here I used FontAwesome Icon. If you can find an icon what you want here, we can give the adjust code.

List icon: https://fontawesome.com/

#3. I don't see icon now. Can you add the code & enable cart icon?

#1. I see.

#2. These fonts would be nice:

<i class="fa-light fa-volume"></i>

<i class="fa-light fa-volume-off"></i>

#3. Now cart is enabled. Does it have to be enabled for the audio playback buttons to show?

Thanks!

On 1/2/2023 at 12:19 PM, sihole said:

#1. I see.

#2. These fonts would be nice:

<i class="fa-light fa-volume"></i>

<i class="fa-light fa-volume-off"></i>

#3. Now cart is enabled. Does it have to be enabled for the audio playback buttons to show?

Thanks!

Hi. Can you share link to page where you get these font icon code? I need to check their unicode code

Sure.

Sound on: https://fontawesome.com/icons/volume?s=light&f=classic

Sound off: https://fontawesome.com/icons/volume-off?s=light&f=classic

If possible, it would be great if the sound icon is not dependent on the cart icon being enabled in the header. Ideally I would learn how to change the placement of the sound icon in the CSS myself to be able to experiment- if it is not too complicated..

Thanks again for helping out!

On 1/4/2023 at 5:54 PM, sihole said:

Sure.

Sound on: https://fontawesome.com/icons/volume?s=light&f=classic

Sound off: https://fontawesome.com/icons/volume-off?s=light&f=classic

Thank you. But can you choose other icons? these are pro version

How about these ones?

https://fontawesome.com/icons/volume-off?s=solid&f=classic

https://fontawesome.com/icons/volume-high?s=solid&f=classic

Hi again! Any chance to look into this yet?

Best,

Sigurd

Hi! Can you helpe me change the icon as we discussed? 

Best,

Sigurd