112 lines
4.1 KiB
HTML
112 lines
4.1 KiB
HTML
{% load static %}
|
|
<div id="embed"></div>
|
|
<div id="album">
|
|
{% if track.album.image %}
|
|
<img src="{{track.album.image.url}}" />
|
|
{% elif track.album.image_url %}
|
|
<img src="{{track.album.image_url}}" />
|
|
{% else %}
|
|
<img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
|
|
{% endif %}
|
|
<h1 title="{{track.name}}">{{track.name}}</h1>
|
|
<h2 title="{{track.artist}}">{{track.artist}}</h2>
|
|
</div>
|
|
<input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
|
|
<div id="media-control" class="waiting">
|
|
<button id="play"></button>
|
|
<button id="pause"></button>
|
|
<button id="stop"></button>
|
|
<div class="spacer"></div>
|
|
<button id="prev" class="dummy"></button>
|
|
<button id="back" class="dummy"></button>
|
|
<button id="forward" class="dummy"></button>
|
|
<button id="next" class="dummy"></button>
|
|
<div class="spacer"></div>
|
|
<button id="eject" class="dummy"></button>
|
|
<div class="spacer"></div>
|
|
<input id="volume" type="range" min="1" max="11" value="5" />
|
|
</div>
|
|
<audio id="kankerherrie" loop src="{% static 'kankerherrie.mp3' %}"></audio>
|
|
<script src="https://open.spotify.com/embed/iframe-api/v1"></script>
|
|
<script>
|
|
window.onSpotifyIframeApiReady = doSpotify;
|
|
doSpotify();
|
|
function doSpotify (IFrameAPI) {
|
|
if (IFrameAPI) {
|
|
ifa = IFrameAPI;
|
|
} else if (!ifa) return;
|
|
let element = document.getElementById('embed');
|
|
let playing = false;
|
|
let playingPosition = 0;
|
|
let duration = {{track.duration_ms}};
|
|
let options = {
|
|
uri: 'spotify:track:{{track.id}}',
|
|
height: 152
|
|
};
|
|
const callback = (EmbedController) => {
|
|
document.getElementById("play").addEventListener('click', () => {
|
|
EmbedController.play();
|
|
playing = true;
|
|
if (playingPosition) {
|
|
setTimeout(() => {
|
|
EmbedController.seek(parseInt(playingPosition/1000));
|
|
playingPosition = 0
|
|
}, 100)
|
|
}
|
|
});
|
|
function pause() {
|
|
if (playing) {
|
|
EmbedController.togglePlay();
|
|
playing = false;
|
|
}
|
|
}
|
|
document.getElementById("pause").addEventListener('click', pause);
|
|
document.getElementById("stop").addEventListener('click', () => {
|
|
setTimeout(() => {
|
|
playingPosition = 0;
|
|
EmbedController.seek(0);
|
|
document.getElementById("seek").value = 0;
|
|
}, 500);
|
|
pause();
|
|
});
|
|
EmbedController.addListener('ready', e => {
|
|
document.getElementById('media-control').classList.remove('waiting')
|
|
document.getElementById("seek").addEventListener('change', (e) => {
|
|
let percentile = parseFloat(e.target.value)/100;
|
|
EmbedController.seek(duration/1000*percentile);
|
|
});
|
|
});
|
|
EmbedController.addListener('playback_update', e => {
|
|
duration = e.data.duration;
|
|
if (playingPosition == 0) document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
|
|
if (e.data.isPaused) {
|
|
playingPosition = e.data.position;
|
|
}
|
|
else if (playingPosition != 0 && e.data.position != 0) {
|
|
EmbedController.seek(parseInt(playingPosition/1000));
|
|
playingPosition = 0;
|
|
}
|
|
})
|
|
};
|
|
ifa.createController(element, options, callback);
|
|
iframe = document.getElementsByTagName("iframe")[0]
|
|
iframe.addEventListener('load', (e) => {
|
|
console.log(e);
|
|
iframe.classList.add('hide');
|
|
});
|
|
};
|
|
document.getElementById("volume").addEventListener('input', (event) => {
|
|
let kankerherrie = document.getElementById("kankerherrie")
|
|
console.log(event);
|
|
let volume = event.target.value / 11;
|
|
event.target.classList.add("playing");
|
|
event.target.classList.remove("muted");
|
|
kankerherrie.play();
|
|
if (volume <= 1/11) {
|
|
kankerherrie.pause();
|
|
event.target.classList.remove("playing");
|
|
event.target.classList.add("muted");
|
|
}
|
|
kankerherrie.volume = volume;
|
|
})
|
|
</script> |