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:

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

Emilia_Darling	1634009481 where do i add the link from youtube in the code Report Comment
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
katie hollow	1633842503 IDK if I just don't know what I'm doing or I'm stupid but how do I get the mp3 file and Ogg link from my YT playlist and/or video? Report Comment im not the og poster, but if u wanna convert videos to audio files there's always those online conversion sites you can use (such as ytmp3.cc). just be sure to block notifications and close the popups.. by marl.png; 1633859994; Report
░▒▓█ 𝐬𝐨𝐜𝐤 █▓▒░	1633136752 so any live music or yt vid. what about spotify? Report Comment Just goto spotify and use the share option Then its embed playlists/track/album Copy that code to your about me and you will have a spotify player with songs from that playlist This also works for youtube, mixcloud, soundcloud, spotify If you change the autoplay flag to 1 from 0 it will autoplay but not in google chrome by Fluid Dynamic; 1633643640; Report by ░▒▓█ 𝐬𝐨𝐜𝐤 █▓▒░; 1633645663; Report
Dolli-Con	1632508953 Is it possible to put a link to a music video on youtube and get the audio from there? Because I'm having a few issues... I'm sure you've gotten this question a thousand times, but I just wanted to ask again, just in case! Report Comment Yes use the share options then "embed" Copy that code to about me and the video will be on your page! I don't think you can have just the music as the controls for the player have to be visible by Fluid Dynamic; 1633643703; Report
owolivia	1632114368 THANK YOU YAYAYAYYAYA :DDD Report Comment
Davidillumination	1631455791 THANK YOU SO MUCH BRO!!!!!!!!!! (シ_ _)シ(シ_ _)シ(シ_ _)シ Report 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 Hello Soft Edit this line and chage: Like this: Replace it "https://lainon.life/radio/cyberia.mp3" for your link radio... Regards by FaviCool; 1628734980; Report
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