2024-10-29 10:53:46 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Pyrite</title>
|
2024-10-30 12:53:42 -04:00
|
|
|
<link rel="stylesheet" type="text/css" href="./static/pyrite.css">
|
2024-10-29 10:53:46 -04:00
|
|
|
<script type="text/javascript" src="./static/pyrite.js"></script>
|
|
|
|
|
<script>window.onload = init;</script>
|
2024-10-30 12:53:42 -04:00
|
|
|
<link rel="manifest" href="./static/pyrite.webmanifest">
|
2024-10-29 10:53:46 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-10-30 12:53:42 -04:00
|
|
|
<main>
|
|
|
|
|
<header>
|
|
|
|
|
<h1>Pyrite</h1>
|
|
|
|
|
</header>
|
|
|
|
|
<div id="artist_list" class="list">
|
|
|
|
|
{% for artist in artists %}
|
|
|
|
|
<label for="artist_{{ loop.index }}">
|
|
|
|
|
<input type="radio" id="artist_{{ loop.index }}" name="artist" value="{{ artist }}" onclick="select_artist(event)">
|
|
|
|
|
<div class="list_item artist">
|
|
|
|
|
<span class="artist_name">{{ artist }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
<div id="album_list" class="list">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="track_list" class="list">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="player_container">
|
2025-01-08 12:41:45 -05:00
|
|
|
<div id="settings">
|
|
|
|
|
<div>
|
|
|
|
|
<label for="playlist-select">Playlist:</label>
|
|
|
|
|
<select id="playlist-select">
|
|
|
|
|
<option>All Tracks</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label for="visualizer-select">Visualizer:</label>
|
2025-01-14 13:34:29 -05:00
|
|
|
<select id="visualizer-select" onchange="select_visualizer(event)">
|
2025-01-08 12:41:45 -05:00
|
|
|
<option value="disabled" selected>Disabled</option>
|
|
|
|
|
<option value="bar_graph">Bar Graph</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-11-28 13:27:29 -05:00
|
|
|
<div id="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div>
|
|
|
|
|
<div id="title">
|
|
|
|
|
<h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4>
|
|
|
|
|
<h3 id="now_playing_title">Title</h3>
|
2024-12-28 19:37:15 -05:00
|
|
|
<canvas id="visualizer" height="300" width="1000"></canvas>
|
2024-11-28 13:27:29 -05:00
|
|
|
</div>
|
|
|
|
|
<div id="player_controls">
|
|
|
|
|
<audio id="player" style="display:none"></audio>
|
|
|
|
|
<button id="prev-track-btn" class="btn" onclick="prevTrack()">
|
|
|
|
|
<img id="prev" src="./static/prev.svg"></img>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="play-btn" class="btn" onclick="playTrack()">
|
|
|
|
|
<img id="prev" src="./static/play.svg"></img>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
|
|
|
|
|
<img id="prev" src="./static/pause.svg"></img>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="next-track-btn" class="btn" onclick="nextTrack()">
|
|
|
|
|
<img id="prev" src="./static/prev.svg"></img>
|
|
|
|
|
</button>
|
2024-11-28 20:26:00 -05:00
|
|
|
<button id="vol-btn" class="btn" onclick="volume_off()">
|
|
|
|
|
<img id="vol" src="./static/volume-max.svg"</img>
|
2024-11-28 13:27:29 -05:00
|
|
|
</button>
|
2024-11-28 20:26:00 -05:00
|
|
|
<button id="vol-off-btn" class="btn" onclick="volume_restore()" style="display:none">
|
|
|
|
|
<img id="vol-off" src="./static/volume-off.svg"</img>
|
|
|
|
|
</button>
|
|
|
|
|
<input id="volume-slider" type="range" max="100" value="100">
|
2024-11-20 15:51:51 -05:00
|
|
|
</div>
|
|
|
|
|
<div id="seek_controls">
|
2024-11-28 20:26:00 -05:00
|
|
|
<input id="seek-slider" type="range" max="0" value="0">
|
2024-11-28 02:51:39 -05:00
|
|
|
<output id="current-time">0:00</output>/<output id="duration">0:00</output>
|
2024-11-20 15:51:51 -05:00
|
|
|
</div>
|
2024-10-30 12:53:42 -04:00
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
<template id="artist_template">
|
|
|
|
|
<label for="artist_$n">
|
|
|
|
|
<input type="radio" id="artist_$n" name="artist" value="$artist_name" onclick="select_artist(event)">
|
|
|
|
|
<div class="list_item artist">
|
|
|
|
|
<span class="artist_name">$artist_name</span>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
</template>
|
|
|
|
|
<template id="album_template">
|
|
|
|
|
<label for="album_$n">
|
|
|
|
|
<input type="radio" id="album_$n" name="album" value="$album_name" onclick="select_album(event)">
|
|
|
|
|
<div class="list_item album">
|
2024-11-28 13:27:29 -05:00
|
|
|
<img src=""><span class="album_name">$album_name</span><span class="album_year">$album_year</span>
|
2024-10-30 12:53:42 -04:00
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
</template>
|
|
|
|
|
<template id="track_template">
|
|
|
|
|
<label for="track_$n">
|
|
|
|
|
<input type="radio" id="track_$n" name="track" value="$track_title" onclick="select_track(event)">
|
|
|
|
|
<div class="list_item track">
|
|
|
|
|
<span class="track_num">$disc_num.$track_num</span><span class="track_title">$track_title</span><span class="track_length">$track_len</span>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
</template>
|
|
|
|
|
</body>
|
2024-10-29 10:53:46 -04:00
|
|
|
</html>
|
