Subtle Background Music Player (no autoplay)

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

Description:

This does not work with raw YouTube or other service links. You need a file host that can serve mp3s with a direct link, like copying the URL from Discord uploads or even Google Drive and Dropbox using the methods described here..

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.

Update: If you want to have it play automatically just in case someone has autoplay enabled for the website, add autoplay="autoplay" after loop="loop" in the code. This does not mean it will autoplay necessarily -- your browser would have to allow you to enable autoplay. Please do not complain if autoplay does not work, that's simply something they changed about web browsers and there's no way to get around it with the HTML spacehey gives you.

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:

click on the image for a larger preview

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 20 of 44 comments ( View all | Add Comment )

Cress	1647525079 whenever i try to paste the code the part with the audio gets puffed Report Comment legit the same problem here by alternative2707; 1660177793; Report Same issue. ._. by Carron Patrick; 1663117579; Report Sameeee Any1 have a fix 4 this? by Raven; 1665298254; Report how am i suppose to customize the audio player? can you help me out? by sl1ppery_sh0es; 1674724211; Report same here! by dollhaus; 1680460651; Report same by Ace, The Creator; 1685319230; Report same problem here :/ by bootstrap_idk; 1692082920; Report
Practice_Safe_Hex	1637727319 So I changed the YouTube embedded code to an mp3 and posted the whole code but all that comes up is a music player with a play button but says 0 minutes. It's like it added the music box but not the song. Any suggestions? Report Comment
indyyy	1637018117 im obsessed... Report Comment
Lune	1636943368 Amazing music player! Report Comment
uw4ntg1g1✮	1636794725 This one doesn't auto play but I found one that does. Copy paste this into "interests" To pick ur own music first go to youtube, find the embed link under 'share' and copy ONLY the numbers and letters from the last part of a YouTube link. Paste where the # are (delete the hashtags) but do NOT remove the question mark Report Comment just post in anywhere in interest, example general? by Lena\|Bunz; 1636795555; Report “ABOUT ME” works too but I put mine in “Interests” because my background is in about me but it will work either way by uw4ntg1g1✮; 1636796243; Report Comment the link to the YouTube video (link) you want I’ll just paste it here by uw4ntg1g1✮; 1636851905; Report I LITERALLY FORGOT 2 PASTE THE CODE LMAO but thisbisbwhatbibwasbtalkingabout by uw4ntg1g1✮; 1636853328; Report Ohhh wow apparently it won’t let me paste the code sorry :/ … that’s why u couldn’t see it in my original comment by uw4ntg1g1✮; 1636853540; Report I’m trying to explain that I am pasting it but it won’t post it just removes it from final comment by uw4ntg1g1✮; 1636853647; Report that’s too much work & I don’t care enough. If u were a hot girl then definitely Nice layout tho by uw4ntg1g1✮; 1636873868; Report lmaoooo by KOOLKAT; 1636883237; Report im a hawt girl now help a haux out. i dont see the question mark youre talking about darling by Destini X Shakur; 1636956673; Report I got u hottie by uw4ntg1g1✮; 1637106815; Report
Shonneri	1636787935 I can't get the autoplay to work for nothing! Report Comment https://blog.spacehey.com/entry?id=97599 this works for me :) by Remi; 1692011766; Report
Marissa	1636782121 https://blog.spacehey.com/entry?id=48644 A better music option Report Comment
Rheanna	1636779078 autoplay isnt working for me D: Report Comment
Stefanie Minaj	1636776396 Someone help meeee lol I want to add music but I’m confused Report Comment add that code to your about me section. it won't autoplay, but the play button will pop up in the bottom left :) by Shonneri; 1636787982; Report
VSOE✨	1636770663 how do i put auto play ? Report Comment Add me sexy salsa by Jlashey; 1636771124; Report lol i just did mamas by VSOE✨; 1636772427; Report lol i just did mamas by VSOE✨; 1636772428; Report did you figure it out ? I cant !! by Hannahhhh; 1636774847; Report Not with this iPhone lol but I won’t give up by Jlashey; 1636776558; Report Yes💪🏼 Lol I have a Spotify playlist but it doesn’t play unless you press play lol by Hannahhhh; 1636777484; Report okay ruben so i got these cousins i can offer lmaoooo by VSOE✨; 1636996772; Report
Billionaire Swagg	1636767149 I’m trying to get it to autoplay every time I put autoplay after loop it still won’t autoplay Report Comment Add me pls 💋 by Jlashey; 1636771073; Report I did by Billionaire Swagg; 1636777507; Report Hey add me! Something on your page caught my attention by Aneeezy; 1636784009; Report Ooouuu I went to your page how did you get the Autoplayer help me out by MeMe Da Qu33n; 1637036474; Report
Jlashey	1636737809 I’m confused on how to add music to my profile need a little help Report Comment you can use soundcloud. click embedd and auto play, copy and paste in any of your boxes like "about me". by Ms. Candi Babyyy; 1636748400; Report I don’t see the that in SoundCloud to copy in past it I have the app tho by Jlashey; 1636754708; Report you have to click "share" and then "embed". it should show the code to copy and paste. try doing it from a desktop. by Ms. Candi Babyyy; 1636765252; Report That must be on a computer cause when I try on my iPhone it’s not working in trust me I really been trying lol by Jlashey; 1636771040; Report That must be on a computer cause when I try on my iPhone it’s not working in trust me I really been trying lol by Jlashey; 1636771041; Report thanks boo ! by VSOE✨; 1636771303; Report
Athena	1636710981 Hey, that Nancat keeps showing up and saying this feature isn’t available yet. Any idea what I did incorrectly? Report Comment
French LeShietski	1636691348 someone help me out, just made a discord for basically no reason as i am still so confused. doesnt let me send it in a message cause i have no one on discord to message. or what you mean by hosting it like i got the song files ready Report Comment If you don't have anyone to message on Discord, maybe try this? by Twilight Sparkle; 1636691704; Report this worked like a charm, much appreciated. big ol smile on my face rn. the nostalgia is real!!! by French LeShietski; 1636693659; Report
🌺🎹Kaede akamatsu🎹🌺	1636315145 I have a quick question, sorry if I'm bothering you but is it possible to put a link to a YouTube video in to the layout? Report Comment Or a song from sound cloud? by 🌺🎹Kaede akamatsu🎹🌺; 1636315338; Report no you need to turn it into an mp3, and then host that mp3 somewhere by Twilight Sparkle; 1636334927; Report
liz	1635215174 anyone know how to put a Spotify playlist?,,, Report Comment Aún no sabes cómo ponerla? by Kitti ♡; 1636473640; Report yo no se enseñame by 𝖈𝖗𝖊𝖊𝖕𝖞_𝖇𝖑𝖔𝖔𝖉𝖞_𝖐𝖎𝖙𝖙𝖞; 1636649741; Report kjkdf idk como by liz; 1637072506; Report
Lynnbzkl	1635189378 where I paste the youtube link in the code. . .? Report Comment I think in about me I did but I don’t hear it by Nika; 1636727015; Report
Emilia_Darling	1634009481 where do i add the link from youtube in the code Report Comment It is not youtube compatible. by Kennith :3; 1638067940; Report If you want to use youtube go to the video and click share, then press embed and copy it from there and then paste it in the about me section under edit your profile. make sure to put a space between the embed and everything else by Kennith :3; 1638068202; Report
Your_Local_Critter	1633915989 Does anyone know how to add your own music :0? Report Comment send the mp3 as an attachment in a discord server or chat, right click it once you've sent it, hit "copy link address", and paste it in the mp3 section then delete the ogg one. by Xxx.v4mp1r3du3t.xxX; 1634334661; Report