nuxt-musicfyplayer v2.1.2

nuxt-musicfyplayer

Embed a simple HTML music player from local or hosted audio on your Nuxt app using MediaElement.js and ColorThief.js

• ✨ Release Notes
• 🏀 Online playground

Quick Setup

1. Add nuxt-musicfyplayer dependency to your project

# 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

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 <MusicfyPlayer :config="" />, where config is the configuration options of the player.

Component properties

Size properties

MusicfyPlayer composable

Define your configuration options with the useMusicfyPlayer composable.

Audio shared properties

Supported audio providers

Local audio properties

Dropbox audio properties

Image properties

Color properties

Example

Use the useMusicfyPlayer composable to define the configuration options of the player.

<script setup lang="ts">
const config = useMusicfyPlayer({
  audio: {
    provider: "dropbox",
    preload: "none",
    id: "soep3xvq8aee4eh6hcj4r",
    rlkey: "g7sqo9y5zl3f69oxftzo5auc5"
  },
  image: {
    src: "https://dimatis.yizack.com/images/reminiscences.jpg",
    alt: "Dimatis - Reminiscences"
  },
  color: {
    detect: true
  }
})
</script>

<template>
  <MusicfyPlayer :config="config" width="100%" />
</template>

More examples

Example of use on a website: Dimatis Website

Check out the 🏀 Online playground for more examples.

Credits

• Detect dominant color with ColorThief
• Music player controls by MediaElement.js
• Nuxt, the JavaScript framework for creating SSR Vue applications and its Module Author Guide

Development

# 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