Compare commits
2 Commits
1f1c82f18a
...
4f8edc0b43
| Author | SHA1 | Date | |
|---|---|---|---|
| 4f8edc0b43 | |||
| 60da14d4f5 |
@ -70,16 +70,17 @@ input[type="radio"]:checked+div {
|
||||
|
||||
#player_container {
|
||||
grid-area: f;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#player_container > div {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 2fr 1fr;;
|
||||
grid-template-rows: 1fr auto auto;
|
||||
grid-template-areas:
|
||||
"L A B R"
|
||||
"L A C R"
|
||||
"L D D R";
|
||||
}
|
||||
|
||||
#cover_art {
|
||||
grid-area: A;
|
||||
padding-right: 1em;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
@ -90,6 +91,11 @@ img {
|
||||
}
|
||||
|
||||
#title {
|
||||
grid-area: B;
|
||||
}
|
||||
|
||||
#player_controls {
|
||||
grid-area: C;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
@ -109,7 +115,7 @@ button img {
|
||||
}
|
||||
|
||||
#seek_controls {
|
||||
width: 50%;
|
||||
grid-area: D;
|
||||
}
|
||||
|
||||
#seek_controls output {
|
||||
|
||||
@ -2,11 +2,14 @@ var player;
|
||||
var pos_int;
|
||||
var analyser;
|
||||
var audio_data;
|
||||
var vol_prev;
|
||||
|
||||
function init() {
|
||||
player = document.querySelector('#player');
|
||||
|
||||
player.addEventListener("ended", nextTrack);
|
||||
player.addEventListener('ended', nextTrack);
|
||||
player.addEventListener('loadedmetadata', display_duration);
|
||||
player.addEventListener('timeupdate', update_position);
|
||||
|
||||
navigator.mediaSession.setActionHandler('play', playTrack);
|
||||
navigator.mediaSession.setActionHandler('pause', pauseTrack);
|
||||
@ -14,7 +17,23 @@ function init() {
|
||||
navigator.mediaSession.setActionHandler('previoustrack', prevTrack);
|
||||
navigator.mediaSession.setActionHandler('nexttrack', nextTrack);
|
||||
|
||||
pos_int = setInterval(update_position, 300);
|
||||
let seek = document.querySelector('#seek-slider');
|
||||
seek.addEventListener('input', function(){
|
||||
player.currentTime = seek.value;
|
||||
display_current_time();
|
||||
});
|
||||
|
||||
let vol = document.querySelector('#volume-slider');
|
||||
vol.addEventListener('input', function(){
|
||||
player.volume = vol.value/100;
|
||||
if (vol.value == 0) {
|
||||
document.querySelector('#vol-btn').style.display = 'none';
|
||||
document.querySelector('#vol-off-btn').style.display = 'initial';
|
||||
} else {
|
||||
document.querySelector('#vol-btn').style.display = 'initial';
|
||||
document.querySelector('#vol-off-btn').style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
init_analyzer();
|
||||
}
|
||||
@ -74,15 +93,54 @@ function setMediaSession(track) {
|
||||
}
|
||||
|
||||
function update_position() {
|
||||
if (player.paused){return;}
|
||||
if (player.duration > 0 === false){return;}
|
||||
navigator.mediaSession.setPositionState({
|
||||
duration: parseInt(player.duration),
|
||||
duration: Math.floor(player.duration),
|
||||
playbackRate: player.playbackRate,
|
||||
position: parseInt(player.currentTime)
|
||||
position: Math.floor(player.currentTime)
|
||||
});
|
||||
|
||||
analyser.getByteTimeDomainData(audio_data);
|
||||
|
||||
document.querySelector('#seek-slider').value = Math.floor(player.currentTime);
|
||||
display_current_time();
|
||||
}
|
||||
|
||||
function calculate_time(raw_secs) {
|
||||
let mins = Math.floor(raw_secs / 60);
|
||||
let secs = Math.round(raw_secs % 60);
|
||||
let ret = mins + ':' + String(secs).padStart(2,'0');
|
||||
return ret;
|
||||
}
|
||||
|
||||
function display_duration() {
|
||||
let dur = document.querySelector('#duration');
|
||||
dur.textContent = calculate_time(player.duration);
|
||||
|
||||
document.querySelector('#seek-slider').max = Math.floor(player.duration);
|
||||
}
|
||||
|
||||
function display_current_time() {
|
||||
cur = document.querySelector('#current-time');
|
||||
cur.textContent = calculate_time(player.currentTime);
|
||||
}
|
||||
|
||||
function volume_off() {
|
||||
let vol = document.querySelector('#volume-slider');
|
||||
vol_prev = vol.value;
|
||||
vol.value = 0;
|
||||
player.volume = 0;
|
||||
|
||||
document.querySelector('#vol-btn').style.display = 'none';
|
||||
document.querySelector('#vol-off-btn').style.display = 'initial';
|
||||
}
|
||||
|
||||
function volume_restore() {
|
||||
let vol = document.querySelector('#volume-slider');
|
||||
vol.value = vol_prev;
|
||||
player.volume = vol_prev / 100;
|
||||
|
||||
document.querySelector('#vol-btn').style.display = 'initial';
|
||||
document.querySelector('#vol-off-btn').style.display = 'none';
|
||||
}
|
||||
|
||||
function init_analyzer() {
|
||||
|
||||
@ -27,36 +27,35 @@
|
||||
<div id="track_list" class="list">
|
||||
</div>
|
||||
<div id="player_container">
|
||||
<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 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>
|
||||
</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="vol-btn" class="btn" onclick="volume_off()">
|
||||
<img id="vol" src="./static/volume-max.svg"</img>
|
||||
</button>
|
||||
<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">
|
||||
</div>
|
||||
<div id="seek_controls">
|
||||
<input id="seek-slider" type="range" max="100" value="0">
|
||||
<input id="seek-slider" type="range" max="0" value="0">
|
||||
<output id="current-time">0:00</output>/<output id="duration">0:00</output>
|
||||
</div>
|
||||
</div>
|
||||
@ -73,7 +72,7 @@
|
||||
<label for="album_$n">
|
||||
<input type="radio" id="album_$n" name="album" value="$album_name" onclick="select_album(event)">
|
||||
<div class="list_item album">
|
||||
<img src="$cover_art_url"><span class="album_name">$album_name</span><span class="album_year">$album_year</span>
|
||||
<img src=""><span class="album_name">$album_name</span><span class="album_year">$album_year</span>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user