async (song) => {
const log = console.log;
let audio = document.createElement('audio');
let playlist = await getAwesomePlaylist(song);
let index = 0;
playAudio();
function playAudio() {
audio.src = playlist[index].src;
audio.play()
.then(_ => updateMetadata())
.catch(error => log(error));
}
function updateMetadata() {
let track = playlist[index];
log('Playing ' + track.title + ' track...');
navigator.mediaSession.metadata = new MediaMetadata({
title: track.title,
artist: track.artist,
album: track.album,
artwork: track.artwork
});
// Media is loaded, set the duration.
updatePositionState();
}
/* Position state (supported since Chrome 81) */
function updatePositionState() {
if ('setPositionState' in navigator.mediaSession) {
log('Updating position state...');
navigator.mediaSession.setPositionState({
duration: audio.duration,
playbackRate: audio.playbackRate,
position: audio.currentTime
});
}
}
/* Previous Track & Next Track */
navigator.mediaSession.setActionHandler('previoustrack', function () {
log('> User clicked "Previous Track" icon.');
index = (index - 1 + playlist.length) % playlist.length;
playAudio();
});
navigator.mediaSession.setActionHandler('nexttrack', function () {
log('> User clicked "Next Track" icon.');
index = (index + 1) % playlist.length;
playAudio();
});
audio.addEventListener('ended', function () {
// Play automatically the next track when audio ends.
index = (index - 1 + playlist.length) % playlist.length;
playAudio();
});
/* Seek Backward & Seek Forward */
let defaultSkipTime = 10; /* Time to skip in seconds by default */
navigator.mediaSession.setActionHandler('seekbackward', function (event) {
log('> User clicked "Seek Backward" icon.');
const skipTime = event.seekOffset || defaultSkipTime;
audio.currentTime = Math.max(audio.currentTime - skipTime, 0);
updatePositionState();
});
navigator.mediaSession.setActionHandler('seekforward', function (event) {
log('> User clicked "Seek Forward" icon.');
const skipTime = event.seekOffset || defaultSkipTime;
audio.currentTime = Math.min(audio.currentTime + skipTime, audio.duration);
updatePositionState();
});
/* Play & Pause */
navigator.mediaSession.setActionHandler('play', async function () {
log('> User clicked "Play" icon.');
await audio.play();
navigator.mediaSession.playbackState = "playing";
// Do something more than just playing audio...
});
navigator.mediaSession.setActionHandler('pause', function () {
log('> User clicked "Pause" icon.');
audio.pause();
navigator.mediaSession.playbackState = "paused";
// Do something more than just pausing audio...
});
/* Stop (supported since Chrome 77) */
try {
navigator.mediaSession.setActionHandler('stop', function () {
log('> User clicked "Stop" icon.');
// TODO: Clear UI playback...
});
} catch (error) {
log('Warning! The "stop" media session action is not supported.');
}
/* Seek To (supported since Chrome 78) */
try {
navigator.mediaSession.setActionHandler('seekto', function (event) {
log('> User clicked "Seek To" icon.');
if (event.fastSeek && ('fastSeek' in audio)) {
audio.fastSeek(event.seekTime);
return;
}
audio.currentTime = event.seekTime;
updatePositionState();
});
} catch (error) {
log('Warning! The "seekto" media session action is not supported.');
}
/* Utils */
async function getAwesomePlaylist(name) {
const { parseImageUrl } = nb.utils
const NOTION_BASE = "<https://notion.so>"
const { music } = await nb.fetchAll({
music: "<https://www.notion.so/2628769120ad41d998ec068d6e2eb410?v=e8e69ac68a8d483792c54541e4d8ba72>",
artist: "<https://www.notion.so/15f1759f38a34fedaa79262812b707f0?v=b385656739214101b2b8a159092a52e8>",
album: "<https://www.notion.so/31b8544ffb034964b1aa56bfa78497c1?v=1d9cbfcd279d4534964acdd374c9824e>"
})
const songCanPlay = music.rows.filter(row => ['163', 'file'].includes(row.source) && row.artist[0] && row.file && row.album && row.album[0] && row.artist)
let songList = songCanPlay
if (name) songList = songCanPlay.filter(song => song.title === name)
return songList.map(row => (
{
title: row.title,
src: row.source === '163' ? row.file[0] : `${NOTION_BASE}/signed/${encodeURIComponent(row.file[0]).replace("s3.us-west", "s3-us-west")}`,
album: row.album[0].name,
artist: row.artist[0].name,
artwork: [
{ src: row.album[0].cover && parseImageUrl(row.album[0].cover[0]), sizes: '128x128', type: 'image/jpg' },
]
}
))
}
}
去这里找模板,复制到自己 Notion 中。然后把 getAwesomePlaylist 函数中的三个表的链接换成自己的。