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

Šøft_K!ttêǹ	1628095522 Can someone please give me instructions on how to put my own audio in I appreciate the help I can get ^-^ Report Comment
Zipper T Bunny	1627785619 [OOC] thank you so much! I'm using this RN! I can finally have Zipperlicious on my page once again. 😌 Report Comment
angel	1627210634 this is so cool! tysm. Report Comment
xXMilesMassacreXx	1627158898 tysmm!!!! Report Comment
blackburn3000	1626823613 THIS IS SO COOL! I LOVE THIS LAYOUT Report Comment
Laura♡	1626294844 I'm having such a hard time adding music to my page even using your player 😩 Report Comment You can always embed a youtube video by XxCaliConquestxX; 1626757759; Report
Nepster	1625963621 so cool!! Report Comment
h0p3_p1lls	1625668894 this is cool :0 Report Comment
20jallright	1625389400 thanks!! Report Comment
xAnDEr... ?!	1624869744 thank u!!! Report Comment
majime yamashita	1623954999 thank u!! Report Comment
Princess Of Destiny	1623902360 thank You! Report Comment
Paganinjedi	1616611188 Is there a way to file host for this from Kodi? Report Comment
Zev Rosenberg	1614823543 Where do you locate the mp3 player on your profile? I am having issues. Report Comment Your profile has a layout that uses a filter over everything. Due to...something, I guess, putting things on position:fixed or position:absolute while they're under a filter doesn't work. Sorry! by Twilight Sparkle; 1614854306; Report
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