35 lines
1.3 KiB
HTML
35 lines
1.3 KiB
HTML
<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">
|
|
<button id="play">></button>
|
|
<button id="pause">||</button>
|
|
<button id="stop">[]</button>
|
|
</div>
|
|
<script>
|
|
window.onSpotifyIframeApiReady = (IFrameAPI) => {
|
|
let element = document.getElementById('embed');
|
|
let options = {
|
|
uri: 'spotify:track:{{track.id}}'
|
|
};
|
|
const callback = (EmbedController) => {
|
|
document.getElementById("play").addEventListener('click', () => {
|
|
EmbedController.play()
|
|
});
|
|
EmbedController.addListener('playback_update', e => {
|
|
document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
|
|
})
|
|
};
|
|
IFrameAPI.createController(element, options, callback);
|
|
};
|
|
</script> |