Twilight Sparkle's profile picture

Layout published by Twilight Sparkle

published
updated

View Layouts

View Profile

Report Layout

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:

Layout Screenshot
click on the image for a larger preview

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 46 comments ( View all | Add Comment )

Cress

Cress's profile picture

whenever i try to paste the code the part with the audio gets puffed


Report Comment



legit the same problem here

by alternative2707; ; Report

Same issue. ._.

by Carron Patrick; ; Report

Practice_Safe_Hex

Practice_Safe_Hex's profile picture

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

Happy

Happy's profile picture

Amazing, thank you so much for this. I've got a question though, how do I let it run through a playlist of different songs added to the code before looping back to the first one? So far it just plays the first song infinitely, which sure is looped, but...


Report Comment

indyyy

indyyy's profile picture

im obsessed...


Report Comment

Nova

Nova's profile picture

Amazing music player!


Report Comment

uw4ntg1g1✮

uw4ntg1g1✮'s profile picture

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; ; 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✮; ; Report

Comment the link to the YouTube video (link) you want I’ll just paste it here

by uw4ntg1g1✮; ; Report

I LITERALLY FORGOT 2 PASTE THE CODE LMAO but thisbisbwhatbibwasbtalkingabout

by uw4ntg1g1✮; ; 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✮; ; 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✮; ; Report

that’s too much work & I don’t care enough. If u were a hot girl then definitely

Nice layout tho

by uw4ntg1g1✮; ; Report

lmaoooo

by KOOLKAT; ; Report

im a hawt girl now help a haux out. i dont see the question mark youre talking about darling

by Destini X Shakur; ; Report

I got u hottie

by uw4ntg1g1✮; ; Report

Shonneri

Shonneri's profile picture

I can't get the autoplay to work for nothing!


Report Comment

Marissa

Marissa's profile picture

https://blog.spacehey.com/entry?id=48644

A better music option


Report Comment

Rheanna

Rheanna's profile picture

autoplay isnt working for me D:


Report Comment

Stefanie Minaj

Stefanie Minaj's profile picture

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; ; Report

VSOE✨

VSOE✨'s profile picture

how do i put auto play ?


Report Comment



Add me sexy salsa

by Jlashey; ; Report

lol i just did mamas

by VSOE✨; ; Report

lol i just did mamas

by VSOE✨; ; Report

did you figure it out ? I cant !!

by Johanna; ; Report

Not with this iPhone lol but I won’t give up

by Jlashey; ; Report

Yes💪🏼 Lol I have a Spotify playlist but it doesn’t play unless you press play lol

by Johanna; ; Report

okay ruben so i got these cousins i can offer lmaoooo

by VSOE✨; ; Report

Billionaire Swagg

Billionaire Swagg 's profile picture

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; ; Report

I did

by Billionaire Swagg; ; Report

Hey add me! Something on your page caught my attention

by Aneeezy; ; Report

Ooouuu I went to your page how did you get the Autoplayer help me out

by MeMe *Da Qu33n*; ; Report

Jlashey

Jlashey 's profile picture

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; ; Report

I don’t see the that in SoundCloud to copy in past it I have the app tho

by Jlashey; ; 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; ; 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; ; 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; ; Report

thanks boo !

by VSOE✨; ; Report

Adam

Adam's profile picture

Nice!! Thanks, that worked for me. I used https:// mailboxdrive .com/ as a free site to host my mp3 file and get a URL from it. Didn't see the audio player in the left bottom corner at first because it blended in to my background color, but now that I do it works great!


Report Comment



I did that but i cant seem to get it working, can you help?

by Crystal; ; Report

Can you please help me. I did that but my music won't play

by Makaveli_Killuminati; ; Report

Athena

Athena's profile picture

Hey, that Nancat keeps showing up and saying this feature isn’t available yet. Any idea what I did incorrectly?


Report Comment

French LeShietski

French LeShietski's profile picture

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; ; Report

this worked like a charm, much appreciated. big ol smile on my face rn. the nostalgia is real!!!

by French LeShietski; ; Report

🌺🎹Kaede akamatsu🎹🌺

🌺🎹Kaede akamatsu🎹🌺's profile picture

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🎹🌺; ; Report

no
you need to turn it into an mp3, and then host that mp3 somewhere

by Twilight Sparkle; ; Report

liz

liz's profile picture

anyone know how to put a Spotify playlist?,,,


Report Comment



Aún no sabes cómo ponerla?

by Kitti ♡; ; Report

kjkdf idk como

by liz; ; Report

Lynnbzkl

Lynnbzkl 's profile picture

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; ; Report

Emilia_Darling

Emilia_Darling's profile picture

where do i add the link from youtube in the code


Report Comment



It is not youtube compatible.

by Kennith ;3; ; 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; ; Report