Skip to content

boreddevnl/dash.fm-improved

 
 

Repository files navigation

dash.fm

This is a fork of dash.fm (Originally licensed under the MIT License) It is a dashboard that displays album art and information about the artist and track currently playing on last.fm for a particular user. It fetches data from the last.fm, Wikipedia, Musicbrainz and Deezer APIs. It can run without a server or easily be deploed to a site using w3schools or netlify.
Release video

Roadmap:

  • ✅ Fork Succesfully
  • ✅ Drastically improve original UI
  • ✅ Stats widget
  • ✅ Setup page
  • ⏩️ Weather widget (home assistant or openweathermap)
  • ⏩️ Time widget
  • ⏩️ Easy to configure widgets
  • ⏩️ Community made widgets native support

Setup

Optional go to these instructions for the manual setup, that doesn't require starting a php server.

For this to work you need to have some kind of way to start a PHP server. Here are the instructions for different operating systems:

macOS

  1. Using built-in PHP (if installed):
php -S localhost:8000

Windows

  1. Using built-in PHP (if installed):
php -S localhost:8000
  1. Using XAMPP:
  • Download XAMPP from apachefriends.org
  • Install XAMPP
  • Start Apache from the XAMPP Control Panel
  • Your server will be available at http://localhost
  1. Using PHP on Windows Subsystem for Linux (WSL):
# Install PHP in WSL
sudo apt update
sudo apt install php

# Start PHP server
php -S localhost:8000

Linux

  1. Ubuntu/Debian:
# Install PHP
sudo apt update
sudo apt install php

# Start PHP server
php -S localhost:8000
  1. Fedora:
# Install PHP
sudo dnf install php

# Start PHP server
php -S localhost:8000
  1. Arch Linux:
# Install PHP
sudo pacman -S php

# Start PHP server
php -S localhost:8000

BSD

  1. FreeBSD:
# Install PHP
pkg install php

# Start PHP server
php -S localhost:8000
  1. OpenBSD:
# Install PHP
pkg_add php

# Start PHP server
php -S localhost:8000
  1. NetBSD:
# Install PHP
pkgin install php

# Start PHP server
php -S localhost:8000

After you have gone through the setup you are able to stop the PHP server and just open the HTML file, as the php server is only to set in certain variables (API, username, glances IP) which you can put in manually in the manual setup below, not requiring starting a php server.

Manual setup.

For this manual setup no php server is required.

  1. API KEY: put your last.fm api key in apikey.js

  2. last.fm user: in get_data.js you have to put your user in: (line5)const url_recent = ```https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=xxx&api_key=${ApiKey}&format=json&limit=1;``` and then inside of the user=xxx (replace xxx with your last.fm username)

  3. glances (stats) under baseURL (roughly line 493) in get_data.js you will have to put the ip address of the host running glances. Read the Glances Documentation for instructions to install glances and to get it running.

Notes

  • After starting the PHP server, make sure to keep the terminal window open
  • Access your dash.fm installation at http://localhost:8000
  • If you're using a different port, replace 8000 with your preferred port number
  • For production environments, consider using a proper web server like Apache or Nginx
  • If you mess up during your setup (wrong IP/API) open up the folder and clear the api key in apikey.js const ApiKey = "API_KEY_HERE"; then reload the website, otherwise manually change it in apikey.js and get_data.js const glancesconfig = { baseURL: 'http://IP_ADDRESS_HERE:61208' }; Keep in mind that you should keep the port :61208 unless you have manually changed that in Glances.

Troubleshooting:

  • If you get a "port already in use" error, try a different port number
  • Make sure PHP is in your system's PATH
  • For permission errors, try running the commands with sudo (Linux/BSD) or as administrator (Windows)
  • Check that PHP is installed by running php -v

A setup window should automatically open up on first startup, where you will fill in all your information (api key, IP address, user etc.) and then you will be good to go! Here is said setup window:

Known Issues

  • On some streaming platforms (i.e.: Tidal), collaborating artists get lumped together in a single artist tag (i.e.: see https://www.last.fm/music/Skrillex,+Missy+Elliott+&+Mr.+Oizo) when there are more than one performer on a track. This can cause issues when finding the correct info.
  • The link to Genius Lyrics might break, depending on the formatting of the song title and the punctuation it contains. Google search is usually faster anyway and will always work, but Genius tends to give more detail, so I've kept both.
  • Some more obscure albums (mostly compilations) can be hard to find via the deezer api.

Screenshots

Just the album

No detail

Full artist bio

Full artist bio

Real use case:

No detail

About

Now playing dashboard for last.fm

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 48.7%
  • HTML 33.1%
  • CSS 13.7%
  • PHP 4.5%