How to add an audio player to Squarespace website

Posted on by

Squarespace is an online website builder that enables you to create and maintain websites and blogs. This tutorial will guide you how to add an audio player created with Amazing Audio Player to your Squarespace website. You can create an audio player with playlist, a single button audio player or a bar audio player.

There are three steps in this tutorial:

  • Step 1 – Create an audio player
  • Step 2 – Upload player files to Squarespace
  • Step 3 – Embed the player to a Squarespace page

Step 1 – Create an audio player

First please create an audio player with Amazing Audio Player.

  • When adding mp3 and image files to the player, make sure the filenames only contain A-Z, a-z, 0-9 and underscore(_). The reason is because when uploading a file, Squarespace will change or remove the special characters (+ sign and space etc ) in the filename, instead of encoding them. This will cause the error that the player can’t find the mp3 or image file.

In the Publish dialog:

  • Click Browse button, select a folder to save the player files. Make sure the folder is empty, so you will know which files are created by the player.
  • Remove text in the field “Save audio files to folder”
  • Remove text in the field “Save js files to folder”
  • Enter text /s/ in the field “Add absolute URL”

amazingaudioplayer-publish

Step 2 – Upload player files to Squarespace

This step will upload all of the player files to your Squarespace website.

In your Squarespace dashboard, edit the page that you want to add the player. If there is no text on the page, add a text block.

Drag and select any text, then click the Edit Link button.

Click the button after the link input box:

squarespace-link-settings

In the Link Editor dialog, click the File link, then click the Upload File link and upload all player files one by one.

squarespace-upload-file

Step 3 – Embed the player to a page

Open the created audioplayer.html file with a text editor or HTML editor. There are two code snippets in the file.

amazingaudioplayer-code

To add the player to the Squarespace page, go to the Page Settings -> Advanced, paste the head section player code to the “Page Header Code Injection” field.

In the page where you want to add the player, add a Code Block, enter the body section player code.