nuxt-musicfyplayer 1.0.0 → 1.0.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
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
1
3
|
# nuxt-musicfyplayer
|
|
2
4
|
|
|
3
5
|
[![npm version][npm-version-src]][npm-version-href]
|
|
@@ -6,11 +8,146 @@
|
|
|
6
8
|
[![Tests][tests-src]][tests-href]
|
|
7
9
|
[![Nuxt][nuxt-src]][nuxt-href]
|
|
8
10
|
|
|
9
|
-
Embed a simple
|
|
11
|
+
Embed a simple HTML music player from local or hosted audio on your Nuxt app using MediaElement.js and ColorThief.js
|
|
10
12
|
|
|
11
13
|
- [✨ Release Notes](https://github.com/Yizack/nuxt-musicfyplayer/blob/main/CHANGELOG.md)
|
|
12
14
|
- [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-musicfyplayer?file=playground%2Fapp.vue)
|
|
13
15
|
|
|
16
|
+
## Quick Setup
|
|
17
|
+
|
|
18
|
+
1. Add `nuxt-musicfyplayer` dependency to your project
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
# Using pnpm
|
|
22
|
+
pnpm add -D nuxt-musicfyplayer
|
|
23
|
+
|
|
24
|
+
# Using yarn
|
|
25
|
+
yarn add --dev nuxt-musicfyplayer
|
|
26
|
+
|
|
27
|
+
# Using npm
|
|
28
|
+
npm install --save-dev nuxt-musicfyplayer
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
2. Add `nuxt-musicfyplayer` to the `modules` section of `nuxt.config.ts`
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
export default defineNuxtConfig({
|
|
35
|
+
modules: [
|
|
36
|
+
'nuxt-musicfyplayer'
|
|
37
|
+
]
|
|
38
|
+
})
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
That's it! You can now use `nuxt-musicfyplayer` in your Nuxt app ✨
|
|
42
|
+
|
|
43
|
+
## Usage
|
|
44
|
+
|
|
45
|
+
In the project, use the component `<MusicfyPlayer :config="" />`, where `config` is the configuration options of the player.
|
|
46
|
+
|
|
47
|
+
Define your configuration options with the `defineMusicfyPlayer` composable.
|
|
48
|
+
|
|
49
|
+
| Property | Description |
|
|
50
|
+
|----------------------------|---------------------------------------|
|
|
51
|
+
| [`audio`](#audio-shared-properties) | The audio source properties |
|
|
52
|
+
| [`image`](#image-properties) | The image source (preferably squared) |
|
|
53
|
+
| [`size`](#size-properties) | The size of your player |
|
|
54
|
+
| [`color`](#color-properties) | Color options |
|
|
55
|
+
|
|
56
|
+
## Audio shared properties
|
|
57
|
+
|
|
58
|
+
| Property | Description | Default value |
|
|
59
|
+
|------------|----------------------------------|---------------|
|
|
60
|
+
| `provider` | Provider of the audio source. | `local` |
|
|
61
|
+
| `type` | Content-type fo the audio source | `audio/mpeg` |
|
|
62
|
+
| [`...`](#supported-audio-providers) | Selected audio provider properties ||
|
|
63
|
+
|
|
64
|
+
### Supported audio providers
|
|
65
|
+
|
|
66
|
+
| Provider | Value |
|
|
67
|
+
|--------------------------------------|----------|
|
|
68
|
+
| [URL](#local-audio-properties) | `local` |
|
|
69
|
+
| [Dropbox](#dropbox-audio-properties) | `dropbox`|
|
|
70
|
+
|
|
71
|
+
### Local audio properties
|
|
72
|
+
|
|
73
|
+
| Audio property | Description | Required |
|
|
74
|
+
|----------------|---------------------------|----------|
|
|
75
|
+
| `src` | Audio source link | Yes |
|
|
76
|
+
|
|
77
|
+
### Dropbox audio properties
|
|
78
|
+
|
|
79
|
+
| Audio property | Description | Required |
|
|
80
|
+
|----------------|---------------------------|----------|
|
|
81
|
+
| `id` | File identifier | Yes |
|
|
82
|
+
| `rlkey` | New file identifier param | No |
|
|
83
|
+
|
|
84
|
+
## Image properties
|
|
85
|
+
|
|
86
|
+
| Property | Description | Required |
|
|
87
|
+
|----------|------------------------|----------|
|
|
88
|
+
| `src` | Image source link | Yes |
|
|
89
|
+
| `alt` | Image alternative text | No |
|
|
90
|
+
|
|
91
|
+
## Size properties
|
|
92
|
+
|
|
93
|
+
| Property | Description | Default value |
|
|
94
|
+
|----------|------------------------|---------------|
|
|
95
|
+
| `width` | Music player width | `100%` |
|
|
96
|
+
| `height` | Music player height | `450px` |
|
|
97
|
+
|
|
98
|
+
## Color properties
|
|
99
|
+
|
|
100
|
+
| Property | Description | Default value |
|
|
101
|
+
|----------|---------------------------------------------------------------------------------------------|-----------------------|
|
|
102
|
+
| `class` | A custom class for your player's background color | `musicfyplayer-color` |
|
|
103
|
+
| `detect` | Detect the dominant color from the image source and use it as the player's background color | `false` |
|
|
104
|
+
|
|
105
|
+
## Example
|
|
106
|
+
|
|
107
|
+
Use the emoji property to render an emoji by character.
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<script setup lang="ts">
|
|
111
|
+
const config = defineMusicfyPlayer({
|
|
112
|
+
audio: {
|
|
113
|
+
provider: "dropbox",
|
|
114
|
+
id: "soep3xvq8aee4eh6hcj4r",
|
|
115
|
+
rlkey: "g7sqo9y5zl3f69oxftzo5auc5"
|
|
116
|
+
},
|
|
117
|
+
image: {
|
|
118
|
+
src: "https://dimatis.yizack.com/images/reminiscences.jpg",
|
|
119
|
+
alt: "Dimatis - Reminiscences"
|
|
120
|
+
},
|
|
121
|
+
size: {
|
|
122
|
+
width: "100%"
|
|
123
|
+
},
|
|
124
|
+
color: {
|
|
125
|
+
detect: true
|
|
126
|
+
}
|
|
127
|
+
})
|
|
128
|
+
</script>
|
|
129
|
+
|
|
130
|
+
<template>
|
|
131
|
+
<MusicfyPlayer :config="config" />
|
|
132
|
+
</template>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### More examples
|
|
136
|
+
|
|
137
|
+
Example of use on a website: [Dimatis Website](https://dimatis.yizack.com)
|
|
138
|
+
|
|
139
|
+
[](https://dimatis.yizack.com)
|
|
140
|
+
|
|
141
|
+
[](https://dimatis.yizack.com/music/fly-again)
|
|
142
|
+
|
|
143
|
+
Check out the [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-musicfyplayer?file=playground%2Fapp.vue) for more examples.
|
|
144
|
+
|
|
145
|
+
## Credits
|
|
146
|
+
|
|
147
|
+
- Detect dominant color with [ColorThief](https://lokeshdhakar.com/projects/color-thief/)
|
|
148
|
+
- Music player controls by [MediaElement.js](https://www.mediaelementjs.com/)
|
|
149
|
+
- [Nuxt](https://github.com/nuxt/nuxt), the JavaScript framework for creating SSR Vue applications and its [Module Author Guide](https://nuxt.com/docs/guide/going-further/modules)
|
|
150
|
+
|
|
14
151
|
## Development
|
|
15
152
|
|
|
16
153
|
```bash
|
package/dist/module.json
CHANGED
|
@@ -8,7 +8,7 @@ export const defineMusicfyPlayer = (config) => {
|
|
|
8
8
|
const provider = config.audio.provider || "local";
|
|
9
9
|
const size = {
|
|
10
10
|
width: config.size?.width || "100%",
|
|
11
|
-
height: config.size?.height || "
|
|
11
|
+
height: config.size?.height || "450px"
|
|
12
12
|
};
|
|
13
13
|
switch (provider) {
|
|
14
14
|
default:
|
|
@@ -24,8 +24,8 @@ export const defineMusicfyPlayer = (config) => {
|
|
|
24
24
|
}
|
|
25
25
|
return {
|
|
26
26
|
imageSrc: config.image.src,
|
|
27
|
-
imageAlt: config.image.alt,
|
|
28
|
-
audioType: config.audio.type,
|
|
27
|
+
imageAlt: config.image.alt || "Musicfy Player",
|
|
28
|
+
audioType: config.audio.type || "audio/mpeg",
|
|
29
29
|
audioSrc: audioSrc.value,
|
|
30
30
|
sizeWidth: size.width,
|
|
31
31
|
sizeHeight: size.height,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nuxt-musicfyplayer",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Embed a simple and beautiful HTML music player from local or hosted audio on your website using MediaElement.js and ColorThief.js",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"nuxt",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
],
|
|
32
32
|
"scripts": {
|
|
33
33
|
"prepack": "nuxt-module-build build",
|
|
34
|
-
"dev": "nuxi dev playground",
|
|
34
|
+
"dev": "npm run dev:prepare && nuxi dev playground",
|
|
35
35
|
"dev:build": "nuxi build playground",
|
|
36
36
|
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
|
|
37
37
|
"release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
|