https://github.com/ebellempire/voicesplayer

A customizable audio player web component designed for the Cleveland Voices project.
https://github.com/ebellempire/voicesplayer

audio-player oral-history web-components

Last synced: 12 days ago
JSON representation

A customizable audio player web component designed for the Cleveland Voices project.

• Host: GitHub
• URL: https://github.com/ebellempire/voicesplayer
• Owner: ebellempire
• License: gpl-3.0
• Created: 2024-09-30T20:36:35.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-17T19:30:24.000Z (2 months ago)
• Last Synced: 2024-10-20T05:41:45.127Z (2 months ago)
• Topics: audio-player, oral-history, web-components
• Language: JavaScript
• Homepage: https://clevelandvoices.org
• Size: 39.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# About

A custom audio player web component with support for MediaSession API, custom artwork, skip ahead/back, seek, etc. Features expand and contract based on available space.

## Basic Usage

Include the script on your page and use the `` element as follows:

```

```

## External scripting

Control external playback using the `voicesPlayerSeconds` event.

```

let seconds = 0; // time in seconds

let event = new CustomEvent("voicesPlayerSeconds", { detail: seconds});

audio.dispatchEvent(event);

```

## Customization

Some configurations may be passed as option attributes:

```

```

Some CSS variables you can set in your own stylesheet:

```

--player-font-family

--player-font-size

--player-text-color

--player-text-shadow

--player-background-color

--player-background-image

--player-padding

--player-border-radius

--player-base-height

--player-artwork-size

--player-artwork-background

--player-button-size

--player-button-background

--player-button-background_hover

--player-button-text

--player-button-text-hover

--player-button-border-radius

--player-progress-background

--player-progress-color

--player-timestamp-color

--player-timestamp-background

```

If you need more customization than this allows, you should probably create a fork.

## Notes

- Currently supports only one audio track at a time.

- Currently only supports a single codec per track so MP3 is recommended.