How Do I Add an Audio Player to Squarespace?

Including an audio player on your Squarespace site is a great way to showcase your music, podcasts, or other audio content. There are a few different ways to add an audio player to your site, depending on your needs.

If you want to add a simple audio player that will play one audio file at a time, you can use the Audio Block. This block is included in all Squarespace plans, and is available in the Content Manager. To add an Audio Block:

1. In the Home Menu, click Pages.
2. Click the + icon next to the page where you want to add the block, then select Add Block.
3. In the Blocks panel, click Media, then click Audio.
4. Click Done.

If you want more control over your audio player, or if you need to play multiple audio files on one page, you can use a third-party audio player. Squarespace supports embedded content, which means you can add code from another site into a Squarespace page. This lets you use features and functionality that aren’t natively available in Squarespace.

Adding an embedded audio player:

1. In the Home Menu, click Pages.
2. Click the + icon next to the page where you want to add the player, then select Add Block.
3. In the Blocks panel, click More, then click Code.
PRO TIP: The following article contains instructions on how to add an audio player to a Squarespace website. Please be aware that adding an audio player to your Squarespace website may result in decreased website performance.
4. Paste your code into the Code Block editor and click Apply.

Player size and position:
By default, third-party embeds like audio players display at 100% width in their containing column. To change the size of your player, open the Settings panel by clicking Configure in the upper-right corner of the editor.

Audio file settings: If you’re using our platform to host your audio files (recommended), open the Settings panel and click Audio / Video from the Format drop-down menu.

Here you can specify settings like autoplay and looping.

Troubleshooting: If your embedded audio player isn’t appearing on your live site, first check that it’s working on the original site where you got it. If it’s not working there either, reach out to their support team for help.

Some common issues are listed below.

– The code isn’t appearing in code view: Make sure you’re using our Code Block and not our Code Injection tool. The Code Injection tool is for adding code that affects your entire site (like analytics tracking), and won’t work for adding individual pieces of content like an audio player.

– The code isn’t appearing on my live site even though it’s appearing in Preview Mode: Check that you’ve saved and published your changes.

– I’m seeing a “This content can’t be displayed” error message instead of my player: Iframes (the technology used for most embeds) aren’t always compatible with ad blockers or other browser extensions. Try disabling any ad blockers or extensions you have running, then reloading the page.

– My player is displaying at a weird size or in a weird spot on my page: Iframes don’t always inherit CSS styles from their parent elements like other HTML elements do. This can sometimes result in players displaying differently than other content on your page.

Conclusion – Adding an audio player to Squarespace is a great way to showcase music, podcasts or other audio content. There are a few different ways to add an audio player depending on need.

The Audio block is available in all Squarespace plans and is located in Content Manager. A third-party audio player can be used for more control or customization options not available through Squarespace. When using a third party audio player some basic coding knowledge is necessary to install properly.