Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 25 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)