Remove playbar from audio player

Is there a way to remove the playbar (progress bar) from the audio player and to have a play/pause player only?

@MiguelFerrao Can you share your link?

Sure @jaeveedee

https://www.musaparadisiaca.net/for-a-history-of-smells

Thanks!

@MiguelFerraoI think first step is to remove the space blocks on either side and make sure the audio block is in its own row by itself. Then we can remove some things and center it using CSS. 

Hi @jaeveedee, thanks for your answer.

I’ve made a version of the page as you've suggested.

www.musaparadisiaca.net/for-a-history-of-smells-test

@MiguelFerrao try this in your custom CSS. If it works then make your other page setup like this too.

.sqs-block-audio {
  text-align: center;
  .sqs-audio-embed {
    display: inline-block;
  }
  .sqs-widgets-audio-player {
    .track, .labels, .secondary-controls {
      display: none;
    }
  }
}

Thanks a lot for helping, @tuanphan and @jaeveedee.

The code below is almost getting it all:

Quote

 

<style> body
{background-color: #E6E6E6;}
#canvas {background-color: #E6E6E6;} 
</style>

<style>
#header {display: none;}
</style>

<style>  
.sqs-widgets-audio-player {background:white!important;}
.sqs-widgets-audio-player .action .play-button {border-left-color: black!important;} 
.sqs-widgets-audio-player .action .pause{border-color: black!important;}
.sqs-widgets-audio-player .progress {display: none !important;}
.sqs-widgets-audio-player .time {display: none !important;}
.sqs-widgets-audio-player .progress-bar {display: none !important;}
.sqs-widgets-audio-player .action {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
  transform: translate(-50%,-50%) !important;}   
</style>

<style>
div#page-section-65798fa962771a6b7f4a6a5a * {
    background-color: transparent !important;
}
.sqs-widgets-audio-player .track .icon {
    display: none !important;
}
.sqs-widgets-audio-player .action {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}
  </style>

<style>
.sqs-block-audio {
  text-align: center;
  .sqs-audio-embed {
    display: inline-block;
  }
  .sqs-widgets-audio-player {
    .track, .labels, .secondary-controls {
      display: none;
    }
  }
}
  </style>

 

The only thing unneeded is the right border (in grey) next to the play button.

Do you think we can remove this?

update to this

.sqs-block-audio {
  text-align: center;
  .sqs-audio-embed {
    display: inline-block;
  }
  .sqs-widgets-audio-player {
    .track, .labels, .secondary-controls {
      display: none;
    }
    .action {
      border-right: none !important;
    }
  }
}

How about changing the size of the play/pause?
Is that possible @tuanphan @jaeveedee?

Thanks a lot for your help.

Ok, I’ve created exactly the play/pause button I wanted.

Unfortunately, it is not centred. Can we fix that?

Here is the code I used:

.sqs-widgets-audio-player .action .play-button {
box-sizing: border-box;  
height: 40px;
border-style: solid;
border-width: 25px 0 25px 40px;
border-color: transparent transparent transparent white;
margin: 0;} 
.sqs-widgets-audio-player .action .pause{box-sizing: border-box;  
height: 50px;
border-style: double;
border-width: 0px 0px 0px 40px;
border-color: transparent transparent transparent white;} 

What page is this on with this code? It looks centered to me but also doesn't seem to have this code applied. 

Hi @jaeveedee. Here it is:

https://www.musaparadisiaca.net/for-a-history-of-smells

See if this works, it seems to work in the browser for me.

.sqs-widgets-audio-player .action {
  .play, .pause {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

Thanks a lot @jaeveedee

Should I substitute any code already there?

<style> body
{background-color: #E6E6E6;}
#canvas {background-color: #E6E6E6;} 
</style>

<style>
#header {display: none;}
</style>

<style>
.sqs-widgets-audio-player {background:white!important;}    
.sqs-widgets-audio-player .action:hover {background-color:transparent!important;}  
.sqs-widgets-audio-player .action .play-button {
box-sizing: border-box;  
height: 40px;
border-style: solid;
border-width: 25px 0 25px 40px;
border-color: transparent transparent transparent white;} 
.sqs-widgets-audio-player .action .pause{box-sizing: border-box;  
height: 50px;
border-style: double;
border-width: 0px 0px 0px 40px;
border-color: transparent transparent transparent white;} 
.sqs-widgets-audio-player .progress {display: none !important;}
.sqs-widgets-audio-player .time {display: none !important;}
.sqs-widgets-audio-player .progress-bar {display: none !important;}
.sqs-widgets-audio-player .action {
    position: fixed !important;
    top: 50% !important;
    left: 49% !important;  
  transform: translate(-50%,-50%) !important;} 
.sqs-widgets-audio-player .track .icon {
    background-color: none!important;}
</style>

<style>
div#page-section-65798fa962771a6b7f4a6a5a * {
background-color: transparent !important;}
.sqs-widgets-audio-player .track .icon 
{display: none !important;}
  </style>

<style>
.sqs-widgets-audio-player .action {
  .play, .pause {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}</style>

<style>
.sqs-block-audio {
  text-align: center;
  .sqs-audio-embed {
    display: inline-block;
  }
  .sqs-widgets-audio-player {
    .track, .labels, .secondary-controls {
      display: none;
    }
    .action {
      border-right: none !important;
    }
  }
}
</style>

Hi @jaeveedee

Yes, I am putting this on code injection because this is the only page I want with this behaviour. 

The code is now working perfectly:

https://www.musaparadisiaca.net/for-a-history-of-smells

Thanks a LOT for your precious help.

All best,

Miguel

@MiguelFerrao great! If it’s solved mark it as the solution. Happy to help!