Compare commits
3 Commits
912da7c28b
...
1f1c82f18a
| Author | SHA1 | Date | |
|---|---|---|---|
| 1f1c82f18a | |||
| 3305e97552 | |||
| dadf192aef |
@ -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%;
|
||||
}
|
||||
|
||||
BIN
static/pyrite.jpg
Normal file
BIN
static/pyrite.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@ -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);
|
||||
}
|
||||
|
||||
@ -27,32 +27,38 @@
|
||||
<div id="track_list" class="list">
|
||||
</div>
|
||||
<div id="player_container">
|
||||
<span id="playlist_container">
|
||||
<select id="playlist" onchange="select_playlist(event)">
|
||||
{% for playlist in playlists %}
|
||||
<option value="{{ playlist }}"{% if playlist == request.cookies.get('playlist') %} selected{% endif %}>{{ playlist }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</span>
|
||||
<span id="cover_art"><img alt="Album cover art" src=""></span>
|
||||
<span id="player_controls">
|
||||
<h4><span id="now_playing_artist"></span> - <span id="now_playing_album"></span></h4>
|
||||
<h3 id="now_playing_title"></h3>
|
||||
<audio id="player" controls></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>
|
||||
<input type="range" id="seek-slider" max="100" value="0">
|
||||
</span>
|
||||
<div>
|
||||
<div id="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div>
|
||||
<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>
|
||||
</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>
|
||||
<button id="mute-btn" class="btn">
|
||||
<img id="mute" src="./static/volume-max.svg"</img>
|
||||
</button>
|
||||
<input id="volume-slider" type="range" max="100" value="0">
|
||||
</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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user