# amad-player

> An audio & video player built with Vue.js

Latest version **1.0.13** (published 2025-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install amad-player
pnpm add amad-player
yarn add amad-player
bun add amad-player
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2025-01-19 |
| First published | 2024-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 62.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Amad Aslam |
| Maintainers | amadism |
| Keywords | vue, music, music player, mp3, audio, video, video player, audio player, media player, player, html5 audio, vue js, vuejs, component, sfc, vue component, vue sfc |

## Links

- npm: https://www.npmjs.com/package/amad-player
- Repository: https://github.com/amadism/amad-player
- Homepage: https://github.com/amadism/amad-player#readme
- Issues: https://github.com/amadism/amad-player/issues
- npm.io page: https://npm.io/package/amad-player

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.16

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.13 (latest) — 2025-01-19
- 1.0.12 — 2025-01-19
- 1.0.11 — 2025-01-05
- 1.0.10 — 2025-01-05
- 1.0.9 — 2025-01-05
- 1.0.8 — 2025-01-02
- 1.0.7 — 2024-12-28
- 1.0.6 — 2024-12-18
- 1.0.5 — 2024-12-18
- 1.0.4 — 2024-12-16
- 1.0.3 — 2024-12-16
- 1.0.2 — 2024-12-16
- 1.0.1 — 2024-12-15
- 1.0.0 — 2024-12-15

## README

# Amad Player

**Amad Player** is a customizable Vue.js component for creating audio and video players. It provides a simple and flexible player with basic controls such as play/pause, volume control, seek functionality, and full-screen mode for videos. This package is perfect for integrating audio and video players into your Vue.js applications.

## Demo  
Check out the live demo here: [Demo Link](https://amad-player.netlify.app/). 


## Installation

To install **Amad Player** via npm:

```bash
npm i amad-player
```

# Usage
Once installed, you can use the audio and video player components in your Vue.js app.

# Importing the Player Component

```
import { AmadAudio, AmadVideo } from 'amad-player';
```


Import the AmadPlayer styles from 'amad-player/style.css'. For example:


```
@import 'amad-player/style.css';
```

# Using Amad Audio

Add the AmadAudio component in your template

```
import { AmadAudio } from 'amad-player';
```

```
  <AmadAudio
    :file="audioFile"
  />
```

# Using Amad Video
Add the AmadVideo component in your template

```
import { AmadVideo } from 'amad-player';
```

```
  <AmadVideo
    :file="audioFile"
  />
```


### Configuration

# Props for Audio Player (AmadAudio)

| Prop           | Type    | Default | Description            |
|----------------|---------|---------|------------------------|
| file           | string  | null    | audio src (required)   |
| autoPlay       | boolean | false   | for autoplay audio     |
| skip           | boolean | true    | for skip buttons       |
| preload        | string  | metadata| preload                |
| loop           | boolean | false   | play audio in loop     |
| title          | string  | null    | the title of the audio |
| bgColor        | string  | #333    | background color       |
| textColor      | string  | #fff    | text color             |
| barColor       | string  | #d1d5db | bar color              |
| barSeekerColor | string  | null    | bar seeker color       |
| iconStyle      | string  | #333    | icons color            |
| spinnerColor   | string  | #fff    | loading spinner        |
| showLoading    | boolean | true    | display loading on load|


# Props for Video Player (AmadVideo)

| Prop           | Type    | Default | Description            |
|----------------|---------|---------|------------------------|
| file           | string  | null    | audio src (required)   |
| poster         | string  | null    | poster or thumbnail    |
| preload        | string  | metadata| preload                |
| autoPlay       | boolean | false   | for autoplay audio     |
| loop           | boolean | false   | play audio in loop     |
| title          | string  | null    | the title of the audio |
| skip           | boolean | true    | for skip buttons       |
| iconStyle      | string  | #333    | icons color            |

---
_Source: https://npm.io/package/amad-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._