@uimaxbai/am-lyrics 1.0.6 → 1.0.8
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 +24 -24
- package/demo/index.html +2 -2
- package/dist/src/AmLyrics.d.ts +15 -0
- package/dist/src/AmLyrics.d.ts.map +1 -1
- package/dist/src/am-lyrics.js +408 -52
- package/dist/src/am-lyrics.js.map +1 -1
- package/dist/src/react.js +408 -52
- package/dist/src/react.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/AmLyrics.ts +461 -29
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
|
|
6
6
|
|
|
7
|
+
This web component utilises the [lyricsplus](https://github.com/ibratabian17/YouLyPlus) API to fetch lyrics and the animations are heavily inspired by [YouLy+](https://github.com/ibratabian17/YouLyPlus).
|
|
8
|
+
|
|
7
9
|
## Installation
|
|
8
10
|
|
|
9
11
|
```bash
|
|
@@ -37,23 +39,23 @@ Or, just use the CDN.
|
|
|
37
39
|
|
|
38
40
|
## Properties & Attributes
|
|
39
41
|
|
|
40
|
-
| Property/Attribute
|
|
41
|
-
|
|
42
|
-
| `query`
|
|
43
|
-
| `music-id`
|
|
44
|
-
| `isrc`
|
|
45
|
-
| `song-title`
|
|
46
|
-
| `song-artist`
|
|
47
|
-
| `song-album`
|
|
48
|
-
| `song-duration`
|
|
49
|
-
| `current-time`
|
|
50
|
-
| `duration`
|
|
51
|
-
| `highlight-color`
|
|
52
|
-
| `hover-background-color` | `string`
|
|
53
|
-
| ~~`hide-source-footer`~~ | `boolean` | `false`
|
|
54
|
-
| `font-family`
|
|
55
|
-
| `autoscroll`
|
|
56
|
-
| `interpolate`
|
|
42
|
+
| Property/Attribute | Type | Default | Description |
|
|
43
|
+
| ------------------------ | --------- | ----------- | ---------------------------------------------------------------------------------------------- |
|
|
44
|
+
| `query` | `string` | `undefined` | Search phrase that resolves metadata via LyricsPlus catalog (falls back to Apple Music search) |
|
|
45
|
+
| `music-id` | `string` | `undefined` | Specific Apple Music song ID (served through the backup Apple endpoint) |
|
|
46
|
+
| `isrc` | `string` | `undefined` | ISRC code to verify correct song match |
|
|
47
|
+
| `song-title` | `string` | `undefined` | Preferred title for LyricsPlus (primary) provider |
|
|
48
|
+
| `song-artist` | `string` | `undefined` | Preferred artist name for LyricsPlus provider |
|
|
49
|
+
| `song-album` | `string` | `undefined` | Optional album name passed to LyricsPlus provider |
|
|
50
|
+
| `song-duration` | `number` | `undefined` | Optional song duration in milliseconds sent to LyricsPlus |
|
|
51
|
+
| `current-time` | `number` | `0` | Current playback time in milliseconds |
|
|
52
|
+
| `duration` | `number` | `undefined` | Playback timer duration in milliseconds. **Set to `-1` to reset/stop playback** |
|
|
53
|
+
| `highlight-color` | `string` | `"#000"` | Color for highlighted/active lyrics |
|
|
54
|
+
| `hover-background-color` | `string` | `"#f0f0f0"` | Background color on line hover |
|
|
55
|
+
| ~~`hide-source-footer`~~ | `boolean` | `false` | Hide/show the source attribution footer |
|
|
56
|
+
| `font-family` | `string` | `undefined` | Custom font family for lyrics |
|
|
57
|
+
| `autoscroll` | `boolean` | `true` | Enable automatic scrolling to active lyrics |
|
|
58
|
+
| `interpolate` | `boolean` | `true` | Enable smooth word-by-word highlighting animation |
|
|
57
59
|
|
|
58
60
|
## CSS Custom Properties (CSS Variables)
|
|
59
61
|
|
|
@@ -63,10 +65,10 @@ You can customize the appearance using CSS custom properties:
|
|
|
63
65
|
am-lyrics {
|
|
64
66
|
/* Highlight color for active lyrics */
|
|
65
67
|
--am-lyrics-highlight-color: #007aff;
|
|
66
|
-
|
|
68
|
+
|
|
67
69
|
/* Hover background color (fallback) */
|
|
68
70
|
--hover-background-color: #f5f5f5;
|
|
69
|
-
|
|
71
|
+
|
|
70
72
|
/* Alternative highlight color (fallback) */
|
|
71
73
|
--highlight-color: #000;
|
|
72
74
|
}
|
|
@@ -74,7 +76,6 @@ am-lyrics {
|
|
|
74
76
|
|
|
75
77
|
**Note**: The CSS variables take precedent over the set properties above.
|
|
76
78
|
|
|
77
|
-
|
|
78
79
|
## Lyrics providers
|
|
79
80
|
|
|
80
81
|
The component now only uses the LyricsPlus (KPoe) API that powers [YouLyPlus](https://github.com/ibratabian17/YouLyPlus).
|
|
@@ -82,8 +83,7 @@ The component now only uses the LyricsPlus (KPoe) API that powers [YouLyPlus](ht
|
|
|
82
83
|
1. Provide `song-title` and `song-artist` (plus optional `song-album`/`song-duration`) to request word-synced lyrics from LyricsPlus. A standalone `query` such as `"Bad Habit - Steve Lacy"` also works—the component looks up the metadata through LyricsPlus' `/v1/songlist/search` endpoint.
|
|
83
84
|
2. If LyricsPlus cannot serve lyrics or metadata is missing, the component automatically falls back to the legacy Apple Music endpoint using the best available identifiers (`query`, `music-id`, `isrc`). Requests that rely solely on `music-id` are handled exclusively by this backup service because LyricsPlus does not support Apple IDs.
|
|
84
85
|
|
|
85
|
-
The footer shows the active provider (e.g. “LyricsPlus (KPoe)” or “Apple Music”) so you always know which service responded. Supplying both metadata
|
|
86
|
-
|
|
86
|
+
The footer shows the active provider (e.g. “LyricsPlus (KPoe)” or “Apple Music”) so you always know which service responded. Supplying both metadata _and_ a `query` gives the best results because the query remains available for the Apple Music backup.
|
|
87
87
|
|
|
88
88
|
## Events
|
|
89
89
|
|
|
@@ -92,7 +92,7 @@ The footer shows the active provider (e.g. “LyricsPlus (KPoe)” or “Apple M
|
|
|
92
92
|
Fired when a user clicks on a lyrics line.
|
|
93
93
|
|
|
94
94
|
```javascript
|
|
95
|
-
amLyrics.addEventListener('line-click',
|
|
95
|
+
amLyrics.addEventListener('line-click', event => {
|
|
96
96
|
console.log('Seek to:', event.detail.timestamp); // timestamp in milliseconds
|
|
97
97
|
});
|
|
98
98
|
```
|
|
@@ -295,7 +295,7 @@ You can synchronize the lyrics with an HTML `<audio>` element.
|
|
|
295
295
|
});
|
|
296
296
|
|
|
297
297
|
// Seek audio when a lyric line is clicked
|
|
298
|
-
amLyrics.addEventListener('line-click',
|
|
298
|
+
amLyrics.addEventListener('line-click', e => {
|
|
299
299
|
// The event detail contains the timestamp in milliseconds
|
|
300
300
|
audioPlayer.currentTime = e.detail.timestamp / 1000;
|
|
301
301
|
audioPlayer.play();
|
package/demo/index.html
CHANGED
package/dist/src/AmLyrics.d.ts
CHANGED
|
@@ -62,6 +62,21 @@ export declare class AmLyrics extends LitElement {
|
|
|
62
62
|
private static parseQueryMetadata;
|
|
63
63
|
private static searchLyricsPlusCatalog;
|
|
64
64
|
private static fetchLyricsFromYouLyPlus;
|
|
65
|
+
/**
|
|
66
|
+
* Parse LRC subtitle format into LyricsLine[].
|
|
67
|
+
* Handles "[mm:ss.xx] text" lines.
|
|
68
|
+
*/
|
|
69
|
+
private static parseLrcSubtitles;
|
|
70
|
+
/**
|
|
71
|
+
* Fetch lyrics from Tidal API.
|
|
72
|
+
* Picks 2 random servers, tries search + lyrics on each.
|
|
73
|
+
*/
|
|
74
|
+
private static fetchLyricsFromTidal;
|
|
75
|
+
/**
|
|
76
|
+
* Fetch lyrics from LRCLIB.
|
|
77
|
+
* Uses search endpoint, prefers synced lyrics.
|
|
78
|
+
*/
|
|
79
|
+
private static fetchLyricsFromLrclib;
|
|
65
80
|
private static convertKPoeLyrics;
|
|
66
81
|
private static toMilliseconds;
|
|
67
82
|
firstUpdated(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AmLyrics.d.ts","sourceRoot":"","sources":["../../src/AmLyrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"AmLyrics.d.ts","sourceRoot":"","sources":["../../src/AmLyrics.ts"],"names":[],"mappings":"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"}
|