nocopyrightsounds-widget 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +123 -10
- package/package.json +10 -3
package/README.md
CHANGED
|
@@ -1,20 +1,133 @@
|
|
|
1
|
-
# NoCopyrightSounds Widget
|
|
1
|
+
# 🎧 NoCopyrightSounds (NCS) Web Widget
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/nocopyrightsounds-widget)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
Un lecteur musical flottant, élégant et hautement personnalisable pour intégrer facilement les musiques libres de droits de **NoCopyrightSounds** à n'importe quel site web.
|
|
6
7
|
|
|
8
|
+
Conçu pour les développeurs modernes : léger, persistant entre les changements de pages, et entièrement paramétrable via JavaScript et CSS.
|
|
9
|
+
|
|
10
|
+
 *(Ajoutez une capture d'écran de votre widget dans votre dépôt GitHub et remplacez ce lien plus tard !)*
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## ✨ Fonctionnalités
|
|
15
|
+
|
|
16
|
+
* ⚡ **Zéro Latence :** Algorithme de préchargement (buffering) intelligent en arrière-plan pour des transitions instantanées entre les morceaux.
|
|
17
|
+
* 💾 **Persistance d'état :** Mémorise la piste en cours, le volume, la progression et l'état d'ouverture du widget d'une page à l'autre via `localStorage`.
|
|
18
|
+
* 🎨 **Thèmes & Couleurs :** Support natif des modes clair (`light`) et sombre (`dark`), avec personnalisation de la couleur principale.
|
|
19
|
+
* 🎛️ **Contrôles Complets :** Boutons Suivant/Précédent avec historique, contrôle du volume, Mute, et barre de progression cliquable.
|
|
20
|
+
* 🎵 **+60 Genres :** Navigation aléatoire intelligente parmi tout le catalogue historique de NCS (House, Dubstep, Chill, etc.).
|
|
21
|
+
* ⬇️ **Téléchargement :** Bouton intégré pour récupérer directement le fichier MP3 officiel.
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## 📦 Installation
|
|
26
|
+
|
|
27
|
+
### Via NPM (Recommandé pour React, Vue, Angular...)
|
|
7
28
|
\`\`\`bash
|
|
8
29
|
npm install nocopyrightsounds-widget
|
|
9
30
|
\`\`\`
|
|
10
31
|
|
|
11
|
-
|
|
32
|
+
### Via CDN (Pour les sites HTML classiques / Vanilla JS)
|
|
33
|
+
\`\`\`html
|
|
34
|
+
<script type="module">
|
|
35
|
+
import NCSWidget from 'https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js';
|
|
36
|
+
</script>
|
|
37
|
+
\`\`\`
|
|
38
|
+
|
|
39
|
+
---
|
|
12
40
|
|
|
13
|
-
|
|
41
|
+
## 🚀 Utilisation Rapide
|
|
42
|
+
|
|
43
|
+
### Exemple en Vanilla JS (HTML)
|
|
44
|
+
\`\`\`html
|
|
45
|
+
<body>
|
|
46
|
+
<script type="module">
|
|
47
|
+
import NCSWidget from 'https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js';
|
|
48
|
+
|
|
49
|
+
// Initialisation basique
|
|
50
|
+
const player = new NCSWidget();
|
|
51
|
+
</script>
|
|
52
|
+
</body>
|
|
53
|
+
\`\`\`
|
|
54
|
+
|
|
55
|
+
### Exemple dans React (Next.js, Vite...)
|
|
56
|
+
\`\`\`jsx
|
|
57
|
+
import { useEffect } from 'react';
|
|
14
58
|
import NCSWidget from 'nocopyrightsounds-widget';
|
|
15
59
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
60
|
+
export default function App() {
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
const widget = new NCSWidget({
|
|
63
|
+
position: 'bottom-right',
|
|
64
|
+
theme: 'dark',
|
|
65
|
+
primaryColor: '#1DB954'
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
// Nettoyage lors du démontage du composant
|
|
69
|
+
return () => {
|
|
70
|
+
const el = document.getElementById('ncs-persistent-widget');
|
|
71
|
+
if (el) el.remove();
|
|
72
|
+
};
|
|
73
|
+
}, []);
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
<div>
|
|
77
|
+
<h1>Mon Super Site</h1>
|
|
78
|
+
</div>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
\`\`\`
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## ⚙️ Configuration (Options de l'objet)
|
|
86
|
+
|
|
87
|
+
Vous pouvez passer un objet d'options au constructeur pour personnaliser le comportement du widget :
|
|
88
|
+
|
|
89
|
+
| Option | Type | Défaut | Description |
|
|
90
|
+
| :--- | :--- | :--- | :--- |
|
|
91
|
+
| \`position\` | String | \`'bottom-right'\` | Position à l'écran (\`bottom-right\`, \`bottom-left\`, \`top-right\`, \`top-left\`). |
|
|
92
|
+
| \`offset\` | String | \`'25px'\` | Marge par rapport au bord de l'écran. |
|
|
93
|
+
| \`theme\` | String | \`'dark'\` | Thème de base de l'interface (\`'dark'\` ou \`'light'\`). |
|
|
94
|
+
| \`primaryColor\` | String | \`'#1DB954'\` | Couleur principale (Bouton d'ouverture, slider, visualizer). |
|
|
95
|
+
| \`defaultGenre\` | String | \`'all'\` | L'ID du genre au démarrage (ex: \`'10'\` pour House). |
|
|
96
|
+
| \`startVolume\` | Number | \`0.5\` | Volume initial entre 0.0 et 1.0 (surchargé si l'utilisateur a déjà un cache). |
|
|
97
|
+
| \`zIndex\` | Number | \`99999\` | Profondeur d'affichage CSS (z-index). |
|
|
98
|
+
| \`apiUrl\` | String | *https://www.wordreference.com/definition/interne* | URL de l'API Backend. Vous pouvez héberger la vôtre si besoin. |
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## 🎨 Personnalisation CSS Avancée
|
|
103
|
+
|
|
104
|
+
Si les options du constructeur ne suffisent pas, le widget expose des **Variables CSS** (Custom Properties) rattachées à l'ID `#ncs-persistent-widget`. Vous pouvez les surcharger directement dans la feuille de style de votre site :
|
|
105
|
+
|
|
106
|
+
\`\`\`css
|
|
107
|
+
/* Dans le fichier style.css de votre site web */
|
|
108
|
+
#ncs-persistent-widget {
|
|
109
|
+
--ncs-bg: #000000; /* Fond du widget (Noir pur) */
|
|
110
|
+
--ncs-border: #333333; /* Couleur de la bordure */
|
|
111
|
+
--ncs-primary: #ff0055; /* Remplace le vert par du rose fluo */
|
|
112
|
+
--ncs-panel-bg: #111111; /* Fond des éléments internes (images, selects) */
|
|
113
|
+
font-family: 'Roboto', sans-serif; /* Changement de police */
|
|
114
|
+
border-radius: 0px; /* Retirer les coins arrondis */
|
|
115
|
+
}
|
|
116
|
+
\`\`\`
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## 🏗️ Architecture & Backend
|
|
121
|
+
|
|
122
|
+
En raison des restrictions CORS strictes sur le web moderne, un navigateur web ne peut pas interroger directement le site de NCS.
|
|
123
|
+
Ce widget s'appuie donc sur une API Backend Node.js qui sert de relais de données (Proxy).
|
|
124
|
+
|
|
125
|
+
*Note : Une API publique par défaut est fournie avec ce widget pour un usage immédiat. Pour des environnements de production à fort trafic, il est recommandé de déployer votre propre instance du serveur relais.*
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## 📄 Licence
|
|
130
|
+
|
|
131
|
+
Distribué sous la licence MIT. Voir `LICENSE` pour plus d'informations.
|
|
132
|
+
|
|
133
|
+
**Avertissement :** Ce projet n'est pas affilié à NoCopyrightSounds. Toutes les musiques diffusées par ce widget appartiennent à leurs créateurs respectifs et à NCS. Veuillez respecter les conditions d'utilisation de NoCopyrightSounds lors de l'utilisation de leurs œuvres.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nocopyrightsounds-widget",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Un widget musical persistant pour site web utilisant l'API NoCopyrightSounds",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -11,7 +11,14 @@
|
|
|
11
11
|
"type": "git",
|
|
12
12
|
"url": "https://github.com/floriangobin/nocopyrightsounds-widget.git"
|
|
13
13
|
},
|
|
14
|
-
"keywords": [
|
|
14
|
+
"keywords": [
|
|
15
|
+
"ncs",
|
|
16
|
+
"music",
|
|
17
|
+
"widget",
|
|
18
|
+
"audio",
|
|
19
|
+
"player",
|
|
20
|
+
"nocopyrightsounds"
|
|
21
|
+
],
|
|
15
22
|
"author": "GOBIN Florian",
|
|
16
23
|
"license": "MIT"
|
|
17
|
-
}
|
|
24
|
+
}
|