music-player-nocturn 1.0.0
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 +50 -0
- package/index.html +955 -0
- package/package.json +23 -0
- package/script.js +323 -0
- package/styles.css +199 -0
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# YouTube Music Player
|
|
2
|
+
|
|
3
|
+
A simple browser music player that uses the YouTube Data API and YouTube IFrame Player API.
|
|
4
|
+
|
|
5
|
+
## What it does
|
|
6
|
+
|
|
7
|
+
- Search for music tracks using YouTube search
|
|
8
|
+
- Display a queue of results
|
|
9
|
+
- Play the selected track in an embedded YouTube player
|
|
10
|
+
- Play / pause, next, and previous controls
|
|
11
|
+
|
|
12
|
+
## Setup
|
|
13
|
+
|
|
14
|
+
1. Get a YouTube Data API key:
|
|
15
|
+
- Open the Google Cloud Console
|
|
16
|
+
- Enable the YouTube Data API v3
|
|
17
|
+
- Create an API key
|
|
18
|
+
|
|
19
|
+
2. Open `script.js` and replace:
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
const API_KEY = "YOUR_API_KEY_HERE";
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
with your actual API key.
|
|
26
|
+
|
|
27
|
+
3. Start a local server in this folder:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
python3 -m http.server 8000
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
4. Open your browser at:
|
|
34
|
+
|
|
35
|
+
```text
|
|
36
|
+
http://localhost:8000
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
- Type a song, artist, or playlist name in the search box
|
|
42
|
+
- Click `Search`
|
|
43
|
+
- Click `Play` on a result to load it
|
|
44
|
+
- Use `Prev`, `Play/Pause`, and `Next` controls
|
|
45
|
+
- Use the `Like` button to save songs and filter them in the Liked Songs section
|
|
46
|
+
|
|
47
|
+
## Notes
|
|
48
|
+
|
|
49
|
+
- The app uses the YouTube Data API for searching and the YouTube IFrame Player API for playback.
|
|
50
|
+
- If the player does not load, make sure the API key is valid and the page is served over `http://` or `https://`.
|