https://github.com/alexjedi/tailwind-player

A lightweight TailwindCSS React wrapper for the default audio element
https://github.com/alexjedi/tailwind-player

audio-player react tailwind

Last synced: 3 months ago
JSON representation

A lightweight TailwindCSS React wrapper for the default audio element

• Host: GitHub
• URL: https://github.com/alexjedi/tailwind-player
• Owner: alexjedi
• Created: 2024-02-22T22:05:15.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-13T09:52:37.000Z (9 months ago)
• Last Synced: 2024-09-29T10:44:57.094Z (3 months ago)
• Topics: audio-player, react, tailwind
• Language: TypeScript
• Homepage:
• Size: 196 KB
• Stars: 13
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind Audio Player

A lightweight TailwindCSS React wrapper for the default audio element.

## Installation

    npm install --save tailwind-player

You should have the react and react-dom installed.

## Usage

    import TailwindPlayer from 'tailwind-player';

    //...

    

### Example

See the example directory for a basic working example of using this project. To run it locally, run `npm install` in the example directory and then `npm start`.

## Props

| Prop           | Type    | Default        |

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

| `autoPlay`     | Boolean | false          |

| `children`     | Element | null           |

| `className`    | String  | _empty string_ |

| `controls`     | Boolean | false          |

| `crossOrigin`  | String  | _empty string_ |

| `controlsList` | String  | _empty string_ |

| `id`           | String  | _empty string_ |

| `loop`         | Boolean | false          |

| `muted`        | Boolean | false          |

| `volume`       | Number  | 1.0            |

| `preload`      | String  | 'metadata'     |

| `src`          | String  | _empty string_ |

| `style`        | Object  | ---            |

| Prop | Type | Description |

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

| `preset` | Object | Additional properties for the preset |

| `preset.showSlider` | Boolean | Determines whether to show the slider. Default is true. |

| `preset.showFastForward` | Boolean | Determines whether to show the fast forward button. Default is true. |

| `preset.showPlaybackSpeed` | Boolean | Determines whether to show the playback speed control. Default is true. |

| `preset.showMute` | Boolean | Determines whether to show the mute button. Default is true. |

| `preset.showDownload` | Boolean | Determines whether to show the download button. Default is true. |

| `preset.showPlaylist` | Boolean | Determines whether to show the playlist button. Default is true. |

| Prop | Type | Description |

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

| `listenInterval` | Number | Indicates how often to call the `onListened` prop during playback, in milliseconds. Default is 10000. |

| `onAbort` | Function | called when unloading the audio player, like when switching to a different src file. Passed the event. |

| `onCanPlay` | Function | called when enough of the file has been downloaded to be able to start playing. Passed the event. |

| `onCanPlayThrough` | Function | called when enough of the file has been downloaded to play through the entire file. Passed the event. |

| `onEnded` | Function | called when playback has finished to the end of the file. Passed the event. |

| `onError` | Function | called when the audio tag encounters an error. Passed the event. |

| `onListen` | Function | called every `listenInterval` milliseconds during playback. Passed the event. |

| `onPause` | Function | called when the user pauses playback. Passed the event. |

| `onPlay` | Function | called when the user taps play. Passed the event. |

| `onSeeked` | Function | called when the user drags the time indicator to a new time. Passed the event. |

| `onVolumeChanged` | Function | called when the user changes the volume, such as by dragging the volume slider |

| `onLoadedMetadata` | Function | called when the metadata for the given audio file has finished downloading. Passed the event. |