Tailwind-player NPM

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';
//...
<TailwindPlayer
  src="https://youtu.be/dQw4w9WgXcQ?si=Id6V7AafrYLSmgNd"
  loop
  autoplay
/>

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.