https://github.com/yizack/nuxt-musicfyplayer
Embed a simple HTML music player from local or hosted audio on your Nuxt app using MediaElement.js and ColorThief.js
https://github.com/yizack/nuxt-musicfyplayer
media-player music music-player nuxt nuxt3
Last synced: about 2 months ago
JSON representation
Embed a simple HTML music player from local or hosted audio on your Nuxt app using MediaElement.js and ColorThief.js
- Host: GitHub
- URL: https://github.com/yizack/nuxt-musicfyplayer
- Owner: Yizack
- License: mit
- Created: 2024-02-12T14:23:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-05T08:00:19.000Z (about 2 months ago)
- Last Synced: 2025-04-05T08:03:18.364Z (about 2 months ago)
- Topics: media-player, music, music-player, nuxt, nuxt3
- Language: CSS
- Homepage:
- Size: 1.08 MB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# nuxt-musicfyplayer
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Embed a simple HTML music player from local or hosted audio on your Nuxt app using MediaElement.js and fast-average-color
- [✨ Release Notes](https://github.com/Yizack/nuxt-musicfyplayer/blob/main/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-musicfyplayer?file=playground%2Fapp.vue)
## Quick Setup
1. Add `nuxt-musicfyplayer` dependency to your project
```bash
# Using pnpm
pnpm add -D nuxt-musicfyplayer
# Using yarn
yarn add --dev nuxt-musicfyplayer
# Using npm
npm install --save-dev nuxt-musicfyplayer
```
2. Add `nuxt-musicfyplayer` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'nuxt-musicfyplayer'
]
})
```
That's it! You can now use `nuxt-musicfyplayer` in your Nuxt app ✨
## Usage
In the project, use the component ``, where `config` is the configuration options of the player.
### Component properties
## Size properties
| Property | Description | Default value |
|---------------------------------------|--------------------------|---------------|
| [`config`](#musicfyplayer-composable) | MusicfyPlayer composable | |
| `width` | Music player width | `100%` |
| `height` | Music player height | `450px` |
## MusicfyPlayer composable
Define your configuration options with the `useMusicfyPlayer` composable.
| Property | Description |
|-------------------------------------|---------------------------------------|
| [`audio`](#audio-shared-properties) | The audio source properties |
| [`image`](#image-properties) | The image source (preferably squared) |
| [`color`](#color-properties) | Color options |
## Audio shared properties
| Property | Description | Default value |
|------------|----------------------------------|---------------|
| `provider` | Provider of the audio source. | `local` |
| `type` | Content-type fo the audio source | `audio/mpeg` |
| `preload` | Preload the audio source | `auto` |
| [`...`](#supported-audio-providers) | Selected audio provider properties ||
### Supported audio providers
| Provider | Value |
|--------------------------------------|----------|
| [URL](#local-audio-properties) | `local` |
| [Dropbox](#dropbox-audio-properties) | `dropbox`|
### Local audio properties
| Audio property | Description | Required |
|----------------|---------------------------|----------|
| `src` | Audio source link | Yes |
### Dropbox audio properties
| Audio property | Description | Required |
|----------------|---------------------------|----------|
| `id` | File identifier | Yes |
| `rlkey` | New file identifier param | No |
## Image properties
| Property | Description | Required |
|----------|------------------------|----------|
| `src` | Image source link | Yes |
| `alt` | Image alternative text | No |
## Color properties
| Property | Description | Default value |
|----------|---------------------------------------------------------------------------------------------|-----------------------|
| `class` | A custom class for your player's background color | `musicfyplayer-color` |
| `detect` | Detect the dominant color from the image source and use it as the player's background color | `false` |
## Example
Use the `useMusicfyPlayer` composable to define the configuration options of the player.
```html
const config = useMusicfyPlayer({
audio: {
provider: "dropbox",
preload: "none",
id: "soep3xvq8aee4eh6hcj4r",
rlkey: "g7sqo9y5zl3f69oxftzo5auc5"
},
image: {
src: "https://dimatis.music/images/reminiscences.jpg",
alt: "Dimatis - Reminiscences"
},
color: {
detect: true
}
})
```
### More examples
Example of use on a website: [Dimatis Website](https://dimatis.yizack.com)
[](https://dimatis.yizack.com)
[](https://dimatis.yizack.com/music/fly-again)
Check out the [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-musicfyplayer?file=playground%2Fapp.vue) for more examples.
## Credits
- Built based on [embeddable-music-player](https://github.com/Yizack/embeddable-music-player)
- Detect average color with [fast-average-color](https://github.com/fast-average-color/fast-average-color)
- Music player controls by [MediaElement.js](https://www.mediaelementjs.com/)
- [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)
## Development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-musicfyplayer/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-musicfyplayer
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-musicfyplayer.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/nuxt-musicfyplayer
[license-src]: https://img.shields.io/npm/l/nuxt-musicfyplayer.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: LICENSE
[tests-src]: https://img.shields.io/github/actions/workflow/status/Yizack/nuxt-musicfyplayer/tests.yml?style=flat&colorA=020420&colorB=00DC82&label=tests
[tests-href]: https://github.com/Yizack/nuxt-musicfyplayer/actions/workflows/tests.yml
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com