Add audio to header, customize code

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>

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;
}

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

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

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.

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;
}

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>

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>

When I try this code there is no icon at all... what should I do?

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">