How to Add Music to Your Squarespace Site
Adding music to your Squarespace site creates a more engaging experience for visitors. Whether you're a musician selling tracks, a podcaster sharing episodes, or just want to add some atmosphere to your site, Squarespace gives you several ways to incorporate audio content.
TL;DR:
- Use audio blocks for single tracks or podcast episodes you've uploaded
- Embed blocks work for third-party services like Spotify playlists
- SoundCloud blocks offer the most customisation and autoplay options
- You can sell downloadable music through Squarespace commerce
- Autoplay only works reliably with SoundCloud content
- Custom code may be needed for advanced audio features
Choosing the Right Block for Your Audio
Different types of audio content work best with different blocks. Here's what each one does:
Audio Block
Perfect for single tracks where you want full control. Upload MP3 or M4A files directly from your computer or link to files stored in cloud storage. This block works well for podcast episodes too.
The audio block gives visitors a simple play button and progress bar. It's clean and loads quickly.
Embed Block
This is your go-to for content from music streaming services. Copy the embed code from Spotify, SoundCloud, or other platforms and paste it straight in. If the embed block doesn't work properly, try switching to a code block instead.
SoundCloud Block
Built specifically for SoundCloud content. This block offers more customisation options than a regular embed block and handles SoundCloud's features better.
Video Block
If your music comes with visuals, use this for YouTube or Vimeo content. Great for music videos or live performance recordings.
Setting Up Autoplay
Autoplay can enhance the user experience, but it comes with limitations. Most browsers now block autoplay by default, so don't rely on it entirely.
For SoundCloud tracks, you can enable autoplay:
- Go to your track's SoundCloud page and click Share
- Click the Embed tab
- Check 'Enable automatic play'
- Copy the embed code and add it to a SoundCloud block
Other platforms require custom code for autoplay, and even then, many browsers will still block it.
Selling Music Through Your Site
Squarespace's commerce tools let you sell music as downloadable products. Set up your products like any other digital download – upload the audio files, set your prices, and write compelling descriptions.
Consider offering different formats (MP3, FLAC) or bundle options like entire albums at a discount. You can also create preview tracks using audio blocks to let people sample before buying.
Embedding Playlists
Spotify playlists work particularly well for showcasing your music or curating content for your audience:
- Open the Spotify app and find your playlist
- Click the three dots menu and select 'Share'
- Choose 'Embed playlist'
- Customise the appearance settings
- Copy the embed code
- Paste it into an embed block on your site
The embedded playlist lets visitors stream directly without leaving your site.
Album and Cover Pages
Use album pages to display collections of tracks with artwork. These work well for musicians releasing new material or podcasters organising episodes by series.
Cover pages put focus on a single piece of content. They're effective for album launches or featuring your latest release prominently.
FAQs
Can I make music autoplay when someone visits my site?
Only reliably with SoundCloud blocks. Other platforms need custom code, and most browsers block autoplay anyway.
How do I sell music downloads on my site?
Use Squarespace's commerce features to create digital products. Upload your audio files and set them as downloadable items.
What's the best way to add a Spotify playlist?
Use an embed block with the playlist's embed code from the Spotify app. This lets visitors stream without leaving your site.
Why isn't my embedded audio working?
Try switching from an embed block to a code block. Some platforms work better with one or the other.
Jargon Buster
Audio Block – Squarespace's built-in tool for uploading and playing audio files directly on your site
Embed Block – A block that displays content from external websites using their embed codes
SoundCloud Block – A specialised block designed specifically for SoundCloud content
Embed Code – HTML code provided by platforms like Spotify that displays their content on your site
Autoplay – Audio that starts playing automatically when someone visits your page
Wrap-up
Adding music to your Squarespace site opens up opportunities to engage visitors and showcase your audio content effectively. Start with the basic audio and embed blocks to get comfortable with the options, then explore more advanced features like selling downloads or embedding playlists.
Test your audio content on different devices and browsers to make sure it works consistently. Remember that autoplay doesn't work reliably across all platforms, so design your site assuming visitors will need to click play.
The key is matching your content type to the right block and keeping the user experience simple and engaging.
Ready to take your Squarespace skills further? Join Pixelhaze Academy for in-depth tutorials and expert guidance.