Tracks is a javascript web-widget to show "scrobbles" (play history) from a Last-fm account. See Tracks in action on https://www.rockland.dk/ and https://lastfm-widgets.stignygaard.deno.net/. At the latter site, you can not only find some more information and instructions for use, you can also play with some of the customization options, including setting the user to show scrobbles from.
Long time Last.fm users might get a déjà vu feeling by the red album header-lines. As primarily an album listener myself, I have missed them. So I brought them (optionally) back in this widget.
As name of this repository hints, I might have more than one Last.fm widget planned for this space 🙂
Using the widget in any HTML file is straightforward because it's a standard web component. You only need to import the script and place the custom HTML tag where you want it to appear. You can configure the widget by adding attributes to the custom HTML tag. Get the details and play with the customization options on the interactive demo site.
Optionally, you can also add a "proxy-API" to your setup.
The Tracks widget itself is made as a webcomponent using pure standard web client-side technologies (no frameworks or build tools needed). It can work "alone" communicating directly with Last.fm's Audioscrobbler v2 API, or it can be supported by a custom backend "proxy-api". The latter is encouraged when possible, because it makes it possible to implement throttling of requests to Last.fm's API.
This repository not only holds the widget itself, but also the demo-site (https://lastfm-widgets.stignygaard.deno.net/) and three different backend proxy-api implementations. There are two proxy-APIs implemented in Deno, with the most recommended one using Deno KV. But there's also a third alternative Cloudflare Workers (Node.js) proxy-api implementation made by burnblazter. Also, this repository is set up as a Deno Deploy project. Any updates to the main-branch (widget, demo-page and the Deno proxy-apis) are immediately deployed to the Deno Deploy demo-site.
The widget itself should be compatible back to at least Firefox 115 and Chromium 109 based web-browsers (so it also works for Windows 7/8 users stuck on these versions). It also runs in Safari, but I'm unsure how old versions are supported. The backend code (Deno proxy-apis) is my first simple experiments/experience with Deno.
The widget frontend code. All that is needed for widget to work in Demo or Basic mode. See Releases to get the latest "release-version" of this folder's content. And see the demo page at https://lastfm-widgets.stignygaard.deno.net/ for more about widget modes and how to use and customize the widget.
Frontend-code for the demo page seen on https://lastfm-widgets.stignygaard.deno.net/.
Frontend-code for a simple promo page pointing to the demo page at https://lastfm-widgets.stignygaard.deno.net/. This is the default webpage shown when this project is deployed. However, you can configure it to show the demo page instead.
proxy-api-kv.ts- A Deno proxy-api using Deno KV as the cache. This is the generally recommended and default used backend proxy-api for this project.proxy-api-mem.ts- An alternative Deno proxy-api using in-memory caching.log.ts- A simple log endpoint used by the demo page.
The Deno KV based proxy (proxy-api-kv.ts) is the normally used proxy-api on the demo page when widget is in Backend-supported mode – and it is also used by widget on rockland.dk. But no matter if KV or in-memory version is chosen, the proxy is served on the /proxy-api address of the deployed site.
For full documentation on setting up the backend proxies, see services/README.md.
An alternative Cloudflare Worker backend proxy-api. Kindly contributed to this project by burnblazter.
For full documentation on setting up the backend proxies, see services/README.md.
Application "entrypoint". Basically the "web-server" or "router" for https://lastfm-widgets.stignygaard.deno.net/,
serving the above-mentioned content (except /cf-worker/).
What could future updates bring? Maybe:
- A layout that adapts nicer to wider display dimensions of widget
- Dark mode
- Another widget