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.