nocopyrightsounds-widget 1.4.0 → 1.4.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 +110 -78
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,122 +3,154 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/nocopyrightsounds-widget)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
A sleek, floating, and **100% CSS-hackable** music player to easily integrate royalty-free music from **NoCopyrightSounds** into any website.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
Built for modern developers: lightweight, persistent across page reloads, and infinitely customizable.
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
|
|
11
11
|
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
## ✨
|
|
14
|
+
## ✨ Features
|
|
15
15
|
|
|
16
|
-
* ⚡ **
|
|
17
|
-
* 💾 **
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* 🔘 **Bouton Réduit Sur Mesure :** Transformez l'icône flottante en cercle, en carré, changez l'émoji ou mettez-y du texte !
|
|
22
|
-
* 🔌 **Prêt à l'emploi (Plug & Play) :** API backend officielle intégrée par défaut. Zéro configuration requise !
|
|
16
|
+
* ⚡ **Zero Latency:** Smart background preloading (buffering) for instant track transitions.
|
|
17
|
+
* 💾 **State Persistence:** Remembers the current track, volume, and playback progress across page navigation via `localStorage`.
|
|
18
|
+
* 🎵 **Full Catalog:** Intelligent random navigation through 60+ historical NCS genres.
|
|
19
|
+
* 🛠️ **Limitless Customization (v1.4.0):** The widget is a blank canvas! It exposes the album cover via the `--ncs-cover-img` CSS variable and dynamically injects state classes (`.ncs-is-playing`, `.ncs-is-open`). You can literally reshape the entire player using just CSS.
|
|
20
|
+
* 🔌 **Plug & Play:** Official backend API integrated by default. Zero server configuration required.
|
|
23
21
|
|
|
24
22
|
---
|
|
25
23
|
|
|
26
24
|
## 📦 Installation
|
|
27
25
|
|
|
28
|
-
### Via NPM (
|
|
26
|
+
### Via NPM (React, Vue, Angular, Next.js...)
|
|
29
27
|
\`\`\`bash
|
|
30
28
|
npm install nocopyrightsounds-widget
|
|
31
29
|
\`\`\`
|
|
32
30
|
|
|
33
|
-
### Via CDN (
|
|
31
|
+
### Via CDN (HTML / Vanilla JS)
|
|
34
32
|
\`\`\`html
|
|
35
33
|
<script type="module">
|
|
36
34
|
import NCSWidget from 'https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js';
|
|
35
|
+
const player = new NCSWidget();
|
|
37
36
|
</script>
|
|
38
37
|
\`\`\`
|
|
39
38
|
|
|
40
39
|
---
|
|
41
40
|
|
|
42
|
-
##
|
|
41
|
+
## ⚙️ Configuration (JS Options)
|
|
43
42
|
|
|
44
|
-
|
|
45
|
-
\`\`\`html
|
|
46
|
-
<script type="module">
|
|
47
|
-
import NCSWidget from 'https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js';
|
|
48
|
-
|
|
49
|
-
// Le widget s'occupe de tout avec les paramètres par défaut !
|
|
50
|
-
const player = new NCSWidget();
|
|
51
|
-
</script>
|
|
52
|
-
\`\`\`
|
|
43
|
+
You can pass an options object to the constructor to tweak the widget's behavior and default look:
|
|
53
44
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
minimizedSize: '80px', // Bouton plus large
|
|
67
|
-
minimizedRadius: '12px', // Bords arrondis (au lieu d'un cercle parfait)
|
|
68
|
-
minimizedBg: '#222222', // Fond sombre
|
|
69
|
-
minimizedColor: '#ff0055' // Texte coloré
|
|
70
|
-
});
|
|
71
|
-
\`\`\`
|
|
45
|
+
| Option | Type | Default | Description |
|
|
46
|
+
| :--- | :--- | :--- | :--- |
|
|
47
|
+
| \`position\` | String | \`'bottom-right'\` | Screen position (\`bottom-right\`, \`bottom-left\`, \`top-right\`, \`top-left\`). |
|
|
48
|
+
| \`offsetX\` / \`offsetY\` | String | \`'25px'\` | Margin from the screen edges (e.g., \`'0px'\`). |
|
|
49
|
+
| \`theme\` | String | \`'dark'\` | Base UI theme (\`'dark'\` or \`'light'\`). |
|
|
50
|
+
| \`primaryColor\` | String | \`'#1DB954'\` | Main accent color (sliders, active states). |
|
|
51
|
+
| \`glassmorphism\`| Boolean| \`false\` | Enables a semi-transparent blurred background. |
|
|
52
|
+
| \`hideDownload\` | Boolean| \`false\` | Hides the direct MP3 download icon. |
|
|
53
|
+
| \`autoOpen\` | Boolean| \`false\` | Automatically opens the widget on the user's first visit. |
|
|
54
|
+
| \`defaultGenre\` | String | \`'all'\` | Starting genre ID (e.g., \`'10'\` for House). |
|
|
55
|
+
| \`minWidth\` / \`minHeight\` | String | \`'55px'\` | Dimensions of the minimized button. |
|
|
56
|
+
| \`minimizedIcon\`| String | \`'🎧'\` | Text or emoji inside the minimized button. |
|
|
72
57
|
|
|
73
58
|
---
|
|
74
59
|
|
|
75
|
-
##
|
|
60
|
+
## 🎨 CSS Cookbook: The "Spinning Vinyl" Example
|
|
76
61
|
|
|
77
|
-
|
|
78
|
-
| :--- | :--- | :--- | :--- |
|
|
79
|
-
| \`position\` | String | \`'bottom-right'\` | Position (\`bottom-right\`, \`bottom-left\`, \`top-right\`, \`top-left\`). |
|
|
80
|
-
| \`offset\` | String | \`'25px'\` | Marge par rapport au bord de l'écran. |
|
|
81
|
-
| \`theme\` | String | \`'dark'\` | Thème de base de l'interface (\`'dark'\` ou \`'light'\`). |
|
|
82
|
-
| \`primaryColor\` | String | \`'#1DB954'\` | Couleur principale (Sliders, visualizer). |
|
|
83
|
-
| \`glassmorphism\`| Boolean | \`false\` | Active un fond semi-transparent avec flou d'arrière-plan. |
|
|
84
|
-
| \`borderRadius\` | String | \`'16px'\` | Rayon des bordures du lecteur étendu. |
|
|
85
|
-
| \`fontFamily\` | String | \`'system-ui...'\`| Typographie utilisée dans tout le widget. |
|
|
86
|
-
| \`minimizedIcon\`| String | \`'🎧'\` | Icône ou texte du bouton réduit. |
|
|
87
|
-
| \`minimizedSize\`| String | \`'55px'\` | Largeur/Hauteur du bouton réduit. |
|
|
88
|
-
| \`minimizedRadius\`| String| \`'50%'\` | Arrondi du bouton réduit (\`50%\` = rond, \`8px\` = carré arrondi). |
|
|
89
|
-
| \`minimizedBg\` | String | *primaryColor*| Couleur de fond spécifique au bouton réduit. |
|
|
90
|
-
| \`minimizedColor\`| String| \`'#ffffff'\` | Couleur de l'icône/texte du bouton réduit. |
|
|
91
|
-
| \`hideDownload\` | Boolean | \`false\` | Masque l'icône de téléchargement direct. |
|
|
92
|
-
| \`hideVisualizer\`| Boolean | \`false\` | Masque les barres animées à côté du titre. |
|
|
93
|
-
| \`autoOpen\` | Boolean | \`false\` | Déploie le widget automatiquement à la 1ère visite. |
|
|
94
|
-
| \`defaultGenre\` | String | \`'all'\` | L'ID du genre au démarrage (ex: \`'10'\` pour House). |
|
|
95
|
-
| \`startVolume\` | Number | \`0.5\` | Volume initial entre 0.0 et 1.0. |
|
|
96
|
-
|
|
97
|
-
---
|
|
62
|
+
To show you just how far you can push the customization, here is an example of the creative freedom this widget offers. By combining our JS options and a bit of custom CSS, you can completely transform the standard rectangular player into a **spinning interactive vinyl record**!
|
|
98
63
|
|
|
99
|
-
|
|
64
|
+
### 1. The JavaScript Setup
|
|
65
|
+
First, stick the widget to the corner and make it a square:
|
|
66
|
+
\`\`\`html
|
|
67
|
+
<script type="module">
|
|
68
|
+
import NCSWidget from 'https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@1.4.0/src/index.js';
|
|
69
|
+
|
|
70
|
+
new NCSWidget({
|
|
71
|
+
position: 'bottom-right',
|
|
72
|
+
offsetX: '0px',
|
|
73
|
+
offsetY: '0px',
|
|
74
|
+
minWidth: '120px',
|
|
75
|
+
minHeight: '120px',
|
|
76
|
+
minimizedIcon: '' // Remove the text to leave room for the cover art
|
|
77
|
+
});
|
|
78
|
+
</script>
|
|
79
|
+
\`\`\`
|
|
100
80
|
|
|
101
|
-
|
|
81
|
+
### 2. The CSS Magic
|
|
82
|
+
Copy this code into your website's stylesheet. It uses the `--ncs-cover-img` variable and the `.ncs-is-playing` state class to create a spinning vinyl record that pops out into a full-screen player when clicked!
|
|
102
83
|
|
|
103
84
|
\`\`\`css
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
85
|
+
/* --- THE QUARTER VINYL (Minimized State) --- */
|
|
86
|
+
.ncs-minimized {
|
|
87
|
+
border-radius: 0 !important;
|
|
88
|
+
background: transparent !important;
|
|
89
|
+
overflow: hidden !important;
|
|
90
|
+
position: relative;
|
|
91
|
+
box-shadow: none !important;
|
|
108
92
|
}
|
|
109
|
-
\`\`\`
|
|
110
93
|
|
|
111
|
-
|
|
94
|
+
.ncs-minimized::before {
|
|
95
|
+
content: '';
|
|
96
|
+
position: absolute;
|
|
97
|
+
width: 200%; height: 200%; top: 0; left: 0;
|
|
98
|
+
border-radius: 50%;
|
|
99
|
+
background-image: radial-gradient(circle at center, #1e1e2f 0%, #1e1e2f 8%, rgba(0,0,0,0.8) 8.5%, #181818 9%, #181818 25%, transparent 25.5%, transparent 90%, #333 90.5%, #181818 91%, #181818 100%), var(--ncs-cover-img);
|
|
100
|
+
background-size: cover; background-position: center;
|
|
101
|
+
transform-origin: center center;
|
|
102
|
+
}
|
|
112
103
|
|
|
113
|
-
|
|
104
|
+
/* Spin animation when music plays */
|
|
105
|
+
@keyframes spin { 100% { transform: rotate(360deg); } }
|
|
106
|
+
#ncs-persistent-widget.ncs-is-playing:not(.ncs-is-open) .ncs-minimized::before {
|
|
107
|
+
animation: spin 4s linear infinite;
|
|
108
|
+
}
|
|
109
|
+
#ncs-persistent-widget:not(.ncs-is-open) .ncs-minimized:hover::before { cursor: pointer; filter: brightness(1.15); }
|
|
110
|
+
|
|
111
|
+
/* --- THE FULL VINYL (Expanded State) --- */
|
|
112
|
+
.ncs-expanded {
|
|
113
|
+
width: 360px !important; height: 360px !important;
|
|
114
|
+
border-radius: 50% !important; padding: 30px !important;
|
|
115
|
+
background: transparent !important; border: none !important;
|
|
116
|
+
transform-origin: bottom right;
|
|
117
|
+
display: flex !important; flex-direction: column; justify-content: center; align-items: center;
|
|
118
|
+
box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
|
|
119
|
+
}
|
|
114
120
|
|
|
115
|
-
|
|
116
|
-
|
|
121
|
+
/* The animated vinyl background */
|
|
122
|
+
.ncs-expanded::before {
|
|
123
|
+
content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -2;
|
|
124
|
+
background-image: radial-gradient(circle at center, #1e1e2f 0%, #1e1e2f 3%, rgba(0,0,0,0.8) 3.5%, rgba(24,24,24, 0.95) 4%, rgba(24,24,24, 0.9) 35%, transparent 35.5%, transparent 85%, #333 85.5%, #181818 86%, #181818 100%), var(--ncs-cover-img);
|
|
125
|
+
background-size: cover; background-position: center;
|
|
126
|
+
}
|
|
127
|
+
#ncs-persistent-widget.ncs-is-playing .ncs-expanded::before { animation: spin 10s linear infinite; }
|
|
128
|
+
|
|
129
|
+
/* Dark overlay for text readability */
|
|
130
|
+
.ncs-expanded::after { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1; background: radial-gradient(circle at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.2) 100%); pointer-events: none; }
|
|
131
|
+
|
|
132
|
+
/* Open/Close Animation */
|
|
133
|
+
.ncs-expanded:not(.active) { transform: scale(0) rotate(-90deg) !important; opacity: 0; pointer-events: none; }
|
|
134
|
+
.ncs-expanded.active { transform: scale(1) rotate(0deg) !important; opacity: 1; }
|
|
135
|
+
|
|
136
|
+
/* Reorganize internal elements for the circular layout */
|
|
137
|
+
.ncs-header, .ncs-track-info, .ncs-progress-container, .ncs-controls, .ncs-bottom-bar { position: relative; z-index: 1; width: 100%; }
|
|
138
|
+
.ncs-header strong, .ncs-cover, .ncs-download-btn { display: none !important; }
|
|
139
|
+
.ncs-header { position: absolute; top: 35px; right: 50px; justify-content: flex-end !important; }
|
|
140
|
+
.ncs-close-btn { background: rgba(255,255,255,0.1) !important; color: white !important; width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(4px); }
|
|
141
|
+
.ncs-details { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
|
|
142
|
+
#ncs-track-name { font-size: 18px !important; color: white !important; text-shadow: 0 2px 4px rgba(0,0,0,0.8); margin-bottom: 0 !important; }
|
|
143
|
+
#ncs-artists { font-size: 13px !important; color: #ccc !important; }
|
|
144
|
+
#ncs-genre { max-width: 160px; margin-top: 10px; background: rgba(0,0,0,0.6) !important; color: white !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 20px !important; padding: 6px 15px !important; font-size: 12px !important; text-align: center; }
|
|
145
|
+
.ncs-controls { margin: 15px 0 !important; gap: 20px !important; }
|
|
146
|
+
.ncs-btn-circle { width: 60px !important; height: 60px !important; background: white !important; color: black !important; }
|
|
147
|
+
.ncs-progress-container { width: 80% !important; margin: 0 auto 15px auto !important; }
|
|
148
|
+
.ncs-bottom-bar { width: 60% !important; margin: 0 auto !important; justify-content: center !important; }
|
|
149
|
+
\`\`\`
|
|
117
150
|
|
|
118
151
|
---
|
|
119
152
|
|
|
120
|
-
## 📄
|
|
121
|
-
|
|
122
|
-
Distribué sous la licence MIT. Voir `LICENSE` pour plus d'informations.
|
|
153
|
+
## 📄 License
|
|
123
154
|
|
|
124
|
-
|
|
155
|
+
Distributed under the MIT License.
|
|
156
|
+
**Disclaimer:** This project is not affiliated with NoCopyrightSounds. All streamed music belongs to their respective creators and NCS.
|