<!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"> <link rel="manifest" href="manifest.json"> <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> </head> <body> <header> <div class="start"><h1>waves</h1></div> </header> <audio id="player"> <source> </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"> <span class="fa-fw fa-solid fa-play"></span> 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> <div class="stack v" id="tunerStationList"> </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"> <div class="stack v fw nogap justify-center"> <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> </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> <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> <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> </main> <script src="js/app.js"></script> </body> </html>