MusicPlayer-Web icon indicating copy to clipboard operation
MusicPlayer-Web copied to clipboard

Dark mode e light mode. Schermate di Home, Artisti, Musica. Navbar dinamica per la riproduzione musicale. Musica in background supportata. Compatibilità con i principali browser. Future implementazion...

Music-Player-Web

Sito di riproduzione musicale per ascoltare le canzoni caricate sulla piattaforma.

Link al Server di Music Player: (link)


Indice :

  • Ispirazione
  • Sito Web
  • BETA
  • Pagine
  • Examples of Usage
  • Ascolto in Background
  • Browsers compatibili
  • API
  • Albero di Path
  • Coming Soon
  • Licenze

Ispirazione

La grafica del sito web è stata sviluppata ispirandosi all'interfaccia di iTunes, con l'obiettivo di creare un'esperienza utente simile. L'itento è stato quello di catturare un aspetto e una funzionalità simili senza replicare direttamente il design di iTunes.

Sito Web

Sito Web Music Player: Link al Sito


Icona

BETA

Features:

  • Riproduzione musicale
  • Ascolto in background
  • Switch schermate one-page

Unsolved BUGs:

[!CAUTION]

  • errori nella gestione dell'audio dal menu di riproduzione in background
  • errori nel caricamento deglia audio
  • errori per delay in cambio schermate

Pagine

Icona Icona Icona
1 2 3
  1. L'utente sceglie l'artista o la produzione
  2. L'utente visualizza artista e sceglie una tra le relative produzioni
  3. l'utente visualizza i brani della produzione e sceglie quale ascoltare

Examples of Usage

Icona Icona

Ascolto in Background

Icona Icona

Browsers compatibili

Icona Icona Icona

API

Indice API:

  • API Home
  • API Music
  • API Artist

Lista API:

API HOME
Name: getSearchedArtists
Endpoint: type=home&method=getSearchedArtists
Type: GET
Parametri: searchText=testoDaCercare, listIds=1,2,3
Descrizione: Cerca artisti in base al testo specificato.
Name: getSearchedMusics
Endpoint: type=home&method=getSearchedMusics
Type: GET
Parametri: searchText=testoDaCercare, listIds=1,2,3
Descrizione: Cerca canzoni in base al testo specificato.
Name: getAllHomeData
Endpoint: type=home&method=getAllHomeData
Type: GET
Parametri: Nessuno
Descrizione: Ottiene tutti i dati necessari per la schermata iniziale.
Name: getMusics
Endpoint: type=home&method=getMusics
Type: GET
Parametri: listIds=1,2,3
Descrizione: Ottiene la lista delle canzoni specificate.
Name: getArtists
Endpoint: type=home&method=getArtists
Type: GET
Parametri: listIds=1,2,3
Descrizione: Ottiene la lista degli artisti specificati.
API MUSIC
Name: getMusic
Endpoint: type=music&method=getMusic
Type: GET
Parametri: idMusic=12
Descrizione: Ottiene i dati di una specifica canzone.
Name: getMusicMin
Endpoint: type=music&method=getMusicMin
Type: GET
Parametri: idMusic=12
Descrizione: Ottiene dati ridotti di una specifica canzone.
API ARTIST
Name: getAllArtistData
Endpoint: type=artist&method=getAllArtistData
Type: GET
Parametri: idArtist=12
Descrizione: Ottiene tutti i dati di un artista specifico.
Name: getArtist
Endpoint: type=artist&method=getArtist
Type: GET
Parametri: idArtist=12
Descrizione: Ottiene i dati di un artista specifico.
Name: getAlbums
Endpoint: type=artist&method=getAlbums
Type: GET
Parametri: idArtist=12, listIds=1,2,3
Descrizione: Ottiene la lista degli album di un artista.
Name: getSingles
Endpoint: type=artist&method=getSingle
Type: GET
Parametri: idArtist=12, listIds=1,2,3
Descrizione: Ottiene la lista dei singoli di un artista.

Albero di Path

$ tree
.
└── Client
    ├── assets
    │   ├── audios
    │   ├── images
    │   └── styles
    │       ├── animations.css
    │       ├── artist.css
    │       ├── colors.css
    │       ├── footer.css
    │       ├── global.css
    │       ├── header.css
    │       ├── home.css
    │       ├── music.css
    │       ├── mySwiper.css
    │       └── navbar.css
    ├── config
    │   ├── data.php
    │   ├── json.php
    │   └── session.php
    ├── dist
    │   ├── scripts
    │   │   ├── clipboard.min.js
    │   │   ├── musicPlayer-bundle.min.js
    │   │   ├── swiper-bundle.min.js
    │   │   └── swiper-bundle.min.js.map
    │   └── styles
    │       ├── musicPlayer-bundle.min.css
    │       └── swiper-bundle.min.css
    ├── src
    │   ├── app
    │   │   ├── design
    │   │   │   ├── MySwiper.js
    │   │   │   ├── SearchBar.js
    │   │   │   └── TimingBar.js
    │   │   ├── layout
    │   │   │   ├── Footer.js
    │   │   │   ├── Header.js
    │   │   │   ├── Main.js
    │   │   │   └── Navbar.js
    │   │   ├── pages
    │   │   │   ├── Artist.js
    │   │   │   ├── Home.js
    │   │   │   └── Music.js
    │   │   ├── utilities
    │   │   │   ├── Animations.js
    │   │   │   ├── Constants.js
    │   │   │   │   └── WorkerManager.js
    │   │   └── workers
    │   │       ├── audioWorker.js
    │   │       └── fetchWorker.js
    │   ├── App.js
    │   └── entry.js
    └── index.php



Coming soon

  • Sistema di autenticazione
  • Cloud delle canzoni da link risorsa
  • Pubblicazioni musicali pubbliche o private
  • Profilo pubblico o privato
  • Interazione con likes e views

Licenze

[!WARNING] Questo software è rilasciato sotto la licenza GPL v3 quindi l'uso, la modifica e la distribuzione del codice sorgente ne deve rispettare i termini.

I contenuti multimediali possono essere soggetti a una licenza non commerciale richiedendo l'acquisto di una licenza separata.

Gli audio generati da Suno AI (Termini di utilizo) necessitano dell'acquisto di una licenza separata per l'uso commerciale.

[!NOTE] Canzoni generate usando Suno AI (Termini di utilizo)

Immagini generate usando OpenArt (Termini di utilizzo)

[!NOTE] Di Bootstrap sono state utilizzate solo le icone

Music Player Server

Copyright 2024 Vittorio Piotti (GitHub page) (Personal page)

Version v1.0.0

License GPL-3.0


Bootstrap Icons

Copyright 2011-2018 The Bootstrap Authors

Version v1.11.0

License MIT


Swiper

Copyright 2014-2024 Vladimir Kharlampidi (GitHub page)

Version v11.1.4

License GPL-3.0


Clipboard JS

Copyright Music Player Web (GitHub page)

Version v2.0.11

License MIT