website builder cheat sheet

Choose the best website builder for your business

The Cheat Sheet that shows you exactly which website builder to choose based on your needs with bonus on how to get free custom domain, free email hosting, and more.

Get the FREE cheat sheet
website builder cheat sheet

How to add a music player to Carrd

By David NgeLast Updated: November 16, 2023

My work is supported by affiliate commissions. Learn More

In this tutorial, we'll go over really simple ways you can add music to your Carrd website.

Carrd music player demo
Carrd music player demo

Before you move on, if you need Carrd website inspirations or ideas, here are 28 Carrd website (hand-picked) examples. From K-pop fan pages, personal portfolio website, marketing landing pages, to simple one page business websites. There's something for everyone.

Alright. With that out of the way.

There are 2 ways to add Music to a Carrd website:

  1. Add a music link from Soundcloud or Bandcamp — If you want to customize the music player.
  2. Add music via code embed — If you want to save time adding a music to the site.

Note that code embed is a premium Carrd feature.

If you find yourself creating more than a handful of Carrd websites, then the paid plan offers tremendous value.

💡
If you're considering Carrd's pro plan, they now offer a 40% Black Friday discount (Coupon: BF2023). This deal is a no-brainer since it's only $5 per year — Yes per year!

Now let's get on with the tutorial.

In this example we'll use Soundcloud as a demo, but you can easily do the same with bandcamp. These 2 are the only music platforms that Carrd supports at the moment.

Login to your Soundcloud account and click into the song title you want to add to your Carrd website.

Go to Soundcloud and find your music title
Go to Soundcloud and find your music title

Click Copy Link, you should see a pop up from the top right confirming you have copied the Soundcloud link.

Click the copy link
Click the copy link

The default Soundcloud link has tracking codes that are not supported by Carrd.

Paste the Soundcloud URL in an editor and remove the question mark (?) and everything that comes after it — these are all the tracking codes that Soundcloud adds by default.

Remove the tracking code from the Soundcloud URL
Remove the tracking code from the Soundcloud URL

Copy the remaining URL and head over to the Carrd editor.

Tidied up Soundcloud URL for Carrd
Tidied up Soundcloud URL for Carrd

4. Add an Audio element to the page

Back in Carrd, Click the + button on the top right and select the Audio element.

Add an audio element
Add an audio element

Paste the Soundcloud URL (without the tracking code) in the URL field.

Paste the URL
Paste the URL

You should now see the Soundcloud music appear in the editor.

You won't be able to play the music yet, as you need to publish your website first.

5. Publish your site.

Hit the burger menu from the top right and click Publish.

Publish the site to view the Soundcloud music player
Publish the site to view the Soundcloud music player

You'll be asked to create a title, description and the URL for your Carrd site.

Once done, click Publish and View Site and your Soundcloud Carrd site is ready to play :)

The Soundcloud music player
The Soundcloud music player

6. Customizing Soundcloud music player

You can customize the Soundcloud music player to some extent. Select the Soundcloud element in the editor and click the Appearance tab.

Customizing the music player in the appearance tab
Customizing the music player in the appearance tab

Here, you will find a list of settings to customize the music player:

There is a minimum width and height for the music player so you can't make it too small or invisible.

However, you can design a minimalistic music player but unchecking all the unnecessary music player options.

Uncheck options to create a minimalistic music player
Uncheck options to create a minimalistic music player

Publish the website once again to view the changes.

The updated music player
The updated music player

How to add Music via code embed

Again, we'll use Soundcloud as a demo, but you can easily do the same with bandcamp. If you'd like to use Bandcamp's then follow this guide to retrieve the embed code and start following step 5.

1. Get the embed code from SoundCloud

Login to your Soundcloud account and click into the song title you want to add to your Carrd website.

Click the Share button and you will see a pop up.

Click the share button from Soundcloud
Click the share button from Soundcloud

Head over to the Embed tab and copy the embed code.

Copy the embed code
Copy the embed code

2. Add an Embed element

Head over to the Carrd editor and add an Embed element.

Add an embed element in Carrd
Add an embed element in Carrd

4. Paste the embed code

Paste the embed code that you copied from Soundcloud into the Code field.

Paste the embed code
Paste the embed code

Click Done to save the embed code.

Note that you won't see the music player in the main editor. To view the music player you have to first publish the Carrd website.

5. Publish your site.

Hit the burger menu from the top right and click Publish.

Publish the site to view the music player
Publish the site to view the music player

You'll be asked to create a title, description and the URL for your Carrd site.

Once done, click Publish and View Site and you will see the embedded Soundcloud player.

The embedded Soundcloud music player
The embedded Soundcloud music player

David Nge

David is the founder of MakingThatWebsite.com and started making websites for businesses back in 2014. He's a keen learner and wants to share his journey and knowledge with other business owners and freelancers. He launched MakingThatWebsite.com in 2021 to make website building more approachable and scalable for businesses.

Have a tutorial you want to learn? Leave a suggestion here.