# Music Player

> An interactive vinyl-record music player with swinging tonearm and animated rotation.

<demo-music-player>



</demo-music-player>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/music-player.json"
```

## Usage

```vue
<script setup lang="ts">
  import MusicPlayer from '~/components/ui/music-player/MusicPlayer.vue';
</script>

<template>
  <MusicPlayer
    src="https://www.youtube.com/watch?v=jfKfPfyJRdk"
    cover-art="https://images.unsplash.com/photo-1614149162883-504ce4d13909?w=400&q=80"
    :auto-play="false"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        src
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      required
    </td>
    
    <td>
      The source URL of the audio or YouTube video
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        coverArt
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      required
    </td>
    
    <td>
      The URL of the album cover image
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        autoPlay
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Whether to auto-play when loaded
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for styling
    </td>
  </tr>
</tbody>
</table>