https://github.com/jerosoler/wave-audio-path-player

🌊 Simple audio player webcomponent customizable with waveform
https://github.com/jerosoler/wave-audio-path-player

audio-player audio-visualizer music path svg waveform webaudio webcomponent

Last synced: 26 days ago
JSON representation

🌊 Simple audio player webcomponent customizable with waveform

• Host: GitHub
• URL: https://github.com/jerosoler/wave-audio-path-player
• Owner: jerosoler
• License: mit
• Created: 2022-03-02T15:34:24.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-03-02T16:08:48.000Z (over 2 years ago)
• Last Synced: 2024-10-01T02:42:00.536Z (about 1 month ago)
• Topics: audio-player, audio-visualizer, music, path, svg, waveform, webaudio, webcomponent
• Language: JavaScript
• Homepage: https://jerosoler.github.io/wave-audio-path-player/
• Size: 32.2 KB
• Stars: 45
• Watchers: 4
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-webaudio - wave-audio-path-player - Simple audio player webcomponent customizable with waveform. (Packages / Libraries)

README

        
[![npm](https://img.shields.io/npm/v/wave-audio-path-player?color=green)](https://www.npmjs.com/package/wave-audio-path-player)

![npm](https://img.shields.io/npm/dy/wave-audio-path-player)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/wave-audio-path-player)

[![GitHub license](https://img.shields.io/github/license/jerosoler/wave-audio-path-player)](https://github.com/jerosoler/wave-audio-path-player/blob/master/LICENSE)

[![Twitter URL](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2Fjerosoler)](https://twitter.com/jerosoler)

# wave-audio-path-player

![Image demo](https://github.com/jerosoler/wave-audio-path-player/raw/master/docs/wave-audio-path-player.png)

Simple audio player webcomponent customizable with waveform.

Created with [waveform-path](https://jerosoler.github.io/waveform-path/).

[Live Demo](https://jerosoler.github.io/wave-audio-path-player/)

## Installation

```bash

npm i wave-audio-path-player

```

## Usage

### Import

```javascript

import 'wave-audio-path-player'

```

### Hosted

```html

```

### Using 

```html

```

### Custom CSS

```css

wave-audio-path-player {

  margin-top: 10px;

  margin-bottom: 10px;

}

#demo1::part(player) {

  background:rgb(0, 0, 0);

  padding: 15px 0px;

  border-radius: 20px;

  border:1px solid black;

}

#demo1::part(button) {

  stroke: white;

  fill:white;

}

#demo1::part(currenttime), #demo1::part(duration) {

  color:white;

  font-weight: bold;

}

#demo1::part(path1) {

  stroke: white;

}

#demo1::part(path2) {

  stroke:fuchsia;

}

```

### Attributes

Name | Required | Type | Description

--- | --- | --- | --- 

src | True | audio file | Source path to audio file

wave-width | True | px | Number of pixels

wave-height | True | px | Number of pixels

color | False | color | Color of elements

wave-color | False | color | Color of wave incomplete (Only for wave-option "animation":false)

wave-progess-color | False | color | Color of wave complete or animation

wave-slider | False | color | Color of slider thumb

wave-options | False | object | Object of waveform-path (width and height is replaced for wave-width and wave-height)