1
0
mirror of https://github.com/thebaer/cdr.git synced 2024-11-15 01:31:01 +00:00

Support MediaSession API

- Responds to next / previous track events
- Sets metadata for the currently-playing track
This commit is contained in:
Matt Baer 2022-03-30 23:15:23 -04:00
parent 16e4510d9d
commit 691f266b08

View File

@ -9,7 +9,7 @@
<ol id="playlist">
{{range $i, $el := .}}
<li{{if eq $i 0}} class="active"{{end}}>
<a class="track" href="{{$el.Filename}}">{{$el.Artist}} - {{$el.Title}}</a>
<a class="track" href="{{$el.Filename}}" data-artist="{{$el.Artist}}" data-title="{{$el.Title}}">{{$el.Artist}} - {{$el.Title}}</a>
{{template "track-info" $el}}
</li>
{{end}}
@ -40,6 +40,10 @@
current = link.parent().index();
play(link, $audio[0]);
});
$audio[0].addEventListener('play', function (e) {
var $link = $('li.active > a');
setTrackMetadata($link);
});
$audio[0].addEventListener('ended', function (e) {
playNext();
});
@ -70,6 +74,16 @@
play($(link), $audio[0]);
}
function setTrackMetadata($link) {
if ('mediaSession' in navigator) {
// Set track metadata
navigator.mediaSession.metadata = new MediaMetadata({
title: $link.data('title'),
artist: $link.data('artist'),
});
}
}
function play($link, $player) {
$player.src = $link.attr('href');
par = $link.parent();
@ -77,6 +91,12 @@
$player.load();
$player.play();
}
if ('mediaSession' in navigator) {
// Listen for MediaSession events
navigator.mediaSession.setActionHandler('nexttrack', playNext);
navigator.mediaSession.setActionHandler('previoustrack', playPrev);
}
});
</script>
{{end}}