Subtle Background Music Player (no autoplay)

Tags: music, autoplay, css, fancy, audio, twilight

Description:

While playing MP3s or OGGs automatically is nigh impossible, unless you do something evil like cover the screen while the music's not playing so any click starts it (which would be a rule violation as far as I'm aware), this one might catch the attention of a viewer and cause them to play it out of curiosity.

I recommend using internet radio stations for this one – currently, it's loaded with lainon.life's audio stream, but there's ones out there for stuff like vaporwave and such, so finding one playing whatever you like shouldn't be too much trouble.

Failing that though, you can just upload an mp3 or ogg to a filehost and have it play as a loop once someone clicks.

Preview:

Layout Screenshot

Code:

<!-- (c) Layout created by Twilight Sparkle (https://layouts.spacehey.com/layout?id=152) -->

<style>
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 80px;
        transition: 0.5s width;
    }

    #music:hover {
        width: 360px;
    }
</style>

<!-- Replace these two URLs with .ogg and .mp3 versions of the song/radio station you want to play. If you don't have one or the other, you can just remove it. -->
<audio controls="controls" id="music" loop="loop">
    <source src="https://lainon.life/radio/cyberia.ogg" type="audio/ogg"/>
    <source src="https://lainon.life/radio/cyberia.mp3" type="audio/mpeg"/>
</audio>

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.

Comments

Displaying 7 of 7 comments ( View all | Add Comment )

Curtis Sillo	1614100863 Not Bad! Report Comment
sɐɾoɹ uᴉʌǝk	1613575945 Hell yeah!! Report Comment
zielakjr music	1613491825 great Report Comment
IconicDesignClothing.com	1613368961 I copied and pasted the code on its own and with an MP3 url; can't get it to work. Working for anyone else?? Report Comment Works on your page for me, but you might have to upload a converted ogg version — not everything can play mp3s! Here's a good site for doing so! by Twilight Sparkle; 1613699404; Report I tweaked it a little bit, but yeah, finally got it to work! Thanks for checking it out. by IconicDesignClothing.com; 1613942923; Report
Frances Matcheson ×Crowx	1613113973 Definitely gonna try this out. Thank you! Report Comment
Manda Malice	1613021574 Using!! Thank you!! Report Comment
z	1612834794 This is awesome! I removed the lower corner placement so now my "About Me" section has the player, and anyone can listen to Emo Kid on my profile xD Report Comment Hi! How were you able to make it play your own song? I can't seem to figure out how to have my profile playing music like in myspace days >. by RaexRatta; 1613098072; Report there's instructions in the comments of the code, you basically replace the provided link with a link to the music you want to play by z; 1613108359; Report Tried replacing the link and I do not know what I am doing wrong. Any help please! by Vinny DiGiacomo; 1613607643; Report It has to be an mp3 or ogg file hosted on a website! by Twilight Sparkle; 1613699329; Report Do you think I could use my soundcloud songs? by Fishnets; 1613864912; Report If you download it, convert it to an mp3/ogg file, and host it on a website, yes. This is not meant for SC embeds. by Twilight Sparkle; 1613864984; Report There's a way for some websites, if they're like a "download here" link if you click "copy link location" instead of clicking it, if the link it gives you ends in .mp3 or .ogg then you might be able to use it. Otherwise use a hosting site (I haven't figured out how to host music yet). by z; 1614057325; Report I am new to this I would love to learn how to play music and paste it I have done everything I know to do...thanks for your help .. by Tonya shortt; 1614103198; Report