├── .gitattributes ├── tsconfig.json ├── playground ├── public │ └── images │ │ └── reminiscences.jpg ├── nuxt.config.ts ├── tsconfig.json ├── package.json └── app │ └── app.vue ├── pnpm-workspace.yaml ├── .editorconfig ├── src ├── runtime │ ├── utils │ │ ├── average-color.ts │ │ ├── mediaelement.ts │ │ └── sources.ts │ ├── types │ │ ├── providers.d.ts │ │ ├── mediaelement.d.ts │ │ └── musicfyplayer.d.ts │ ├── composables │ │ └── musicfyplayer.ts │ ├── components │ │ └── MusicfyPlayer.vue │ └── assets │ │ └── css │ │ └── musicfyplayer.css └── module.ts ├── .github └── workflows │ ├── autofix.yml │ ├── release.yml │ └── ci.yml ├── eslint.config.mjs ├── .gitignore ├── LICENSE ├── package.json ├── README.md └── CHANGELOG.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json", 3 | "exclude": [ 4 | "playground", 5 | "dist", 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /playground/public/images/reminiscences.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yizack/nuxt-musicfyplayer/HEAD/playground/public/images/reminiscences.jpg -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | shamefullyHoist: true 2 | strictPeerDependencies: false 3 | 4 | packages: 5 | - playground 6 | 7 | ignoredBuiltDependencies: 8 | - '@parcel/watcher' 9 | - esbuild 10 | - unrs-resolver 11 | -------------------------------------------------------------------------------- /playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | modules: ['../src/module.ts'], 3 | imports: { 4 | autoImport: true, 5 | }, 6 | devtools: { enabled: true }, 7 | compatibilityDate: '2025-12-10', 8 | }) 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /src/runtime/utils/average-color.ts: -------------------------------------------------------------------------------- 1 | import { FastAverageColor } from 'fast-average-color' 2 | 3 | const fac = new FastAverageColor() 4 | 5 | export const getImageAverageColor = async (src: string) => { 6 | const color = await fac.getColorAsync(src) 7 | return color.rgb 8 | } 9 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./.nuxt/tsconfig.app.json" }, 5 | { "path": "./.nuxt/tsconfig.server.json" }, 6 | { "path": "./.nuxt/tsconfig.shared.json" }, 7 | { "path": "./.nuxt/tsconfig.node.json" } 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "nuxt-musicfyplayer", 4 | "type": "module", 5 | "scripts": { 6 | "dev": "nuxt dev", 7 | "build": "nuxt build", 8 | "generate": "nuxt generate" 9 | }, 10 | "dependencies": { 11 | "nuxt": "^4.2.2" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/runtime/types/providers.d.ts: -------------------------------------------------------------------------------- 1 | export interface Providers { 2 | local: { 3 | /** 4 | * Path to the audio file 5 | * @example '/path/to/audio.mp3' 6 | * @example 'https://example.com/audio.mp3' 7 | */ 8 | src: string 9 | } 10 | dropbox: { 11 | id: string 12 | rlkey?: string 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /playground/app/app.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /src/runtime/types/mediaelement.d.ts: -------------------------------------------------------------------------------- 1 | export interface MediaElementPlayer { 2 | new (node: HTMLAudioElement, options: MediaElementPlayerOptions): void 3 | } 4 | 5 | export interface MediaElementPlayerOptions { 6 | iconSprite: string 7 | audioHeight: number 8 | features: ('playpause' | 'current' | 'progress' | 'duration' | 'tracks' | 'volume' | 'fullscreen')[] 9 | alwaysShowControls: boolean 10 | timeAndDurationSeparator: string 11 | iPadUseNativeControls: boolean 12 | iPhoneUseNativeControls: boolean 13 | AndroidUseNativeControls: boolean 14 | } 15 | 16 | declare global { 17 | interface Window { 18 | MediaElementPlayer?: MediaElementPlayer 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/runtime/utils/mediaelement.ts: -------------------------------------------------------------------------------- 1 | import 'mediaelement/build/mediaelement-and-player.min.js' 2 | import { createError } from 'h3' 3 | import type { MediaElementPlayerOptions } from '../types/mediaelement' 4 | 5 | export const mediaElementPlayer = (element: HTMLAudioElement, options: MediaElementPlayerOptions) => { 6 | const MediaElementPlayer = window.MediaElementPlayer 7 | 8 | if (!import.meta.client) throw createError({ status: 500, message: 'MediaElementPlayer is not available on server side' }) 9 | if (!MediaElementPlayer) throw createError({ status: 500, message: 'MediaElementPlayer is not available' }) 10 | 11 | return new MediaElementPlayer(element, options) 12 | } 13 | -------------------------------------------------------------------------------- /src/runtime/utils/sources.ts: -------------------------------------------------------------------------------- 1 | import type { Providers } from '../types/providers' 2 | 3 | const getDropboxSource = (id: string, rlkey?: string) => { 4 | const dropboxBase = 'https://www.dropbox.com' 5 | return rlkey ? `${dropboxBase}/scl/fi/${id}/?rlkey=${rlkey}&dl=1` : `${dropboxBase}/s/${id}?dl=1` 6 | } 7 | 8 | export const getSource = (provider: T, config: Providers[keyof Providers]) => { 9 | switch (provider) { 10 | default: 11 | case 'local': 12 | return (config as Providers['local']).src 13 | case 'dropbox': 14 | return getDropboxSource((config as Providers['dropbox']).id, (config as Providers['dropbox']).rlkey) 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.github/workflows/autofix.yml: -------------------------------------------------------------------------------- 1 | name: autofix.ci # needed to securely identify the workflow 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | 8 | permissions: 9 | contents: read 10 | 11 | jobs: 12 | lint: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v6 17 | - run: corepack enable 18 | - uses: actions/setup-node@v6 19 | with: 20 | node-version: lts/* 21 | cache: pnpm 22 | 23 | - name: 📦 Install dependencies 24 | run: pnpm install 25 | 26 | - name: 🔎 Lint (code) 27 | run: pnpm lint:fix 28 | 29 | - name: ⚙️ Auto-fix 30 | uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 31 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { createConfigForNuxt } from '@nuxt/eslint-config/flat' 3 | 4 | // Run `npx @eslint/config-inspector` to inspect the resolved config interactively 5 | export default createConfigForNuxt({ 6 | features: { 7 | // Rules for module authors 8 | tooling: true, 9 | // Rules for formatting 10 | stylistic: true, 11 | }, 12 | dirs: { 13 | src: [ 14 | './playground', 15 | ], 16 | }, 17 | }).append({ 18 | rules: { 19 | 'vue/multi-word-component-names': 'off', 20 | 'vue/max-attributes-per-line': 'off', 21 | 'vue/singleline-html-element-content-newline': 'off', 22 | 'unicorn/escape-case': 'off', 23 | 'no-misleading-character-class': 'off', 24 | }, 25 | }) 26 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtModule, createResolver, addComponent, addImportsDir } from '@nuxt/kit' 2 | 3 | // eslint-disable-next-line @typescript-eslint/no-empty-object-type 4 | export interface ModuleOptions {} 5 | 6 | export default defineNuxtModule({ 7 | meta: { 8 | name: 'nuxt-musicfyplayer', 9 | configKey: 'musicfyplayer', 10 | compatibility: { 11 | nuxt: '>=3.0.0', 12 | }, 13 | }, 14 | setup() { 15 | const { resolve } = createResolver(import.meta.url) 16 | addComponent({ 17 | name: 'MusicfyPlayer', 18 | global: true, 19 | filePath: resolve('./runtime/components/MusicfyPlayer.vue'), 20 | }) 21 | addImportsDir(resolve('./runtime/composables')) 22 | }, 23 | }) 24 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: release 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'v*' 7 | 8 | permissions: 9 | contents: write 10 | id-token: write 11 | 12 | jobs: 13 | release: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: actions/checkout@v6 17 | with: 18 | fetch-depth: 0 19 | - run: corepack enable 20 | - uses: actions/setup-node@v6 21 | with: 22 | node-version: latest 23 | cache: pnpm 24 | registry-url: https://registry.npmjs.org 25 | 26 | - run: pnpm config set registry https://registry.npmjs.org 27 | 28 | - name: 📦 Install dependencies 29 | run: pnpm i 30 | 31 | - name: 🚀 Publish package 32 | run: pnpm publish --access public --no-git-checks 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Logs 5 | *.log* 6 | 7 | # Temp directories 8 | .temp 9 | .tmp 10 | .cache 11 | 12 | # Yarn 13 | **/.yarn/cache 14 | **/.yarn/*state* 15 | 16 | # Generated dirs 17 | dist 18 | 19 | # Nuxt 20 | .nuxt 21 | .output 22 | .data 23 | .vercel_build_output 24 | .build-* 25 | .netlify 26 | 27 | # Env 28 | .env 29 | 30 | # Testing 31 | reports 32 | coverage 33 | *.lcov 34 | .nyc_output 35 | 36 | # VSCode 37 | .vscode/* 38 | !.vscode/settings.json 39 | !.vscode/tasks.json 40 | !.vscode/launch.json 41 | !.vscode/extensions.json 42 | !.vscode/*.code-snippets 43 | 44 | # Intellij idea 45 | *.iml 46 | .idea 47 | 48 | # OSX 49 | .DS_Store 50 | .AppleDouble 51 | .LSOverride 52 | .AppleDB 53 | .AppleDesktop 54 | Network Trash Folder 55 | Temporary Items 56 | .apdisk 57 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Yizack Rangel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/runtime/composables/musicfyplayer.ts: -------------------------------------------------------------------------------- 1 | import { getSource } from '../utils/sources' 2 | import type { Providers } from '../types/providers' 3 | import type { MusicfyPlayerConfig, MusicfyPlayerComposableConfig } from './../types/musicfyplayer' 4 | import { ref } from '#imports' 5 | 6 | /** 7 | * Musicfy Player composable 8 | * @param config - Musicfy Player composable configuration 9 | * @returns Musicfy Player configuration 10 | */ 11 | export const useMusicfyPlayer = (config: MusicfyPlayerComposableConfig): MusicfyPlayerConfig => { 12 | const audioSrc = ref() 13 | const provider = config.audio.provider || 'local' 14 | 15 | audioSrc.value = getSource(provider, config.audio) 16 | 17 | if (!audioSrc.value) throw new Error('Invalid audio source') 18 | 19 | return { 20 | imageSrc: config.image.src, 21 | imageAlt: config.image.alt || 'Musicfy Player', 22 | audioType: config.audio.type || 'audio/mpeg', 23 | audioSrc: audioSrc.value, 24 | audioPreload: config.audio.preload || 'auto', 25 | colorClass: config.color?.class || 'musicfyplayer-color', 26 | colorDetect: config.color?.detect || false, 27 | } 28 | } 29 | 30 | export const defineMusicfyPlayer = useMusicfyPlayer 31 | -------------------------------------------------------------------------------- /src/runtime/types/musicfyplayer.d.ts: -------------------------------------------------------------------------------- 1 | import type { Providers } from './providers' 2 | 3 | export interface MusicfyPlayerComposableConfig { 4 | /** 5 | * Image configuration 6 | */ 7 | image: { 8 | src: string 9 | /** 10 | * Image alt text 11 | * @default 'Musicfy Player' 12 | */ 13 | alt?: string 14 | } 15 | /** 16 | * Audio configuration 17 | */ 18 | audio: { 19 | /** 20 | * Audio provider 21 | * @default 'local' 22 | */ 23 | provider?: T 24 | /** 25 | * Audio type 26 | * @default 'audio/mpeg' 27 | */ 28 | type?: string 29 | /** 30 | * Specifies if and how the audio file should be loaded when the page loads 31 | * @default 'auto' 32 | */ 33 | preload?: 'auto' | 'metadata' | 'none' 34 | } & Providers[T] 35 | /** 36 | * Color configuration 37 | */ 38 | color?: { 39 | /** 40 | * Set if the color should be detected from the image 41 | * @default false 42 | */ 43 | detect?: boolean 44 | /** 45 | * Custom class to apply to the player 46 | * @default 'musicfyplayer-color' 47 | */ 48 | class?: string 49 | } 50 | } 51 | 52 | export interface MusicfyPlayerConfig { 53 | imageSrc: string 54 | imageAlt: string 55 | audioType: string 56 | audioSrc: string 57 | audioPreload: MusicfyPlayerComposableConfig['audio']['preload'] 58 | colorClass: string 59 | colorDetect: boolean 60 | } 61 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | 11 | # https://github.com/vitejs/vite/blob/main/.github/workflows/ci.yml 12 | env: 13 | # 7 GiB by default on GitHub, setting to 6 GiB 14 | # https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources 15 | NODE_OPTIONS: --max-old-space-size=6144 16 | 17 | 18 | # Remove default permissions of GITHUB_TOKEN for security 19 | # https://docs.github.com/en/actions/using-jobs/assigning-permissions-to-jobs 20 | permissions: {} 21 | 22 | concurrency: 23 | group: ${{ github.workflow }}-${{ github.event.number || github.sha }} 24 | cancel-in-progress: ${{ github.event_name != 'push' }} 25 | 26 | jobs: 27 | lint: 28 | # autofix workflow will be triggered instead for PRs 29 | if: github.event_name == 'push' 30 | runs-on: ubuntu-latest 31 | 32 | steps: 33 | - uses: actions/checkout@v6 34 | - run: corepack enable 35 | - uses: actions/setup-node@v6 36 | with: 37 | node-version: lts/* 38 | cache: pnpm 39 | 40 | - name: 📦 Install dependencies 41 | run: pnpm install 42 | 43 | - name: 🔎 Lint 44 | run: pnpm lint 45 | 46 | test: 47 | runs-on: ubuntu-latest 48 | 49 | steps: 50 | - uses: actions/checkout@v6 51 | - run: corepack enable 52 | - uses: actions/setup-node@v6 53 | with: 54 | node-version: lts/* 55 | cache: pnpm 56 | 57 | - name: 📦 Install dependencies 58 | run: pnpm install 59 | 60 | - name: 🚧 Prepare module environment 61 | run: pnpm dev:prepare 62 | 63 | # - name: 🧪 Run test suite 64 | # run: pnpm test 65 | 66 | - name: 🧪 Test types 67 | run: pnpm test:types 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-musicfyplayer", 3 | "version": "2.1.10", 4 | "description": "Embed a simple and beautiful HTML music player from local or hosted audio on your website using MediaElement.js and fast-average-color", 5 | "keywords": [ 6 | "nuxt", 7 | "nuxt3", 8 | "music-player", 9 | "music" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/Yizack/nuxt-musicfyplayer.git" 14 | }, 15 | "homepage": "https://github.com/Yizack/nuxt-musicfyplayer", 16 | "author": { 17 | "name": "Yizack Rangel", 18 | "email": "yizackr@gmail.com", 19 | "url": "https://yizack.com" 20 | }, 21 | "license": "MIT", 22 | "type": "module", 23 | "exports": { 24 | ".": { 25 | "types": "./dist/types.d.mts", 26 | "import": "./dist/module.mjs" 27 | } 28 | }, 29 | "main": "./dist/module.mjs", 30 | "files": [ 31 | "dist" 32 | ], 33 | "scripts": { 34 | "build": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt-module-build build", 35 | "prepack": "pnpm build", 36 | "dev": "nuxt dev playground", 37 | "dev:build": "nuxt build playground", 38 | "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground", 39 | "release": "pnpm lint && pnpm build && pnpm test && changelogen --release && git push --follow-tags", 40 | "lint": "eslint .", 41 | "lint:fix": "eslint . --fix", 42 | "test": "echo \"Error: no test specified\"", 43 | "test:types": "vue-tsc --noEmit && cd playground && vue-tsc -b --noEmit", 44 | "test:watch": "vitest watch" 45 | }, 46 | "dependencies": { 47 | "@nuxt/kit": "^4.2.2", 48 | "fast-average-color": "^9.5.0", 49 | "mediaelement": "^7.1.0" 50 | }, 51 | "devDependencies": { 52 | "@nuxt/devtools": "^3.1.1", 53 | "@nuxt/eslint-config": "^1.12.1", 54 | "@nuxt/module-builder": "^1.0.2", 55 | "@nuxt/schema": "^4.2.2", 56 | "@nuxt/test-utils": "^3.21.0", 57 | "@types/node": "^25.0.0", 58 | "changelogen": "^0.6.2", 59 | "eslint": "^9.39.1", 60 | "nuxt": "^4.2.2", 61 | "vitest": "^4.0.15", 62 | "vue-tsc": "^3.1.8" 63 | }, 64 | "packageManager": "pnpm@10.25.0" 65 | } 66 | -------------------------------------------------------------------------------- /src/runtime/components/MusicfyPlayer.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 73 | 74 | 77 | -------------------------------------------------------------------------------- /src/runtime/assets/css/musicfyplayer.css: -------------------------------------------------------------------------------- 1 | @import 'mediaelement/build/mediaelementplayer.min.css'; 2 | 3 | /* mediaelementplayer overrides */ 4 | 5 | .mejs__container, .mejs__controls:not([style*="display: none"]) { 6 | background: transparent; 7 | } 8 | 9 | .mejs__container { 10 | width: 100%!important; 11 | min-width: 100%!important; 12 | } 13 | 14 | .mejs__container:focus { 15 | outline-width: 0; 16 | } 17 | 18 | .mejs__controls { 19 | display: flex; 20 | flex-direction: column; 21 | padding: 0; 22 | } 23 | 24 | .mejs__button { 25 | width: 100%; 26 | } 27 | 28 | .mejs__button>button { 29 | overflow: visible; 30 | } 31 | 32 | .mejs__button, .mejs__time, .mejs__time-rail { 33 | height: 0; 34 | } 35 | 36 | .mejs__time-rail { 37 | padding: 0; 38 | width: 100%; 39 | margin: 0; 40 | } 41 | 42 | .mejs__time { 43 | height: 2rem; 44 | padding: 0; 45 | display: flex; 46 | justify-content: space-between; 47 | } 48 | 49 | .mejs__play button, .mejs__pause button, .mejs__replay button { 50 | margin: 0; 51 | top: -0.5rem; 52 | } 53 | 54 | .mejs__currenttime, .mejs__duration { 55 | align-self: flex-end; 56 | } 57 | 58 | .mejs__play button::before { 59 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff' viewBox='4 3.5 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/%3E%3C/svg%3E"); 60 | } 61 | 62 | .mejs__pause button::before { 63 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff' viewBox='4 3.5 16 16'%3E%3Cpath d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3C/svg%3E"); 64 | } 65 | 66 | .mejs__replay button::before { 67 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23fff' viewBox='30 20 512 512'%3E%3Cpath d='M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32h128c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2l-17.6-17.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0z'/%3E%3C/svg%3E"); 68 | } 69 | 70 | .mejs__volume-button button { 71 | margin: 0; 72 | top: -3.05rem; 73 | right: 3.5rem; 74 | } 75 | 76 | .mejs__volume-button.mejs__mute button::before { 77 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff' viewBox='1 1.5 13 13'%3E%3Cpath d='M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z'/%3E%3Cpath d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z'/%3E%3Cpath d='M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z'/%3E%3C/svg%3E"); 78 | } 79 | 80 | .mejs__volume-button.mejs__unmute button::before { 81 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff' viewBox='1 1.5 13 13'%3E%3Cpath d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E"); 82 | } 83 | 84 | .mejs__horizontal-volume-slider { 85 | width: 100%; 86 | height: 0; 87 | } 88 | 89 | .mejs__horizontal-volume-total { 90 | background: rgb(255 255 255 / 30%); 91 | top: -2.75rem; 92 | right: 0; 93 | left: unset; 94 | cursor: pointer; 95 | } 96 | 97 | .mejs__pause svg.mejs__icon-pause, .mejs__play svg.mejs__icon-play, .mejs__replay svg.mejs__icon-replay { 98 | display: none; 99 | } 100 | 101 | /* musicfyplayer player styles */ 102 | 103 | .musicfyplayer { 104 | overflow: hidden; 105 | text-align: center; 106 | border-radius: .5rem; 107 | } 108 | 109 | @media (width <= 385px) { 110 | .musicfyplayer { 111 | height: unset!important; 112 | } 113 | } 114 | 115 | .musicfyplayer.musicfyplayer-color { 116 | background-color: #020420; 117 | } 118 | 119 | .musicfyplayer .mp__box { 120 | position: relative; 121 | height: 100%; 122 | display: flex; 123 | flex-direction: column; 124 | background: linear-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 80%)); 125 | } 126 | 127 | .musicfyplayer .mp__controls { 128 | color: #fff; 129 | padding: 1.5rem 1rem; 130 | } 131 | 132 | .musicfyplayer .mp__music { 133 | width: 100%; 134 | } 135 | 136 | .musicfyplayer .mp__cover { 137 | overflow-y: hidden; 138 | flex: 1 1 0%; 139 | height: 100%; 140 | background-color: rgb(0 0 0 / 40%); 141 | } 142 | 143 | .musicfyplayer .mp__box-1 { 144 | overflow-y: hidden; 145 | height: 100%; 146 | } 147 | 148 | .musicfyplayer .mp__box-2 { 149 | box-sizing: border-box; 150 | position: relative; 151 | height: 100%; 152 | width: 100%; 153 | padding: 0.5rem; 154 | } 155 | 156 | .musicfyplayer .mp__box-3 { 157 | min-width: 80px; 158 | position: relative; 159 | height: 100%; 160 | width: 100%; 161 | } 162 | 163 | .musicfyplayer .mp__image { 164 | background-repeat: no-repeat; 165 | background-size: contain; 166 | background-position: center top; 167 | position: relative; 168 | max-height: 100%; 169 | max-width: 100%; 170 | display: inline; 171 | } 172 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![musicfyplayer](https://github.com/Yizack/nuxt-musicfyplayer/assets/16264115/d1603014-8331-4327-9b65-4ff580c3624d) 2 | 3 | # nuxt-musicfyplayer 4 | 5 | [![npm version][npm-version-src]][npm-version-href] 6 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 7 | [![License][license-src]][license-href] 8 | [![Nuxt][nuxt-src]][nuxt-href] 9 | 10 | Embed a simple HTML music player from local or hosted audio on your Nuxt app using MediaElement.js and fast-average-color 11 | 12 | - [✨ Release Notes](https://github.com/Yizack/nuxt-musicfyplayer/blob/main/CHANGELOG.md) 13 | - [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-musicfyplayer?file=playground%2Fapp.vue) 14 | 15 | ## Quick Setup 16 | 17 | 1. Add `nuxt-musicfyplayer` dependency to your project 18 | 19 | ```bash 20 | # Using pnpm 21 | pnpm add -D nuxt-musicfyplayer 22 | 23 | # Using yarn 24 | yarn add --dev nuxt-musicfyplayer 25 | 26 | # Using npm 27 | npm install --save-dev nuxt-musicfyplayer 28 | ``` 29 | 30 | 2. Add `nuxt-musicfyplayer` to the `modules` section of `nuxt.config.ts` 31 | 32 | ```js 33 | export default defineNuxtConfig({ 34 | modules: [ 35 | 'nuxt-musicfyplayer' 36 | ] 37 | }) 38 | ``` 39 | 40 | That's it! You can now use `nuxt-musicfyplayer` in your Nuxt app ✨ 41 | 42 | ## Usage 43 | 44 | In the project, use the component ``, where `config` is the configuration options of the player. 45 | 46 | ### Component properties 47 | 48 | ## Size properties 49 | 50 | | Property | Description | Default value | 51 | |---------------------------------------|--------------------------|---------------| 52 | | [`config`](#musicfyplayer-composable) | MusicfyPlayer composable | | 53 | | `width` | Music player width | `100%` | 54 | | `height` | Music player height | `450px` | 55 | 56 | ## MusicfyPlayer composable 57 | 58 | Define your configuration options with the `useMusicfyPlayer` composable. 59 | 60 | | Property | Description | 61 | |-------------------------------------|---------------------------------------| 62 | | [`audio`](#audio-shared-properties) | The audio source properties | 63 | | [`image`](#image-properties) | The image source (preferably squared) | 64 | | [`color`](#color-properties) | Color options | 65 | 66 | ## Audio shared properties 67 | 68 | | Property | Description | Default value | 69 | |------------|----------------------------------|---------------| 70 | | `provider` | Provider of the audio source. | `local` | 71 | | `type` | Content-type fo the audio source | `audio/mpeg` | 72 | | `preload` | Preload the audio source | `auto` | 73 | | [`...`](#supported-audio-providers) | Selected audio provider properties || 74 | 75 | ### Supported audio providers 76 | 77 | | Provider | Value | 78 | |--------------------------------------|----------| 79 | | [URL](#local-audio-properties) | `local` | 80 | | [Dropbox](#dropbox-audio-properties) | `dropbox`| 81 | 82 | ### Local audio properties 83 | 84 | | Audio property | Description | Required | 85 | |----------------|---------------------------|----------| 86 | | `src` | Audio source link | Yes | 87 | 88 | ### Dropbox audio properties 89 | 90 | | Audio property | Description | Required | 91 | |----------------|---------------------------|----------| 92 | | `id` | File identifier | Yes | 93 | | `rlkey` | New file identifier param | No | 94 | 95 | ## Image properties 96 | 97 | | Property | Description | Required | 98 | |----------|------------------------|----------| 99 | | `src` | Image source link | Yes | 100 | | `alt` | Image alternative text | No | 101 | 102 | ## Color properties 103 | 104 | | Property | Description | Default value | 105 | |----------|---------------------------------------------------------------------------------------------|-----------------------| 106 | | `class` | A custom class for your player's background color | `musicfyplayer-color` | 107 | | `detect` | Detect the dominant color from the image source and use it as the player's background color | `false` | 108 | 109 | ## Example 110 | 111 | Use the `useMusicfyPlayer` composable to define the configuration options of the player. 112 | 113 | ```html 114 | 131 | 132 | 135 | ``` 136 | 137 | ### More examples 138 | 139 | Example of use on a website: [Dimatis Website](https://dimatis.yizack.com) 140 | 141 | [![Live Demo](https://yizack.com/images/embeddable-music-player/embeddeds.jpg)](https://dimatis.yizack.com) 142 | 143 | [![Live Demo](https://yizack.com/images/embeddable-music-player/embeddeds2.jpg)](https://dimatis.yizack.com/music/fly-again) 144 | 145 | Check out the [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-musicfyplayer?file=playground%2Fapp.vue) for more examples. 146 | 147 | ## Credits 148 | 149 | - Built based on [embeddable-music-player](https://github.com/Yizack/embeddable-music-player) 150 | - Detect average color with [fast-average-color](https://github.com/fast-average-color/fast-average-color) 151 | - Music player controls by [MediaElement.js](https://www.mediaelementjs.com/) 152 | - [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) 153 | 154 | ## Development 155 | 156 | ```bash 157 | # Install dependencies 158 | npm install 159 | 160 | # Generate type stubs 161 | npm run dev:prepare 162 | 163 | # Develop with the playground 164 | npm run dev 165 | 166 | # Build the playground 167 | npm run dev:build 168 | 169 | # Run ESLint 170 | npm run lint 171 | 172 | # Run Vitest 173 | npm run test 174 | npm run test:watch 175 | 176 | # Release new version 177 | npm run release 178 | ``` 179 | 180 | 181 | [npm-version-src]: https://img.shields.io/npm/v/nuxt-musicfyplayer/latest.svg?style=flat&colorA=020420&colorB=00DC82 182 | [npm-version-href]: https://npmjs.com/package/nuxt-musicfyplayer 183 | 184 | [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-musicfyplayer.svg?style=flat&colorA=020420&colorB=00DC82 185 | [npm-downloads-href]: https://npmjs.com/package/nuxt-musicfyplayer 186 | 187 | [license-src]: https://img.shields.io/npm/l/nuxt-musicfyplayer.svg?style=flat&colorA=020420&colorB=00DC82 188 | [license-href]: LICENSE 189 | 190 | [tests-src]: https://img.shields.io/github/actions/workflow/status/Yizack/nuxt-musicfyplayer/tests.yml?style=flat&colorA=020420&colorB=00DC82&label=tests 191 | [tests-href]: https://github.com/Yizack/nuxt-musicfyplayer/actions/workflows/tests.yml 192 | 193 | [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js 194 | [nuxt-href]: https://nuxt.com 195 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | 4 | ## v2.1.10 5 | 6 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.9...v2.1.10) 7 | 8 | ### 🏡 Chore 9 | 10 | - Update all deps ([f74ec67](https://github.com/Yizack/nuxt-musicfyplayer/commit/f74ec67)) 11 | - Add local playground image ([3b511b9](https://github.com/Yizack/nuxt-musicfyplayer/commit/3b511b9)) 12 | 13 | ### ❤️ Contributors 14 | 15 | - Yizack Rangel ([@Yizack](https://github.com/Yizack)) 16 | 17 | ## v2.1.9 18 | 19 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.8...v2.1.9) 20 | 21 | ### 🤖 CI 22 | 23 | - Use npm trusted publishing ([f51fa4c](https://github.com/Yizack/nuxt-musicfyplayer/commit/f51fa4c)) 24 | 25 | ### ❤️ Contributors 26 | 27 | - Yizack Rangel ([@Yizack](https://github.com/Yizack)) 28 | 29 | ## v2.1.8 30 | 31 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.7...v2.1.8) 32 | 33 | ### 🏡 Chore 34 | 35 | - Move pnpm `.npmrc` settings to `pnpm-workspace.yaml` ([df197be](https://github.com/Yizack/nuxt-musicfyplayer/commit/df197be)) 36 | - Update to nuxt v4 ([cd293a1](https://github.com/Yizack/nuxt-musicfyplayer/commit/cd293a1)) 37 | 38 | ### 🤖 CI 39 | 40 | - Update autofix-ci ([345b7ce](https://github.com/Yizack/nuxt-musicfyplayer/commit/345b7ce)) 41 | 42 | ### ❤️ Contributors 43 | 44 | - Yizack Rangel ([@Yizack](https://github.com/Yizack)) 45 | 46 | ## v2.1.7 47 | 48 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.6...v2.1.7) 49 | 50 | ### 🩹 Fixes 51 | 52 | - Remove mejs container outline on focus ([58edffa](https://github.com/Yizack/nuxt-musicfyplayer/commit/58edffa)) 53 | 54 | ### 🏡 Chore 55 | 56 | - Update dependencies ([be5dd51](https://github.com/Yizack/nuxt-musicfyplayer/commit/be5dd51)) 57 | 58 | ### 🤖 CI 59 | 60 | - Use corepack instead of pnpm action ([9ff4490](https://github.com/Yizack/nuxt-musicfyplayer/commit/9ff4490)) 61 | 62 | ### ❤️ Contributors 63 | 64 | - Yizack Rangel ([@Yizack](https://github.com/Yizack)) 65 | 66 | ## v2.1.6 67 | 68 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.5...v2.1.6) 69 | 70 | ### 💅 Refactors 71 | 72 | - Use `getColorAsync` from `fast-average-color` ([22f20d5](https://github.com/Yizack/nuxt-musicfyplayer/commit/22f20d5)) 73 | 74 | ### 📖 Documentation 75 | 76 | - Mention `embeddable-music-player` ([2e332d3](https://github.com/Yizack/nuxt-musicfyplayer/commit/2e332d3)) 77 | 78 | ### 🏡 Chore 79 | 80 | - Import minifed mediaelement ([3d9c6c2](https://github.com/Yizack/nuxt-musicfyplayer/commit/3d9c6c2)) 81 | 82 | ### ❤️ Contributors 83 | 84 | - Yizack Rangel ([@Yizack](https://github.com/Yizack)) 85 | 86 | ## v2.1.5 87 | 88 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.4...v2.1.5) 89 | 90 | ### 💅 Refactors 91 | 92 | - Use average color util for component ([4372387](https://github.com/Yizack/nuxt-musicfyplayer/commit/4372387)) 93 | 94 | ### ❤️ Contributors 95 | 96 | - Yizack Rangel ([@Yizack](https://github.com/Yizack)) 97 | 98 | ## v2.1.4 99 | 100 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.3...v2.1.4) 101 | 102 | ### 💅 Refactors 103 | 104 | - Drop `colorthief` in favor of `fast-average-color` ([fc85127](https://github.com/Yizack/nuxt-musicfyplayer/commit/fc85127)) 105 | 106 | ### ❤️ Contributors 107 | 108 | - Yizack Rangel ([@Yizack](https://github.com/Yizack)) 109 | 110 | ## v2.1.3 111 | 112 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.2...v2.1.3) 113 | 114 | ### 🩹 Fixes 115 | 116 | - **types:** Add default local provider option ([b243448](https://github.com/Yizack/nuxt-musicfyplayer/commit/b243448)) 117 | 118 | ### 📖 Documentation 119 | 120 | - Fix example image ([daa76b4](https://github.com/Yizack/nuxt-musicfyplayer/commit/daa76b4)) 121 | - Fix typo ([3b9b409](https://github.com/Yizack/nuxt-musicfyplayer/commit/3b9b409)) 122 | 123 | ### 📦 Build 124 | 125 | - Update module-builder and drop cjs support ([c2dd078](https://github.com/Yizack/nuxt-musicfyplayer/commit/c2dd078)) 126 | 127 | ### ❤️ Contributors 128 | 129 | - Yizack Rangel ([@Yizack](https://github.com/Yizack)) 130 | 131 | ## v2.1.2 132 | 133 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.1...v2.1.2) 134 | 135 | ### 💅 Refactors 136 | 137 | - Rename `useMusicfyPlayer` composable + backwards compatibility ([3967e14](https://github.com/Yizack/nuxt-musicfyplayer/commit/3967e14)) 138 | 139 | ### 🏡 Chore 140 | 141 | - **playground:** Fix image src ([786f89a](https://github.com/Yizack/nuxt-musicfyplayer/commit/786f89a)) 142 | 143 | ### ❤️ Contributors 144 | 145 | - Yizack Rangel ([@Yizack](http://github.com/Yizack)) 146 | 147 | ## v2.1.1 148 | 149 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.1.0...v2.1.1) 150 | 151 | ### 🩹 Fixes 152 | 153 | - Lock colorthief dependency to 2.4.0 ([7349f6c](https://github.com/Yizack/nuxt-musicfyplayer/commit/7349f6c)) 154 | 155 | ### 🏡 Chore 156 | 157 | - Update dependencies ([8a96447](https://github.com/Yizack/nuxt-musicfyplayer/commit/8a96447)) 158 | 159 | ### ❤️ Contributors 160 | 161 | - Yizack Rangel ([@Yizack](http://github.com/Yizack)) 162 | 163 | ## v2.1.0 164 | 165 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.0.3...v2.1.0) 166 | 167 | ### 🚀 Enhancements 168 | 169 | - Add `preload` property ([0894b21](https://github.com/Yizack/nuxt-musicfyplayer/commit/0894b21)) 170 | 171 | ### 🩹 Fixes 172 | 173 | - **types:** Regenerate lock ([8621eaa](https://github.com/Yizack/nuxt-musicfyplayer/commit/8621eaa)) 174 | 175 | ### 🏡 Chore 176 | 177 | - Updates ([fbe1ea3](https://github.com/Yizack/nuxt-musicfyplayer/commit/fbe1ea3)) 178 | - Update dependencies ([c0a5884](https://github.com/Yizack/nuxt-musicfyplayer/commit/c0a5884)) 179 | 180 | ### ❤️ Contributors 181 | 182 | - Yizack Rangel 183 | 184 | ## v2.0.3 185 | 186 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.0.2...v2.0.3) 187 | 188 | ### 🩹 Fixes 189 | 190 | - Display cover inline in case style was set ([b50f919](https://github.com/Yizack/nuxt-musicfyplayer/commit/b50f919)) 191 | 192 | ### 💅 Refactors 193 | 194 | - Rename css classes to avoid conflicts ([6894f38](https://github.com/Yizack/nuxt-musicfyplayer/commit/6894f38)) 195 | 196 | ### 🏡 Chore 197 | 198 | - Remove unnecessary important ([2ef3f94](https://github.com/Yizack/nuxt-musicfyplayer/commit/2ef3f94)) 199 | 200 | ### ❤️ Contributors 201 | 202 | - Yizack Rangel ([@Yizack](http://github.com/Yizack)) 203 | 204 | ## v2.0.2 205 | 206 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.0.1...v2.0.2) 207 | 208 | ### 🩹 Fixes 209 | 210 | - Add missing replay icon when audio ends ([#2](https://github.com/Yizack/nuxt-musicfyplayer/pull/2)) 211 | 212 | ### 🏡 Chore 213 | 214 | - Fix npm repo ([409a72e](https://github.com/Yizack/nuxt-musicfyplayer/commit/409a72e)) 215 | - Adjust pause and play buttons ([ec5a580](https://github.com/Yizack/nuxt-musicfyplayer/commit/ec5a580)) 216 | - Update nuxt eslint ([c0b34cc](https://github.com/Yizack/nuxt-musicfyplayer/commit/c0b34cc)) 217 | 218 | ### ❤️ Contributors 219 | 220 | - Yizack Rangel ([@Yizack](http://github.com/Yizack)) 221 | 222 | ## v2.0.1 223 | 224 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v2.0.0...v2.0.1) 225 | 226 | ### 🩹 Fixes 227 | 228 | - **types:** Add colorthief module augmentation ([c3356b1](https://github.com/Yizack/nuxt-musicfyplayer/commit/c3356b1)) 229 | 230 | ### 📖 Documentation 231 | 232 | - Add component props jsdoc ([3dba974](https://github.com/Yizack/nuxt-musicfyplayer/commit/3dba974)) 233 | 234 | ### 🏡 Chore 235 | 236 | - Add ci ([40baafd](https://github.com/Yizack/nuxt-musicfyplayer/commit/40baafd)) 237 | - Update lock ([0cd317b](https://github.com/Yizack/nuxt-musicfyplayer/commit/0cd317b)) 238 | - Updates ([9a8b3e9](https://github.com/Yizack/nuxt-musicfyplayer/commit/9a8b3e9)) 239 | 240 | ### ❤️ Contributors 241 | 242 | - Yizack Rangel 243 | 244 | ## v2.0.0 245 | 246 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v1.0.1...v2.0.0) 247 | 248 | ### 💅 Refactors 249 | 250 | - ⚠️ `height` and `width` as component props ([02042c6](https://github.com/Yizack/nuxt-musicfyplayer/commit/02042c6)) 251 | 252 | ### 📖 Documentation 253 | 254 | - Update info ([2137a89](https://github.com/Yizack/nuxt-musicfyplayer/commit/2137a89)) 255 | 256 | ### 🏡 Chore 257 | 258 | - Update dependencies ([aff6e48](https://github.com/Yizack/nuxt-musicfyplayer/commit/aff6e48)) 259 | - Throw errors and use import meta ([3e2fce8](https://github.com/Yizack/nuxt-musicfyplayer/commit/3e2fce8)) 260 | - Indicate compatibility with new v4 major ([37964fb](https://github.com/Yizack/nuxt-musicfyplayer/commit/37964fb)) 261 | - Updates ([c82501c](https://github.com/Yizack/nuxt-musicfyplayer/commit/c82501c)) 262 | - Lint ([0a72967](https://github.com/Yizack/nuxt-musicfyplayer/commit/0a72967)) 263 | - Code improve ([34a261c](https://github.com/Yizack/nuxt-musicfyplayer/commit/34a261c)) 264 | - Add compatibility date ([2adc95c](https://github.com/Yizack/nuxt-musicfyplayer/commit/2adc95c)) 265 | 266 | #### ⚠️ Breaking Changes 267 | 268 | - ⚠️ `height` and `width` as component props ([02042c6](https://github.com/Yizack/nuxt-musicfyplayer/commit/02042c6)) 269 | 270 | ### ❤️ Contributors 271 | 272 | - Yizack Rangel ([@Yizack](http://github.com/Yizack)) 273 | 274 | ## v1.0.1 275 | 276 | [compare changes](https://github.com/Yizack/nuxt-musicfyplayer/compare/v1.0.0...v1.0.1) 277 | 278 | ### 🩹 Fixes 279 | 280 | - Playground dev ([40867e0](https://github.com/Yizack/nuxt-musicfyplayer/commit/40867e0)) 281 | 282 | ### 🏡 Chore 283 | 284 | - Adjust default config ([a9560f6](https://github.com/Yizack/nuxt-musicfyplayer/commit/a9560f6)) 285 | - Improve readme ([61d9acb](https://github.com/Yizack/nuxt-musicfyplayer/commit/61d9acb)) 286 | - Providers list table ([03d41d3](https://github.com/Yizack/nuxt-musicfyplayer/commit/03d41d3)) 287 | - Add banner ([acfc07a](https://github.com/Yizack/nuxt-musicfyplayer/commit/acfc07a)) 288 | - Recolor banner ([d97bb0b](https://github.com/Yizack/nuxt-musicfyplayer/commit/d97bb0b)) 289 | - Add more examples ([259e6a4](https://github.com/Yizack/nuxt-musicfyplayer/commit/259e6a4)) 290 | 291 | ### ❤️ Contributors 292 | 293 | - Yizack Rangel ([@Yizack](http://github.com/Yizack)) 294 | 295 | ## v1.0.0 296 | 297 | 298 | ### 🚀 Enhancements 299 | 300 | - Initial release files ([f575958](https://github.com/Yizack/nuxt-musicfyplayer/commit/f575958)) 301 | 302 | ### ❤️ Contributors 303 | 304 | - Yizack Rangel ([@Yizack](http://github.com/Yizack)) 305 | 306 | --------------------------------------------------------------------------------