Music Library player

Ever wanted to play your music located in France ? or Canada ? or Jamaiqua ?

Just pick a country and let the music play !

Known bug: Chrome doesn't display <audio> balise because of weird positioning, but the song is playing.

What it is

• An Audio manager and player. Currently supporting MP3, OGG & WAV as I simply use html element. Sorry for all FLAC lovers.

• Define playlist from each available panels

• Music library accesses your local library in readonly mode

• Saves music and metadatas in database with the scan feature

What it is not

• A music metadata editor. For that part, I recommend using MP3Tag

Overview

Frontend :

• App : Vue3, Nuxt3, Pinia
• Component Framework : Vuetify3
• Music Vizualiser : projectM via webAssembly
• Geospatial Map : Leaflet with Turf.js and shpjs

Backend :

• Server : python3, Django, Nginx
• Database : PostgreSQL, PostGIS
• Geospatial : GeoDjango
• Audio metadata : mutagen
• Distributed Task Queue : Celery with Redis

Release :

• Frontend : Tauri

Architecture Diagram

flowchart TD

backend[Django - GeoDjango
http: 8000
debug: 5678]
frontend[Vue3-Pinia-Leaflet
http: 3000]
celery[Celery - Redis
debug: 6900]
db[PostGIS
port: 54333]
shp[<a href='https://www.naturalearthdata.com/'>Natural Earth Data</a>
countries shapefile]
Nginx[Nginx
http: 8081]
Tauri[Tauri
protocol: tauri.localhost]
exeFront[exe: geospatial-music-library.exe]
exeBack[exe: manage.exe]
Filesystem[FileSystem 
.env MUSIC_LIBRARY_PATH]

subgraph Web Application
  frontend --> Nginx
  frontend --> MusicBrainz
  subgraph front
    frontend --> shp
    webAssembly --> projectM
    frontend --> webAssembly
  end

  subgraph back
    frontend --> backend
    backend --> celery
    backend --> db[(db)]
    backend --> gdal
  end

  
end

subgraph Desktop
  Tauri-.->|build|frontend
  PyInstaller -.->|build|backend
  Nginx -->|read only| Filesystem
  Tauri ==> exeFront
  PyInstaller ==> exeBack
end

Loading

Features

Play music and define next songs to play from :

• Your filesystem
  • 
• Artists view
  • 
• Country location
  • 

Add geolocalization to your artists, using

• Musicbrainz API to get auto-suggestions
• Manual picking for unknown artists or to fix out-of-boundaries locations

Known limitation while auto-positioning

---

• When using the geolocator, you may encounter weird positioning at first sight, as the points are calculated from the center of mass of the whole country. i.e, for France, the auto-localizer always creates a point near Morocco in the ocean because this is the center of mass of France, French Guiana and Corsica.

  • 

• The result breaks the player toolbar :

  • 

You can use manual picking to rectify to the right location then.

---

Enjoy ProjectM vizualisations (PoC in very early stage)

• Focus mode

  • 

• Background mode to keep editing the playlist

  • 

Setup

Requires only Docker to launch application.

NPM if you want to build frontend as a desktop executable.

Development

Configuration

edit .env example before first launch :

• MUSIC_LIBRARY_PATH : path to your music folder
• MUSIC_PATH_MAX_LENGTH : default 500 character, increase that number if your music paths exceed this value, then restart backend.
• PG_DATA : database persistency.
• API_HEADER_MAIL : mandatory to use properly musicbrainz.org API

Start up

full dockerized environment : docker compose --profile full up

• frontend (http://localhost:3000)
• backend (http://localhost:8000)
  • Django admin (localhost:8000/admin)
    • root/root
• Nginx serving your music filesystem(http://localhost:8081/music)
• database access (0.0.0.0:54333)
  • postgres/postgres
  • database and schema : music.public
  • external database manager recommended DBeaver, for as long as I don't provide pgadmin container.

FAQ

Configuration update (.env)

You need to update your .env file configuration to add your email or link an other folder, don't forget to run the following command to apply changes:

• docker compose stop backend
• docker compose up backend --build

"[backend] exec /app/run_dev.sh: no such file or directory"

This error may occur on backend start

• run dos2unix ./run_dev.sh then docker compose restart backend

Backend cannot connect to database

backend may fails to connect to database because it doesn't wait enough for the first db init :

• Wait for the db container log line LOG: database system is ready to accept connections. It may take a while and you may see database stopping and restarting in the process.
• Then run docker compose restart backend.

"[frontend] listen EADDRINUSE: address already in use"

Don't know why. may happen sometimes, we are not alone.

• run docker compose up frontend --force-recreate

Dev notes

Run frontend without server, use mocked data / API

  vite: {
    define: {
      VUE_APP_MOCK_SERVER: true
    },

building production - PoC

Windows

WIP Does not contains postgres + gdal binaries, nginx not included either. Will not work without those binaries

• configure ./services/backend/manage.spec to includes new modules + third part binaries
• compile executable services/backend > docker run --volume "%cd%:/src/" batonogov/pyinstaller-windows:latest
• copy ./services/backend/dist/*.exe in ./services/frontend/src-tauri/binaries
• rename the executable as *-x86_64-pc-windows-msvc.exe
• then services/frontend > npm run tauri build
• executable will be in services/frontend/src-tauri/target/release. It works well with the backend launched in docker environment

Thanks

• ProjectM Webassembly integration :

  evoyy:projectm-webgl-demo for its ProjectM emscripten generation.