add default cover

static/pyrite.css

@@ -48,22 +48,6 @@ input[type="radio"]:checked+div {
 	grid-area: c;
 }
 
-#player_container {
-	grid-area: f;
-	display: flex;
-	justify-content: center;
-}
-
-#cover_art {
-	padding-right: 1em;
-	padding-top: 0.5em;
-}
-
-img {
-	height: 100%;
-	max-height: 30vh;
-}
-
 .list_item {
 	height: 2em;
 	margin: 0.25em;
@@ -84,6 +68,30 @@ img {
 	font-size: 80%;
 }
 
+#player_container {
+	grid-area: f;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+#player_container > div {
+	display: flex;
+}
+
+#cover_art {
+	padding-right: 1em;
+	padding-top: 0.5em;
+}
+
+img {
+	height: 100%;
+	max-height: 30vh;
+}
+
+#title {
+}
+
 input[type='range'] {
 	accent-color: green;
 }
@@ -99,3 +107,16 @@ button img {
 #next-track-btn img {
 	transform: rotate(180deg);
 }
+
+#seek_controls {
+	width: 50%;
+}
+
+#seek_controls output {
+	margin-left: 0.125em;
+	margin-right: 0.125em;
+}
+
+#seek-slider {
+	width: 90%;
+}

static/pyrite.js

@@ -1,8 +1,10 @@
 var player;
 var pos_int;
+var analyser;
+var audio_data;
 
 function init() {
-	player = document.getElementById('player');
+	player = document.querySelector('#player');
 
 	player.addEventListener("ended", nextTrack);
 
@@ -13,6 +15,8 @@ function init() {
 	navigator.mediaSession.setActionHandler('nexttrack', nextTrack);
 
 	pos_int = setInterval(update_position, 300);
+
+	init_analyzer();
 }
 
 async function get_rand_track() {
@@ -77,4 +81,17 @@ function update_position() {
 		playbackRate: player.playbackRate,
 		position: parseInt(player.currentTime)
 	});
+
+	analyser.getByteTimeDomainData(audio_data);
+}
+
+function init_analyzer() {
+	let audioCtx = new AudioContext();
+	analyser = audioCtx.createAnalyser();
+	let source = audioCtx.createMediaElementSource(player);
+
+	source.connect(analyser);
+	source.connect(audioCtx.destination);
+
+	audio_data = new Uint8Array(analyser.frequencyBinCount);
 }

templates/index.html

@@ -27,32 +27,38 @@
 			<div id="track_list" class="list">
 			</div>
 			<div id="player_container">
-				<span id="playlist_container">
+				<div>
-					<select id="playlist" onchange="select_playlist(event)">
+					<div id="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div>
-						{% for playlist in playlists %}
+					<div>
-						<option value="{{ playlist }}"{% if playlist == request.cookies.get('playlist') %} selected{% endif %}>{{ playlist }}</option>
+						<div id="title">
-						{% endfor %}
+							<h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4>
-					</select>
+							<h3 id="now_playing_title">Title</h3>
-				</span>
+						</div>
-				<span id="cover_art"><img alt="Album cover art" src=""></span>
+						<div id="player_controls">
-				<span id="player_controls">
+							<audio id="player" style="display:none"></audio>
-					<h4><span id="now_playing_artist"></span> - <span id="now_playing_album"></span></h4>
+							<button id="prev-track-btn" class="btn" onclick="prevTrack()">
-					<h3 id="now_playing_title"></h3>
+								<img id="prev" src="./static/prev.svg"></img>
-					<audio id="player" controls></audio>
+							</button>
-					<button id="prev-track-btn" class="btn" onclick="prevTrack()">
+							<button id="play-btn" class="btn" onclick="playTrack()">
-						<img id="prev" src="./static/prev.svg"></img>
+								<img id="prev" src="./static/play.svg"></img>
-					</button>
+							</button>
-					<button id="play-btn" class="btn" onclick="playTrack()">
+							<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
-						<img id="prev" src="./static/play.svg"></img>
+								<img id="prev" src="./static/pause.svg"></img>
-					</button>
+							</button>
-					<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
+							<button id="next-track-btn" class="btn" onclick="nextTrack()">
-						<img id="prev" src="./static/pause.svg"></img>
+								<img id="prev" src="./static/prev.svg"></img>
-					</button>
+							</button>
-					<button id="next-track-btn" class="btn" onclick="nextTrack()">
+							<button id="mute-btn" class="btn">
-						<img id="prev" src="./static/prev.svg"></img>
+								<img id="mute" src="./static/volume-max.svg"</img>
-					</button>
+							</button>
-					<input type="range" id="seek-slider" max="100" value="0">
+							<input id="volume-slider" type="range" max="100" value="0">
-				</span>
+						</div>
+					</div>
+				</div>
+				<div id="seek_controls">
+					<input id="seek-slider" type="range" max="100" value="0">
+					<output id="current-time">0:00</output>/<output id="duration">0:00</output>
+				</div>
 			</div>
 		</main>
 		<template id="artist_template">