nocopyrightsounds-widget 1.4.0 → 1.4.2
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 +153 -95
- package/package.json +5 -10
package/README.md
CHANGED
|
@@ -1,124 +1,182 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
# nocopyrightsounds-widget
|
|
2
3
|
|
|
3
4
|
[](https://www.npmjs.com/package/nocopyrightsounds-widget)
|
|
4
5
|
[](https://opensource.org/licenses/MIT)
|
|
5
6
|
|
|
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.
|
|
7
|
+
A sleek, floating, and **100% CSS-hackable** music player to easily integrate royalty-free music from **NoCopyrightSounds** into any website.
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
Designed for modern developers: lightweight, persistent across page reloads, and infinitely customizable.
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
|
|
13
12
|
|
|
14
|
-
##
|
|
13
|
+
## Features
|
|
15
14
|
|
|
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 !
|
|
15
|
+
* **Zero Latency**: Smart background preloading for instant track transitions.
|
|
16
|
+
* **State Persistence**: Remembers the current track, volume, and playback progress via `localStorage`.
|
|
17
|
+
* **Full Catalog**: Intelligent random navigation through 60+ historical NCS genres.
|
|
18
|
+
* **Limitless Customization**: The widget is a blank canvas. It exposes the album cover via CSS variables and dynamically injects state classes. You can reshape the entire player using just CSS.
|
|
19
|
+
* **Plug & Play**: Official backend proxy API integrated by default. Zero server configuration required.
|
|
23
20
|
|
|
24
|
-
|
|
21
|
+
## Installation
|
|
25
22
|
|
|
26
|
-
|
|
23
|
+
### Via NPM (React, Vue, Next.js, etc.)
|
|
27
24
|
|
|
28
|
-
|
|
29
|
-
\`\`\`bash
|
|
25
|
+
```bash
|
|
30
26
|
npm install nocopyrightsounds-widget
|
|
31
|
-
\`\`\`
|
|
32
27
|
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Via CDN (Vanilla JS / HTML)
|
|
31
|
+
|
|
32
|
+
```html
|
|
35
33
|
<script type="module">
|
|
36
|
-
import NCSWidget from 'https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js';
|
|
34
|
+
import NCSWidget from '[https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js](https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js)';
|
|
37
35
|
</script>
|
|
38
|
-
\`\`\`
|
|
39
36
|
|
|
40
|
-
|
|
37
|
+
```
|
|
41
38
|
|
|
42
|
-
##
|
|
39
|
+
## Import
|
|
43
40
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
41
|
+
```javascript
|
|
42
|
+
// ES Module (recommended)
|
|
43
|
+
import NCSWidget from 'nocopyrightsounds-widget'
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Examples
|
|
48
|
+
|
|
49
|
+
### Basic Initialization
|
|
50
|
+
|
|
51
|
+
```javascript
|
|
52
|
+
import NCSWidget from 'nocopyrightsounds-widget'
|
|
53
|
+
|
|
54
|
+
// The widget handles everything with default settings
|
|
55
|
+
const player = new NCSWidget()
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Advanced Configuration (Options)
|
|
60
|
+
|
|
61
|
+
You can pass an options object to tweak the widget's behavior and default look:
|
|
62
|
+
|
|
63
|
+
```javascript
|
|
64
|
+
import NCSWidget from 'nocopyrightsounds-widget'
|
|
53
65
|
|
|
54
|
-
### Exemple Avancé (Design sur mesure)
|
|
55
|
-
\`\`\`javascript
|
|
56
66
|
const widget = new NCSWidget({
|
|
57
|
-
position: 'bottom-left',
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
//
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
67
|
+
position: 'bottom-right', // 'bottom-left', 'top-right', 'top-left'
|
|
68
|
+
offsetX: '25px', // Margin from X edge
|
|
69
|
+
offsetY: '25px', // Margin from Y edge
|
|
70
|
+
theme: 'dark', // 'dark' or 'light'
|
|
71
|
+
primaryColor: '#1DB954', // Main accent color
|
|
72
|
+
glassmorphism: true, // Enables a blurred semi-transparent background
|
|
73
|
+
defaultGenre: '10', // Start with House music (ID: 10)
|
|
74
|
+
startVolume: 0.3, // Initial volume (0.0 to 1.0)
|
|
75
|
+
hideDownload: true, // Hide the MP3 download button
|
|
76
|
+
autoOpen: false, // Automatically open on first visit
|
|
77
|
+
minWidth: '55px', // Width of the minimized button
|
|
78
|
+
minHeight: '55px', // Height of the minimized button
|
|
79
|
+
minimizedIcon: '🎵' // Emoji or Text for the minimized button
|
|
80
|
+
})
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## CSS Cookbook: The "Spinning Vinyl"
|
|
85
|
+
|
|
86
|
+
To show you just how far you can push the customization, here is an example. By combining the JS options and custom CSS, you can completely transform the standard rectangular player into a **spinning interactive vinyl record**!
|
|
87
|
+
|
|
88
|
+
### 1. The JavaScript Setup
|
|
89
|
+
|
|
90
|
+
First, stick the widget to the corner and make it a square:
|
|
91
|
+
|
|
92
|
+
```javascript
|
|
93
|
+
import NCSWidget from 'nocopyrightsounds-widget'
|
|
94
|
+
|
|
95
|
+
new NCSWidget({
|
|
96
|
+
position: 'bottom-right',
|
|
97
|
+
offsetX: '0px',
|
|
98
|
+
offsetY: '0px',
|
|
99
|
+
minWidth: '120px',
|
|
100
|
+
minHeight: '120px',
|
|
101
|
+
minimizedIcon: '' // Remove the text to leave room for the cover art
|
|
70
102
|
});
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
103
|
+
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### 2. The CSS Magic
|
|
107
|
+
|
|
108
|
+
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!
|
|
109
|
+
|
|
110
|
+
```css
|
|
111
|
+
/* --- THE QUARTER VINYL (Minimized State) --- */
|
|
112
|
+
.ncs-minimized {
|
|
113
|
+
border-radius: 0 !important;
|
|
114
|
+
background: transparent !important;
|
|
115
|
+
overflow: hidden !important;
|
|
116
|
+
position: relative;
|
|
117
|
+
box-shadow: none !important;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.ncs-minimized::before {
|
|
121
|
+
content: '';
|
|
122
|
+
position: absolute;
|
|
123
|
+
width: 200%; height: 200%; top: 0; left: 0;
|
|
124
|
+
border-radius: 50%;
|
|
125
|
+
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);
|
|
126
|
+
background-size: cover; background-position: center;
|
|
127
|
+
transform-origin: center center;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Spin animation when music plays */
|
|
131
|
+
@keyframes spin { 100% { transform: rotate(360deg); } }
|
|
132
|
+
#ncs-persistent-widget.ncs-is-playing:not(.ncs-is-open) .ncs-minimized::before {
|
|
133
|
+
animation: spin 4s linear infinite;
|
|
134
|
+
}
|
|
135
|
+
#ncs-persistent-widget:not(.ncs-is-open) .ncs-minimized:hover::before { cursor: pointer; filter: brightness(1.15); }
|
|
136
|
+
|
|
137
|
+
/* --- THE FULL VINYL (Expanded State) --- */
|
|
138
|
+
.ncs-expanded {
|
|
139
|
+
width: 360px !important; height: 360px !important;
|
|
140
|
+
border-radius: 50% !important; padding: 30px !important;
|
|
141
|
+
background: transparent !important; border: none !important;
|
|
142
|
+
transform-origin: bottom right;
|
|
143
|
+
display: flex !important; flex-direction: column; justify-content: center; align-items: center;
|
|
144
|
+
box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* The animated vinyl background */
|
|
148
|
+
.ncs-expanded::before {
|
|
149
|
+
content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -2;
|
|
150
|
+
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);
|
|
151
|
+
background-size: cover; background-position: center;
|
|
108
152
|
}
|
|
109
|
-
|
|
153
|
+
#ncs-persistent-widget.ncs-is-playing .ncs-expanded::before { animation: spin 10s linear infinite; }
|
|
110
154
|
|
|
111
|
-
|
|
155
|
+
/* Dark overlay for text readability */
|
|
156
|
+
.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; }
|
|
112
157
|
|
|
113
|
-
|
|
158
|
+
/* Open/Close Animation */
|
|
159
|
+
.ncs-expanded:not(.active) { transform: scale(0) rotate(-90deg) !important; opacity: 0; pointer-events: none; }
|
|
160
|
+
.ncs-expanded.active { transform: scale(1) rotate(0deg) !important; opacity: 1; }
|
|
114
161
|
|
|
115
|
-
|
|
116
|
-
|
|
162
|
+
/* Reorganize internal elements for the circular layout */
|
|
163
|
+
.ncs-header, .ncs-track-info, .ncs-progress-container, .ncs-controls, .ncs-bottom-bar { position: relative; z-index: 1; width: 100%; }
|
|
164
|
+
.ncs-header strong, .ncs-cover, .ncs-download-btn { display: none !important; }
|
|
165
|
+
.ncs-header { position: absolute; top: 35px; right: 50px; justify-content: flex-end !important; }
|
|
166
|
+
.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); }
|
|
167
|
+
.ncs-details { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
|
|
168
|
+
#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; }
|
|
169
|
+
#ncs-artists { font-size: 13px !important; color: #ccc !important; }
|
|
170
|
+
#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; }
|
|
171
|
+
.ncs-controls { margin: 15px 0 !important; gap: 20px !important; }
|
|
172
|
+
.ncs-btn-circle { width: 60px !important; height: 60px !important; background: white !important; color: black !important; }
|
|
173
|
+
.ncs-progress-container { width: 80% !important; margin: 0 auto 15px auto !important; }
|
|
174
|
+
.ncs-bottom-bar { width: 60% !important; margin: 0 auto !important; justify-content: center !important; }
|
|
117
175
|
|
|
118
|
-
|
|
176
|
+
```
|
|
119
177
|
|
|
120
|
-
##
|
|
178
|
+
## Disclaimer & License
|
|
121
179
|
|
|
122
|
-
|
|
180
|
+
Distributed under the MIT License.
|
|
123
181
|
|
|
124
|
-
|
|
182
|
+
This project is not affiliated with NoCopyrightSounds. All streamed music belongs to their respective creators and NCS. Please respect the NCS usage policy when using their tracks.
|
package/package.json
CHANGED
|
@@ -1,24 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nocopyrightsounds-widget",
|
|
3
|
-
"version": "1.4.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.4.2",
|
|
4
|
+
"description": "A sleek, floating, and 100% CSS-hackable music player for NCS.",
|
|
5
5
|
"main": "src/index.js",
|
|
6
|
-
"type": "module",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
9
|
-
},
|
|
10
6
|
"repository": {
|
|
11
7
|
"type": "git",
|
|
12
|
-
"url": "https://github.com/floriangobin/nocopyrightsounds-widget.git"
|
|
8
|
+
"url": "git+https://github.com/floriangobin/nocopyrightsounds-widget.git"
|
|
13
9
|
},
|
|
14
10
|
"keywords": [
|
|
15
11
|
"ncs",
|
|
16
12
|
"music",
|
|
17
13
|
"widget",
|
|
18
|
-
"audio",
|
|
19
14
|
"player",
|
|
20
15
|
"nocopyrightsounds"
|
|
21
16
|
],
|
|
22
|
-
"author": "
|
|
17
|
+
"author": "Florian Gobin",
|
|
23
18
|
"license": "MIT"
|
|
24
|
-
}
|
|
19
|
+
}
|