Newer
Older
<!doctype html>
<html lang="en-IE">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>radio waves</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="">
<meta property="og:title" content="radio waves">
<meta property="og:url" content="">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<meta name="theme-color" content="#77B19D">
<script defer src="assets/font-awesome/js/solid.js"></script>
<script defer src="assets/font-awesome/js/fontawesome.js"></script>
<script defer data-domain="radio.byemc.xyz" src="https://analytics.byecorps.com/js/script.js"></script>
</audio>
<nav id="navbar">
<a href="#tuner" class="nav_active">
<span class="fa-fw fa-solid fa-radio"></span>
Tuner
</a>
<a href="#station" aria-disabled="true">
<span class="fa-fw fa-solid fa-play-circle"></span>
Now Playing
</a>
<a href="#settings">
<span class="fa-fw fa-solid fa-cog"></span>
Settings
</a>
</nav>
<main>
<aside id="first">
<div id="controls">
<button id="playpause">
Stopped
</button>
<div class="volume">
<button id="control_mute">
<span class="fa-fw fa-solid fa-volume-high" title="Mute"></span>
</button>
<label for="control_real_volume" style="display: none">Volume</label>
<input type="number" max="100" min="0" name="real_volume" id="control_real_volume">
</div>
<input type="range" max="100" min="0" value="75" name="volume" id="control_volume">
</div>
</aside>
<section id="tuner">
<h2>Tuner</h2>
<div class="switcher">
<a href="#add_station" class="button"><span class="fa-fw fa-solid fa-plus-circle"></span> Add a new station</a>
</div>
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
</div>
</section>
<section id="add_station" hidden="hidden" aria-hidden="true">
<h2>Add a station manually</h2>
<div class="switcher">
<a href="#add_station_from_azuracast">Add stations from AzuraCast</a>
</div>
<div class="input"><label for="add_station_name">Station Name</label><input type="text" name="station_name" id="add_station_name"></div>
<div class="input"><label for="add_station_url">Station audio url</label><input type="url" name="station_url" id="add_station_url"></div>
<div class="radio">
<h3>Metadata source</h3>
<label>
<input type="radio" name="add_metadata_type" id="add_station_metadata_icecast_option" checked value="icecast">
Icecast stream
</label>
<label>
<input type="radio" id="add_station_metadata_azuracast_option" name="add_metadata_type" value="azuracast">
Azuracast server
</label>
</div>
<div hidden id="add_station_manually_azuracast_metadata_options">
<h3>Azuracast metadata options</h3>
<div class="input">
<label for="add_station_azuracast_server">Azuracast server URL</label><input type="url" name="station_azuracast_server" id="add_station_azuracast_server">
</div>
<div class="input">
<label for="add_station_azuracast_shortname">Azuracast station shortname</label><input type="text" name="station_azuracast_shortname" id="add_station_azuracast_shortname">
</div>
</div>
<div class="switcher">
<button id="add_station_add_station">
<span class="fa-fw fa-solid fa-plus-circle"></span>
Add station
</button>
</div>
</section>
<section id="add_station_from_azuracast" hidden="hidden" aria-hidden="true">
<h2>Add stations from Azuracast</h2>
<div class="switcher">
<a href="#add_station">Add station manually</a>
</div>
<label for="add_fromazcast_url">Azuracast Server URL</label>
<div id="add_azuracast_searcher" class="input_button_hybrid">
<input type="url" placeholder="https://example.com" name="add_fromazcast_url" id="add_fromazcast_url">
<button id="add_azcast_search"><span class="fa-fw fa-solid fa-search"></span> Search</button>
</div>
<div id="add_azuracast_results">
</div>
</section>
<section id="station" hidden="hidden" aria-hidden="true">
<h2 id="station_name">Loading...</h2>
<div id="station_info" class="info"><span class="fa-fw fa-solid fa-headphones"></span> <span id="live_listeners">0</span></div>
<p id="station_description"></p>
<div class="stack v">
<div class="chip song nowplaying stack h">
<img src="img/radio-icon.png" alt="No album art" class="rounded" id="current-song-art">
<span class="subtitle">Now playing:</span>
<span id="current-song-title" class="title">Loading...</span>
<span id="current-song-artist" class="artist">Loading...</span>
<div class="stack hw npgap v">
<progress id="progress"></progress>
<div class="stack fw nogap align-space-between h">
<span id="elapsed">0:00</span>
<span id="duration">0:00</span>
</div>
</div>
<div id="nextup" class="ship song compact nextup stack h">
<img src="img/radio-icon.png" alt="No album art" class="rounded" id="next-song-art">
<div class="stack v nogap justify-center">
<span class="subtitle">Next up:</span>
<span id="next-song-title" class="title">Loading...</span>
<span id="next-song-artist" class="artist">Loading...</span>
<span id="next-song-until" class="subtitle">in 3 minutes</span>
</div>
</div>
</div>
<h2 id="history-title" style="margin: 0.5rem 0">History</h2>
<div id="history" class="stack v">
No history :(
</div>
<section id="settings" hidden="hidden" aria-hidden="true">
<h2>Settings</h2>
<div class="stack v">
<div class="stack h">
<img src="img/radio-icon.png" alt="Waves icon" class="rounded appicon-settings">
<div class="stack v nogap">
<span class="spacer"></span>
<span class="title">Waves</span>
<span class="subtitle">(c) byemc 2024</span>
<span class="spacer"></span>
</div>
</div>
</div>
<section id="fullscreen" hidden="hidden" aria-hidden="true" >
<div class="stack spacer fh align-center">
<div class="stack v align-center spacer">
<img src="img/radio-icon.png" alt="No album art" class="rounded fw" id="full-current-song-art">
<div class="stack v fw nogap align-center text-align-center">
<span class="subtitle">Now playing:</span>
<span id="full-current-song-title" class="title">Loading...</span>
<span id="full-current-song-artist" class="artist">Loading...</span>
<div class="stack hw npgap v">
<div class="stack fw nogap align-space-between h">
<span id="full-elapsed">0:00</span>
<span id="full-duration">0:00</span>
</div>
<progress id="full-progress"></progress>
</div>
</div>
</div>
<div class="spacer"></div>
</div>
</section>