A lightweight TailwindCSS React wrapper for the default audio element.
npm install --save tailwind-player
You should have the react and react-dom installed.
import TailwindPlayer from 'tailwind-player';
//...
<TailwindPlayer
src="https://youtu.be/dQw4w9WgXcQ?si=Id6V7AafrYLSmgNd"
loop
autoplay
/>
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.
| 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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent