The music plugin lets you display :
It can work in the following modes:
Select randomly a few tracks from a given playlist to share your favorites tracks with your visitors.
Select a music provider below for instructions.
Apple Music
Extract the embed URL of the playlist you want to share.
To do so, connect to music.apple.com and select the playlist you want to share.
From ...
menu, select Share
and Copy embed code
.
Extract the source link from the code pasted in your clipboard:
<iframe allow="" frameborder="" height="" style="" sandbox="" src="https://embed.music.apple.com/**/playlist/********"></iframe>
And use this value in plugin_music_playlist
option.
Spotify
Extract the embed URL of the playlist you want to share.
To do so, Open Spotify and select the playlist you want to share.
From ...
menu, select Share
and Copy embed code
.
Extract the source link from the code pasted in your clipboard:
<iframe src="https://open.spotify.com/embed/playlist/********" width="" height="" frameborder="0" allowtransparency="" allow=""></iframe>
And use this value in plugin_music_playlist
option.
Last.fm
This mode is not supported for now.
➡️ Available options for this plugin
- uses: lowlighter/metrics@latest
with:
# ... other options
plugin_music: yes
plugin_music_limit: 4 # Limit to 4 entries
plugin_music_playlist: https://******** # Use extracted playlist link
# (plugin_music_provider and plugin_music_mode will be set automatically)
Display tracks you have played recently.
Select a music provider below for additional instructions.
Apple Music
This mode is not supported for now.
I tried to find a way with smart playlists, shortcuts and other stuff but could not figure a workaround to do it without paying the $99 fee for the developer program.
So unfortunately this isn't available for now.
Spotify
Spotify does not have personal tokens, so it makes the process a bit longer because you're required to follow the authorization workflow... Follow the instructions below for a TL;DR to obtain a refresh_token
.
Sign in to the developer dashboard and create a new app.
Keep your client_id
and client_secret
and let this tab open for now.
Open the settings and add a new Redirect url. Normally it is used to setup callbacks for apps, but just put https://localhost
instead (it is mandatory as per the authorization guide, even if not used).
Forge the authorization url with your client_id
and the encoded redirect_uri
you whitelisted, and access it from your browser:
https://accounts.spotify.com/authorize?client_id=********&response_type=code&scope=user-read-recently-played&redirect_uri=https%3A%2F%2Flocalhost
When prompted, authorize your application.
Once redirected to redirect_uri
, extract the generated authorization code
from your url bar.
Go back to your developer dashboard tab, and open the web console of your browser to paste the following JavaScript code, with your own client_id
, client_secret
, authorization code
and redirect_uri
.
(async () => {
console.log(await (await fetch("https://accounts.spotify.com/api/token", {
method:"POST",
headers:{"Content-Type":"application/x-www-form-urlencoded"},
body:new URLSearchParams({
grant_type:"authorization_code",
redirect_uri:"https://localhost",
client_id:"********",
client_secret:"********",
code:"********",
})
})).json())
})()
It should return a JSON response with the following content:
{
"access_token":"********",
"expires_in": 3600,
"scope":"user-read-recently-played",
"token_type":"Bearer",
"refresh_token":"********"
}
Register your client_id
, client_secret
and refresh_token
in secrets to finish setup.
Last.fm
Obtain a Last.fm API key.
To do so, you can simply create an API account or use an existing one.
Register your API key to finish setup.
➡️ Available options for this plugin
- uses: lowlighter/metrics@latest
with:
# ... other options
plugin_music: yes
plugin_music_provider: spotify # Use Spotify as provider
plugin_music_mode: recent # Set plugin mode
plugin_music_limit: 4 # Limit to 4 entries
plugin_music_played_at: yes # Show timestamp (for spotify only)
plugin_music_token: "${{ secrets.SPOTIFY_CLIENT_ID }}, ${{ secrets.SPOTIFY_CLIENT_SECRET }}, ${{ secrets.SPOTIFY_REFRESH_TOKEN }}"
- uses: lowlighter/metrics@latest
with:
# ... other options
plugin_music: yes
plugin_music_provider: lastfm # Use Last.fm as provider
plugin_music_mode: recent # Set plugin mode
plugin_music_limit: 4 # Limit to 4 entries
plugin_music_user: .user.login # Use same username as GitHub login
plugin_music_token: ${{ secrets.LASTFM_API_KEY }}