Jump to content

Displaying multiple music albums and having a mp3 music player

Recommended Posts

I'm not finding a good music album template.  I am a film composer and have multiple albums I want to display on a page, much like a Gallery would look, however, I can't find one where you can drill into the album and then have track lists and an mp3 music player.  Does this need to be a custom design? How is that possible? That should be the most basic feature for a "musician" template, to showcase our albums and tracks and play songs. I don't want to link the songs to Soundcloud or Spotify.

I am using 7.1 templates.

I see the article and video posted here by Squarespace, but this template and feature is not an option in 7.1 templates, even though that band image is, but the Horizon template is not.

How can I do this easily? This is the feature I need!

Link to comment
  • 2 weeks later...
  • Replies 5
  • Views 2.7k
  • Created
  • Last Reply

SqS does tend to be way behind the curve when it comes to template functionality for music players and albums and such.

MAJOR EDIT #2: 11/10/2022
Specifically because of this issue and some functionality I wanted to include on SqS that was eluding me in terms of responsive design, I have switched hosts and have returned to Bandzoogle. While not as extensively customizable as SqS, it accepts custom html/css/js and I've modded one of their basic templates quite a bit. This lets me have more time for music itself while not fretting I've missed something that results in visitors to my website being redirected to Helga's House of Pain and Perfidity. 

But I digress. I've attached a file to show how the code below looked on the SqS site if you're interested; the link below will take you to the new BZ page.

MAJOR EDIT: 7/29/2021

I was originally using am embedded Spotify iframe inside some custom code, but as Sensei points out, there are reasons to stay away from Spotify, not the least among which is only playing 30-second snippets. 

I have built a display similar to the Spotify iframe, but it's all custom code with everything local to SqS. It plays full-length tracks and multiple albums can be organized however you want. The code involves both modifying the 'sqs-widgets-audio-player' as well as the containers. 

The page is HERE

The mods to the widgets, which are included in the Header Code Injection section of the  Advanced tab of the page settings, are below (these could probably be consolidated with good coding practices). If you'd like the rest of the page code for the various custom blocks and such into which the audio files are set, let me know and I'll email it all to you. 

.sqs-widgets-audio-player .action 
.sqs-widgets-audio-player .action .play-button
.sqs-widgets-audio-player .action .pause-button
.sqs-widgets-audio-player .track
 .sqs-widgets-audio-player .played
 .sqs-widgets-audio-player .title



Link to comment
  • 4 weeks later...

Thanks @KvK - That is really cool and sort of what I'm looking for, however, I think I'm steering away from Spotify now for the time.  I like the full track playability, and Spotify only uses a clip.  As does iTunes, I reckon... Maybe I'll reconsider.

I don't feel like spending money on Soundcloud Pro, but having issues with the Soundcloud Block built into SqS.  Right now I have 4 playlists set up and using the Embed code from Soundcloud, but SqS isn't letting you play any of the tracks.

Link to comment
  • 1 month later...

If you are using Apple Music, then you could go to DRmare Apple Music Converter. It can help with your Apple Music to local files and then you can use them on any device or platform with ease.

Link to comment
  • 4 months later...

Hi Sensei - my bad! I didn't see your reply until just now. I confess I had completely forgotten that Spotify sometimes only includes a clip and not the full thing! DOH!! 😛

After checking about a wee bit, (I should have done that first!), the Spotify embed plays the entire track for me, possibly due to including allow= "encrypted-media" as well as both the player and the website are 'https'.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.