Audio playER customization

The inbuilt audio player of squarespace is good. But it doesn’t allow for much customization. I went above and beyond to extend the theme of bullet points to the audio player interface. To start I used the minimalist audio player elements, subsequently adding my own elements. Now as you can see on my audio page, there is a bullet at the start. The bullet starts moving as you click on it to play the track. As the bullet reaches the end it explodes. Also the bullet eats the title of the track, which re-appears as it passes it. Additionally the play/pause buttons are customized to resemble a stopwatch, to give the appeal of controlling time.  

HTML:

JAVASCRIPT:

document.addEventListener("DOMContentLoaded", function() {
const subString = 'polivantage.com/sound';
const getURL = window.location.href;
if (getURL.includes(subString)){
window.addEventListener('load', function() {
let allTracks = document.getElementsByClassName('audio-block');
for (let i = 0; i < allTracks.length; i++) {
//find the track position element
const trackPosition = allTracks[i].querySelector('.played');
//create bullet and append it to track position element
let trackBullet = document.createElement('div');
trackBullet.classList.add('trackBullet');
trackPosition.appendChild(trackBullet);
//set track position to the beginning
trackPosition.style.width = '0%';
//on play and on pause
const actions = allTracks[i].querySelector('.action');
const title = allTracks[i].querySelector('.title-wrapper');
const track = allTracks[i].querySelector('.track');
const widthTitle = title.clientWidth;
const widthTrack = track.clientWidth;
const widthBullet = trackBullet.clientWidth;
const titleWidthPercent = (widthTitle / widthTrack) * 100;
const bulletWidthPercent = (widthBullet / widthTrack) * 100;
actions.style.opacity = '0';
trackPosition.style.setProperty('background-color', 'FFC700', 'important');
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'style') {
const newWidth = parseFloat(trackPosition.style.width);
if (newWidth > 6 && newWidth < 98) {
if (newWidth >= titleWidthPercent+bulletWidthPercent) {
trackPosition.style.setProperty('background-color', 'transparent', 'important');
} else {
trackPosition.style.setProperty('background-color', '#FFC700', 'important');
}
actions.style.opacity = '1';
trackBullet.classList.add('trackBullet');
} else {
actions.style.opacity = '0';
trackBullet.classList.add('trackBullet');
trackPosition.style.setProperty('background-color', '#FFC700', 'important');
}
if (newWidth >= 98) {
actions.style.opacity = '1';
trackBullet.classList.add('bulletCrash');
trackBullet.classList.remove('trackBullet');
}
}
});
});
observer.observe(trackPosition, {
attributes: true,
attributeFilter: ['style']
}); 
}
});
}
});

CSS:

.bulletCrash {
  width: 60px;
  height: 60px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/0052902b-b84e-482f-bfce-7a31cda4532d/crashExplosionIcon1.png);
}
.trackBullet {
  width: 60px;
  height: 60px;
  display: block;
  position: absolute;
  top: 0;
  right: -22px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/31b85fc9-5f5f-469d-8e71-8d50545821f4/BulletPointRightIcon1.png);
}
.audio-block .played {
  background-color: #ffc700 !important;
  transition: all 0.5s ease;
  left: 0 !important;
  width: 100%;
  height: 100%;
  justify-content: right;
}
.audio-block .player {
  justify-content: left;
  display: flex;
  position: relative;
}
.sqs-widgets-audio-player-content {
  background: #ffc700;
 // border: 0px solid black;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  border-image-slice: 1;
}
.audio-block .artistName {
  display: none;
}
.audio-block .track {
  background: transparent;
}
.audio-block .action {
  align-items: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding-right: 2%;
  padding-left: 2%;
  margin-bottom: 10px !important;
  justify-content: center;
  border: 0px;
  transition: opacity 0.5s ease;
  opacity: 0;
  left: 22px;
}
.audio-block .action:hover {
  background: transparent !important;
}
.play {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/6cde2b46-9de3-4f5b-9f7a-85acebe1bf0b/stopwatchTwoIcon1+copy.png);
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0%;
    @media only screen and (max-width:790px) {
  opacity: 0 !important;
	}
}
.audio-block .play-button {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top:0%;
  left: 0%;
}
.pause {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top:0;
  left: 0;
  border: 0px !important;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/6ca8a9da-04ae-4eb0-beab-642e3258e05a/stopwatchOneIcon1+copy.png);
}
.audio-block .icon {
   display: none;
}
.audio-block .secondary-controls {
  display: flex;
  align-items: center;
}
.audio-block .title {
  letter-spacing: 0.1rem;
  font-size: 1.2rem !important;
  line-height: 1.5rem;
  color: #000000;
  padding-left: 30px;
  transition: opacity 0.5s ease;
@media only screen and (max-width:790px) {
  padding-left: 50px;
	}
}
.title-wrapper {
  padding-top: 4px;
}
.audio-block .time {
  display: none;
}
.bullet {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/31b85fc9-5f5f-469d-8e71-8d50545821f4/BulletPointRightIcon1.png);
  height: auto;
  width: 50px
}