Before and after audio player

Hey there!

I've been looking for ages for a way to do this in Squarespace: a before/after player. 

All audio mixing/mastering engineers, as well as post-production houses would explode out of sheer joy if this suddenly became possible.

As seen in the image I attached, the player would start both audios (before and after files) simultaneously and use volume of each to create a crossfade.
Click on "before" and hear the "before" audio clip, while the "after" clip is silently playing. 
Click on "after" and crossfade between the two audio files, with the "before" clip playing silently.

One player would work for 2 files.

There should be a visual indicator that the buffers are full before the user triggers "play". 

Apparently this could be done with Javascript.

Is this plugin possible within Squarespace?

Thanks a lot!

I am also trying to find out how to do this. Have you had any luck?

Looking for the same feature. Hoping Squarespace will add this ability...

On 12/30/2019 at 9:14 PM, tiki2134 said:

Hey there!

I've been looking for ages for a way to do this in Squarespace: a before/after player. 

All audio mixing/mastering engineers, as well as post-production houses would explode out of sheer joy if this suddenly became possible.

As seen in the image I attached, the player would start both audios (before and after files) simultaneously and use volume of each to create a crossfade.
Click on "before" and hear the "before" audio clip, while the "after" clip is silently playing. 
Click on "after" and crossfade between the two audio files, with the "before" clip playing silently.

One player would work for 2 files.

There should be a visual indicator that the buffers are full before the user triggers "play". 

 

Apparently this could be done with Javascript.

 

Is this plugin possible within Squarespace?

 

Thanks a lot!

Hi, Yes it is possible, I recently Made this one of my client. You will inbox me if you discuss with me further on it. Thanks.

Hi, tiki2134!

We just built this! SoundToggle: An Embeddable Before and After Audio Player for Your Website.

https://SoundToggle.io

I was looking for a before and after audio player for my website for years. There's a few open source options out there, but I couldn't find one that worked with my Squarespace site without coding knowledge. (I know a little Javascript, but I'm not a wizard.) So I teamed up with a developer and created one! Realizing that other people may want a before and after audio player too, we designed it to be an easy no code (low code) solution.

It's super simple to use. Just name your track, upload your audio versions A and B, customize the appearance, and share! You can export an iframe HTML snippet that you can easily add to your site with Squarespace's code block. Or, you can send people a direct URL link to the A/B audio player hosted on our website.

Give it a try and let me know if this works for you. If you have any feedback, I'm all ears! Send it my way.

Enjoy! 😁

On 1/3/2024 at 4:50 AM, mattebso said:

Hi, tiki2134!

We just built this! SoundToggle: An Embeddable Before and After Audio Player for Your Website.

https://SoundToggle.io

I was looking for a before and after audio player for my website for years. There's a few open source options out there, but I couldn't find one that worked with my Squarespace site without coding knowledge. (I know a little Javascript, but I'm not a wizard.) So I teamed up with a developer and created one! Realizing that other people may want a before and after audio player too, we designed it to be an easy no code (low code) solution.

It's super simple to use. Just name your track, upload your audio versions A and B, customize the appearance, and share! You can export an iframe HTML snippet that you can easily add to your site with Squarespace's code block. Or, you can send people a direct URL link to the A/B audio player hosted on our website.

Give it a try and let me know if this works for you. If you have any feedback, I'm all ears! Send it my way.

Enjoy! 😁

I tried clicking Before After, but both seems same