« Web, HTML, Tech Forum

Radio Station Not Working With Y2K Theme

In Case You Dont Know
I Use This Y2K Theme for My Spacehey Account (Because all the Other Themes Have an Awkward Post 9/11 Feel to It)

I Want to Use A Link to A 90s Dance Station (FM 101 The Planet) to play
When You Enter My Site
(The Station is Only Really Available in Canada Right Now But i Managed to Find FM 101s Main Stream Link to Use in Here)

I Want to Have This on my Site to Add to the Experience That 1 Youtube Video or Spotify Playlist Wont Do

But When i Try to Add the Code to Add the Station
The Player Doesn't Work and When i Try to Edit The Code, The Stations Stream Link Vanishes

This is The Only True Y2K Theme That Exists

I Tested it in Codepen and It Works Fine
So IDK Why It Doesn't Work in the Main Spacehey Page

Heres The Source Code In Case Your Wondering


--------------------------------------------------------------------------------------------------------------------
<!-- (c) Layout created by emo.rat (https://layouts.spacehey.com/layout?id=3462) -->

<style>
.section {
    text-align: center;
}
.container {
    width: 950px;
    max-width: 100%;
    margin: 0 auto 10px;
}
h2 {
    font-size: 2.5em;
    margin: 0;
}
.online{
content:url(https://media.discordapp.net/attachments/783779926062268478/863162272897040404/on2.gif?width=125&height=48);
}
a {
    color: #f7f334;
    text-decoration: none;
}
.general-about .profile-pic img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 25px;
    border: solid white 3px;
    border-right: solid 7px;
    border-bottom: solid 15px;
}
.profile .blurbs .section h4 {
    margin: 0;
    color: #33da97;
}
body {
   /* background: url(https://pbs.twimg.com/media/E5ZxOBsXwAAizJD?format=jpg&name=large); */
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    text-transform: lowercase;
    background-blend-mode: overlay;
    background-color: #25025d;
    font-family: 'Fredoka One', cursive;
}
nav {
    margin-bottom: 48px;
}
nav .top {
    background: #53263900;
    padding: 15px 10px 14px 10px;
    display: flex;
    color: black !important;
}
nav .top .center form {
    margin-top: -2px;
    width: 100%;
    color: white;
}
nav .links {
    background-color: #a2a2a2;
    padding: 3.5px 16px 5.5px 16px;
    text-align: center;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    margin: 0px;
    z-index: 9;
}
nav .links a {
    text-decoration: none;
    color: white;
    font-size: 0.98em;
}
nav .top a {
    text-decoration: none;
    color: white;
}
nav .top .left .logo {
    width: 165px;
    height: 42px;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 10;
    border-radius: 6px;
    background-color: #a2a2a2;
    border: solid 6px #00000000;
    block-size: 66px;
}
nav .top {
    display: flex!important;
    opacity: 1!important;
    position: fixed;
    top: 0px;
    right: 0;
    padding: 6px;
    z-index: 10;
}
.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    border-radius: 22px;
    margin: 0 auto;
    border: solid white 3px;
    border-right: solid 7px white;
    border-bottom: solid 15px white;
}
.mood:after {
    content: url(https://media.discordapp.net/attachments/783779926062268478/864632650958635048/dismissysthing.png?width=350&height=120)
}
.profile .blurbs .heading, .profile .friends .heading {
    background: #f7f335;
    color: rgb(0 0 0 / 90%);
    padding: 2px 7px;
    border-radius: 40px;
}
.profile .friends .person p {
    color: #baddff;
    font-weight: bold;
    width: 100%;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}
.profile .friends .person {
    width: 105px;
    display: inline-block;
    padding: 5px;
    margin: 0 3px 10px 3px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background: #6d0fb9;
    color: white;
    padding: 2px 7px;
    border-radius: 0px 14px;
}
.details-table td:first-child {
    background: #ffdbdb00;
    color: #290973;
    font-weight: bold;
    width: 33%;
}
.details-table td {
    background: #000438;
    vertical-align: top;
}
.details-table td * {
    border-radius: 25px;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    width: 100%;
    border: 2px solid #ffffff;
    border-left: 11px solid;
    margin: 10px 0;
    border-right: 7px solid;
    border-radius: 0px 20px;
}
main, footer {
    background: #51007991;
    color: white;
    padding: 6px 6px;
    font-size: 75%;
    border-radius: 48px;
    border: solid white 6px;
    border-right: solid 13px;
    border-bottom: solid 30px;
}
.table-section:not(:last-child) .details-table tr td:first-child p {
    color: transparent !important;
    text-shadow: none !important;
    letter-spacing: -100px;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after {
    content: "general";
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after {
    content: "musics";
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after {
    content: "movies";
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after {
    content: "tv";
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after {
    content: "books";
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after {
    content: "games";
}
.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p::after {
    content: "music box";
}
.table-section:not(:last-child) .details-table tr:nth-child(8) td:first-child p::after {
    content: "random";
}
.details-table tr td:first-child p:after {
    color: white;
    letter-spacing: normal !important;
    filter: brightness(100%) !important;
}
main .left, main .right {
    padding: 10px;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 10px);
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
</style>

<style>

.comments-table td, .music-table td {
    background: #4b0d99c7;
    vertical-align: top;
}
.comments-table td:first-child, .music-table td:first-child {
    background: #5e0d9980;
    text-align: center;
    font-weight: bold;
    width: 38%;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon) {
    width: 130px;
    max-width: 100%;
    max-height: 200px;
    border-radius: 22px;
    margin: 0 auto;
    border: solid white 3px;
    border-left: solid 7px white;
    border-right: solid 15px white;
}
.profile-info {
    display: flex;
    background: #4912a0;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
    background-size: 100% 100%;
    border-radius: 25px;
    border: solid white 4px;
    border-right: solid 8px;
    border-left: solid 18px;
}
.mood:before {
    background-image: url(https://media.discordapp.net/attachments/783779926062268478/863140205099220992/Animal-Crossing.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 100px;
    width: 100px;
    content: " ";
    transform: rotate(-57deg) scale(2.2) translateX(-3.6em) translateY(-0.7em);
    position: absolute;
    z-index: -1;
}
.general-about:before {
    background-image: url(https://media.discordapp.net/attachments/783779926062268478/866673035481317386/Y2K_Aesthetic_Institute_BLM_on_Twitter.png?width=760&height=1333);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 100px;
    width: 100px;
    content: " ";
    transform: rotate(0deg) scale(1) translateX(7em) translateY(-4.5em);
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.profile h1 {
    font-size: 7.2em;
    margin: 0 0 10px 0;
    font-family: 'Fredoka One', sans-serif;
    font-weight:normal;
    font-style:normal;
    text-shadow: 4px 4px #aa4dfe;
}
.profile .left h1:before {
    background-image: url(https://media.discordapp.net/attachments/783779926062268478/862928667385266206/y2ktest2.gif);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    height: 108%;
    width: 100%;
    left: 0px;
    top: 0;
    content: " ";
    transform: scale(1);
    position: fixed;
    z-index: -1;
}
.profile .left h1:after {
    background-image: url(https://media.discordapp.net/attachments/783779926062268478/865057349009276928/jojo.gif);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    height: 26%;
    width: 100%;
    left: 0px;
    bottom: 0px;
    content: " ";
    transform: scale(1);
    position: fixed;
    z-index: -3;
}
iframe {
    border-radius: 0px 35px !important;
    opacity: 95%;
}
</style>

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

<style>
.audio {
    border: 1px solid;
    background: #f3f3f3;
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px;
    padding: 5px;
}
</style>
<div class="audio">Music Powered By: FM 101 The Planet!<br/>
<audio controls="">
  <source src="https://c9.radioboss.fm:18130/stream" type="audio/mpeg">
  Your browser does not support the audio element.
</source></audio>
</div>


Report Topic

2 Replies

Sort Replies:

Reply by Squishy

posted
updated

because your audio source requires a sign in perhaps? when i just just going to the source in a browser it just asks me to sign in. your cookies and autofills might be automatically signing you o on whatever your accessing it from. but unless theirs something im missing here its not allowing me permission to view the source


edit: i tried on an external source just saving as a local html file the audio section and the player comes up but wont play unless i enter login information on a popup on page load. so even if the site wasent blocking you chances are it wouldent play


Permalink Report Reply

Reply by baliebox4916

posted

how do i make a local/external file to play the station

you dont need a sign in
but as of nov 2022 the station is region locked to canada right now due to funding issues

but at the same time its the closest thing to the old energy 108 that exists
(hence the combination of this station and the 90s y2k theme)

if i get the station working ill probably put the words
"VPN Required, Connect to a Canadian Server to Access The Secret 90s Radio"


Permalink Report Reply