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”
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:
In the Link Editor dialog, click the File link, then click the Upload File link and upload all player files one by one.
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.
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.