Jump to content

Add audio to header, customize code

Recommended Posts

Hi! 

I am working on adding audio to my header, to make the opening of my new website an nice invitation into my music. Currently I am using this code (below), but I would like to make some changes. Here is what I would ideally like the end result to be:

1) The audio icon should be independant of the cart icon - I am considering not having the cart icon in my header. As it is now, if I disable the cart icon the play /pause button also disappears.

2) I would like to be able to experiment with placement of the audio icon, to see if it works best all the way to the right, or perhaps directly after the page title (The Music Of Sigurd Hole).

3) I want these icons instead of play/pause button:

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

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

4) I like that the sound stays on as you scroll down. But is there a way to make it stop automatically if you click on a video or audio file?

Hope someone might be able to help out.

SITE: https://dahlia-chameleon-xdem.squarespace.com

PASS: sketchingsound

Thanks!

Best, Sigurd

<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("/s/3-Lys_fra-Lys-Mrke.mp3");
    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>

 

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

4 hours ago, sihole said:

Hi! 

I am working on adding audio to my header, to make the opening of my new website an nice invitation into my music. Currently I am using this code (below), but I would like to make some changes. Here is what I would ideally like the end result to be:

1) The audio icon should be independant of the cart icon - I am considering not having the cart icon in my header. As it is now, if I disable the cart icon the play /pause button also disappears.

2) I would like to be able to experiment with placement of the audio icon, to see if it works best all the way to the right, or perhaps directly after the page title (The Music Of Sigurd Hole).

3) I want these icons instead of play/pause button:

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

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

4) I like that the sound stays on as you scroll down. But is there a way to make it stop automatically if you click on a video or audio file?

Hope someone might be able to help out.

SITE: https://dahlia-chameleon-xdem.squarespace.com

PASS: sketchingsound

Thanks!

Best, Sigurd

<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("/s/3-Lys_fra-Lys-Mrke.mp3");
    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>

 

You can use the following Css code to hide the cart icon

.header-actions-action .sqs-custom-cart{
  display: none;
}

 

Edited by Beyondspace

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, sihole said:

Thanks, this solves the cart issue perfectly!

How about changing the placement of the play/pause button..? And also changing to other kinds of icons, the ones I mention in my first post?

Sigurd

<script>
  $(document).ready(function() { 
    // audio icon 
    $('<a id="play-pause-button" class="fa-solid fa-volume-off"></a>').appendTo('.header-actions--right .header-actions-action');
  });
</script>
<script>
  $(document).ready(() => {
    var audio = new Audio("/s/3-Lys_fra-Lys-Mrke.mp3");
    audio.onended = function() {
      const list = document.querySelectorAll('#play-pause-button');
      for (let i=0; i<list.length; i++) {
        $(list[i]).removeClass('fa-volume-off');
        $(list[i]).addClass('fa-volume-high');
      }
    };

    window.addEventListener('mousedown', (e) => {
      const btn = e.target
      if (btn.id === 'play-pause-button') {
        console.log(3534);
        if($(btn).hasClass('fa-volume-high'))
        {
          $(btn).removeClass('fa-volume-high');
          $(btn).addClass('fa-volume-off');
          audio.play();
        }
        else
        {
          $(btn).removeClass('fa-volume-off');
          $(btn).addClass('fa-volume-high');
          audio.pause();
        }
      }

    });
  });
</script>

You can try this

Edited by Beyondspace

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

I could not get this to work, should it replace the old code in settings -> advanced -> code injection -> footer ?

When I replace the old code with, it just shows a small, rectangular (vertical) icon.

Link to comment

You can try set some additional css style on Home > Design > Custom Css

.fa-solid {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

This did not seem to work.. the code I used initially, after applying your custom css code for removing the cart, actually worked quite well. I just want to change the icons. Should we not then just tweak this intial code to show the icons I want? 

<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("/s/3-Lys_fra-Lys-Mrke.mp3");
    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>

 

Link to comment

It requires new version for font-awesome. Currently, you are using the 4.6.3

You can try again

<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/6.2.1/css/all.min.css"/>
<script>
  $(document).ready(() => {
    var audio = new Audio("/s//s/3-Lys_fra-Lys-Mrke.mp3");
    audio.onended = function() {
      const list = document.querySelectorAll('#play-pause-button');
      for (let i=0; i<list.length; i++) {
        $(list[i]).removeClass('fa-volume-off');
        $(list[i]).addClass('fa-volume-high');
      }
    };

    window.addEventListener('mousedown', (e) => {
      const btn = e.target
      if (btn.id === 'play-pause-button') {
        if($(btn).hasClass('fa-volume-high'))
        {
          $(btn).removeClass('fa-volume-high');
          $(btn).addClass('fa-volume-off');
          audio.pause();
        }
        else
        {
          $(btn).removeClass('fa-volume-off');
          $(btn).addClass('fa-volume-high');
          audio.play();
        }
      }

    });
  });
</script>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...

Now I registered and got my own kit kode for free icons version 6 (see below, copy/paste from my kit at the font awesome website). I tried switching the old kit codes with the new ones in your last suggestion, but still no icon. Perhaps we to change other aspects of the code as well?

<script src="https://kit.fontawesome.com/a0d43cfa57.js" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://kit.fontawesome.com/a0d43cfa57.css" crossorigin="anonymous">

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.