Mildly customizable Soundcloud song player embed (tutorial)

Tags: soundcloud, music, music player, embed, tutorial, songs

Description:

Ok, so, I'm gonna attempt to teach y'all how to get a Soundcloud link on your page and then how to tweak the values a bit to change its appearance. This isn't a fully custom music player by any means—we're just using Soundcloud's embed options to get differently structured music players.
Please please please read this tutorial in its entirety and don't just scroll to the bottom and copy-paste what's in the Layout Code section. You're not going to get what you want if you don't read everything here. The layout codes are given as examples ONLY to demonstrate how the values are formatted.
Here's how to insert a song link onto your page and customize the Soundcloud player appearance:

1. Open up your Soundcloud link in a browser.
2. Underneath the box where you can add comments, click "Share," and in the pop-up that appears, click "Embed."
3. This is where you will find some customization options for your song. You can change the color of the play button and the waveforms (depending on how far the song has progressed). You will notice there are 3 different types of embeds. Their names are the visual embed (the first, selected by default & the biggest type), the classic embed (the middle), and the mini embed (which is paywalled, but there is a stupidly easy way to get around it that I don't know why Soundcloud even bothered paywalling it to begin with).
4. Pick your color, and then copy (ctrl+C) everything in the "Code" section. Clicking once within this section selects everything by default. If not, then hit ctrl+A.
5. Before we plop this snippet of code into our Spacehey settings, open up any kind of text program, like Notepad or a code playground (like JSFiddle) and paste the code there. We're gonna tweak a few things.
6. Find the closing tag of the iframe ( < / iframe > ) (basically where the big URL ends) (aka the second time the word "iframe" appears) and delete EVERYTHING after that. We don't need it, I promise.
7. Now we're in the thick of it. This is where we can access the values that allow us to get the mini player that was originally paywalled. Simply find your "height" value (near the beginning of your chunk of code) and change the number in between the quotation marks to 20. Once that is done, look for the "visual" value somewhere near the end of your code, and make sure that it reads "visual=false." (If "visual=" doesn't appear in the URL, that is fine too. The default value is false, so even if it's not in the URL, the visual won't appear anyway) And that's it. Your embed will be a mini player once you put it in your Spacehey settings.
8. Some other things you can change here are your autoplay settings, showing comments, toggling the visual or classic player, or showing the username of the user who uploaded the song. The URL shows these values as true or false. So, for example, if you want autoplay, make sure where the URL says "auto_play=" it ends with "true." If you want to convert the embed from the visual player to the classic and/or mini player, make sure the URL says "visual=false". You get it?
9. Once you've done your tweaking there, NOW we can copy the entire chunk of code and paste it into your Spacehey settings.

That oughta do it! Did that all make sense? Hopefully it did. It's not as complex as it seems truly. You just need to know where to look.

EDIT 11/5/24: If you are a Chrome user, the autoplay feature is not going to function, because any kind of autoplay in which a user does not interact with the website except to load it is completely blocked. More info here (if you're tech savvy): https://developer.chrome.com/blog/autoplay/

Preview:

Code:

<!-- (c) Layout created by Lavender (https://layouts.spacehey.com/layout?id=97716) --> <!-- all samples utilize the song Caribou by Kenshi Yonezu --> <!-- sample of the visual player --> <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/204828191&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe> <!-- sample of the classic player --> <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/204828191&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=false"></iframe> <!-- sample of the mini player --> <iframe width="100%" height="20" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/204828191&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=false"></iframe> <!-- sample of the visual player with most annoyances and unnecessities disabled --> <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/204828191&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false&visual=true"></iframe>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.