Skip to content

Commit 8488a45

Browse files
samhirtarifsamhirtarif
committed
Add docs. Ready for publish.
1 parent 7cdb24a commit 8488a45

File tree

8 files changed

+214
-69
lines changed

8 files changed

+214
-69
lines changed

‎README.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# **react-audio-player-component**
2+
A audio player for React with a modern look and convenient usage
3+
4+
## Installation
5+
```sh
6+
npm install react-audio-player-component
7+
```
8+
9+
## **AudioPlayer** Component ([Example](https://stackblitz.com/edit/stackblitz-starters-t5nci5?file=src%2FApp.tsx))
10+
11+
![screenshot](./assets/AudioPlayer.png)
12+
<br /><br />
13+
![screenshot](./assets/AudioPlayerMinimal.png)
14+
<br />
15+
*Minimal Audio player*
16+
17+
```js
18+
import React, { useState } from 'react';
19+
import { AudioPlayer } from 'react-audio-player-component';
20+
21+
const Player = () => {
22+
return (
23+
<AudioPlayer
24+
src="audios/test.mp3"
25+
minimal={false}
26+
width={350}
27+
trackHeight={75}
28+
barWidth={1}
29+
gap={1}
30+
31+
visualise={true}
32+
backgroundColor="#FFF8DE"
33+
barColor="#C1D0B5"
34+
barPlayedColor="#99A98F"
35+
36+
skipDuration={2}
37+
showLoopOption={true}
38+
showVolumeControl={true}
39+
40+
// seekBarColor="purple"
41+
// volumeControlColor="blue"
42+
// hideSeekBar={true}
43+
// hideTrackKnobWhenPlaying={true}
44+
/>
45+
)
46+
}
47+
48+
```
49+
50+
| Props | Description | Default | Optional |
51+
| :------------ |:--------------- |:--------------- | :--------------- |
52+
| **`src`** | Source for the audio file that needs to be played | N/A | No |
53+
| **`minimal`** | Displays a minimal version of the audio player, with only the play/pause button, track bar and timestamp | `false` | Yes |
54+
| **`width`** | Width of the audio player | N/A | No |
55+
| **`barWidth`** | Width of each individual bar in the visualization | `2` | Yes |
56+
| **`gap`** | Gap between each bar in the visualization | `1` | Yes |
57+
| **`visualise`** | Represents whether the audio visualization (waveform) should be displayed | `true` | Yes |
58+
| **`trackHeight`** | Height of the visualization / trackbar area | `75` | Yes |
59+
| **`backgroundColor`** | Background color for the audio player | `#EFEFEF` | Yes |
60+
| **`barColor`** | Color for the bars in the visualization. This only applies to bars that have not currently been played | `"rgb(184, 184, 184)""` | Yes |
61+
| **`barPlayedColor`** | Color for the bars that have been played | `"rgb(160, 198, 255)""` | Yes |
62+
| **`allowSkip`** | Represents whether the skip forward/backward options should be displayed | `true` | Yes |
63+
| **`skipDuration`** | The number of seconds to skip forward/backward | `5` | Yes |
64+
| **`initialVolume`** | Initial volume for the audio, minimum being `0`, maximum being `1` | `0.75` | Yes |
65+
| **`loop`** | Setting this to `true` will keep playing the audio in a loop | `false` | Yes |
66+
| **`showLoopOption`** | Represents whether to show the loop options | `true` | Yes |
67+
| **`showVolumeControl`** | Represents whether the volume control should be shown | `true` | Yes |
68+
| **`seekBarColor`** | Color for the audio seek bar | `rgba(140, 140, 140)` | Yes |
69+
| **`volumeControlColor`** | Color for the volumn control | `rgba(140, 140, 140)` | Yes |
70+
| **`hideSeekBar`** | Hides the seek bar if set to `true`, the audio will still be seekable | `false` | Yes |
71+
| **`hideSeekKnobWhenPlaying`** | Hides the seek knob when audio is playing if set to `true` | `false` | Yes |

‎assets/AudioPlayer.png‎

13 KB
Loading

‎assets/AudioPlayerMinimal.png‎

6.03 KB
Loading

‎package-lock.json‎

Lines changed: 15 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,32 @@
11
{
2-
"name": "react-audio-player",
3-
"private": true,
4-
"version": "0.0.0",
2+
"name": "react-audio-player-component",
3+
"private": false,
4+
"version": "1.0.0",
55
"license": "MIT",
66
"author": "",
77
"repository": {
88
"type": "git",
99
"url": "https://github.com/samhirtarif/"
1010
},
11-
"keywords": [],
11+
"keywords": [
12+
"audio",
13+
"voice",
14+
"player",
15+
"audio player",
16+
"audio playback",
17+
"voice player",
18+
"voice playback"
19+
],
1220
"files": [
13-
"dist",
14-
"README.md"
21+
"dist"
1522
],
16-
"main": "./dist/react-audio-player-js.umd.js",
17-
"module": "./dist/react-audio-player-js.es.js",
23+
"main": "./dist/react-audio-player-component.umd.js",
24+
"module": "./dist/react-audio-player-component.es.js",
1825
"types": "./dist/index.d.ts",
1926
"exports": {
2027
".": {
21-
"import": "./dist/react-audio-player-js.es.js",
22-
"require": "./dist/react-audio-player-js.umd.js"
28+
"import": "./dist/react-audio-player-component.es.js",
29+
"require": "./dist/react-audio-player-component.umd.js"
2330
}
2431
},
2532
"scripts": {
@@ -30,9 +37,7 @@
3037
"lint:fix": "npm run lint -- --fix"
3138
},
3239
"dependencies": {
33-
"react": "^18.2.0",
34-
"react-audio-visualize": "file:../react-audio-visualize/react-audio-visualize-0.0.0.tgz",
35-
"react-dom": "^18.2.0"
40+
"react-audio-visualize": "^1.0.0"
3641
},
3742
"devDependencies": {
3843
"@types/node": "^20.2.1",
@@ -50,8 +55,14 @@
5055
"eslint-plugin-react-refresh": "^0.3.4",
5156
"path": "^0.12.7",
5257
"prettier": "^2.8.8",
58+
"react": "^18.2.0",
59+
"react-dom": "^18.2.0",
5360
"typescript": "^5.0.2",
5461
"vite": "^4.3.2",
5562
"vite-plugin-dts": "^2.3.0"
63+
},
64+
"peerDependencies": {
65+
"react": ">=16.2.0",
66+
"react-dom": ">=16.2.0"
5667
}
5768
}

‎src/components/AudioPlayer.tsx‎

Lines changed: 67 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,88 @@ import repeatOneSVG from "../icons/repeat-one.svg";
1111
import Timer from "./Timer";
1212

1313
interface AudioPlayerProps {
14+
/**
15+
* Source for the audio file that needs to be played
16+
*/
1417
src: string;
18+
/**
19+
* Displays a minimal version of the audio player, with only the play/pause button, track bar and timestamp. Defaults to `false`
20+
*/
1521
minimal?: boolean;
22+
/**
23+
* Width of the audio player
24+
*/
1625
width: number;
26+
/**
27+
* Width of each individual bar in the visualization. Defaults to `2`
28+
*/
1729
barWidth?: number;
30+
/**
31+
* Gap between each individual bar in the visualization. Defaults to `1`
32+
*/
1833
gap?: number;
1934

35+
/**
36+
* Represents whether the audio visualization (waveform) should be displayed. Defaults to `true`
37+
*/
2038
visualise?: boolean;
39+
/**
40+
* Height of the visualization / trackbar area. Defaults to `75`
41+
*/
2142
trackHeight?: number;
43+
/**
44+
* Background color for the audio player. Defaults to `#EFEFEF`
45+
*/
2246
backgroundColor?: string;
47+
/**
48+
* Bar color for the bars in the visualization. This only applies to bars that have not currently been played
49+
*/
2350
barColor?: string;
51+
/**
52+
* Bar color for the bars that have been played
53+
*/
2454
barPlayedColor?: string;
2555

56+
/**
57+
* Represents whether the skip forward/backward options should be displayed. Defaults to `true`. Not applicable when `minimal` is set to `true`
58+
*/
2659
allowSkip?: boolean;
60+
/**
61+
* The number of seconds to skip forward/backward. Defaults to `5`
62+
*/
2763
skipDuration?: number;
64+
/**
65+
* Initial volume for the audio, minimum being `0`, maximum being `1`. Defaults to `0.75`
66+
*/
2867
initialVolume?: number;
68+
/**
69+
* Setting this to `true` will keep playing the audio in a loop. Defaults to `false`
70+
*/
2971
loop?: boolean;
72+
/**
73+
* Represents whether to show the loop options. Defaults to `true`
74+
*/
3075
showLoopOption?: boolean;
76+
/**
77+
* Represents whether the volume control should be shown. Defaults to `true`
78+
*/
3179
showVolumeControl?: boolean;
80+
/**
81+
* Color for the audio seek bar
82+
*/
3283
seekBarColor?: string;
84+
/**
85+
* Color for the volumn control
86+
*/
3387
volumeControlColor?: string;
34-
hideTrack?: boolean;
35-
hideTrackKnobWhenPlaying?: boolean;
88+
/**
89+
* Hides the seek bar if set to `true`, the audio will still be seekable. Defaults to `false`
90+
*/
91+
hideSeekBar?: boolean;
92+
/**
93+
* Hides the seek knob when audio is playing if set to `true`. Defaults to `false`
94+
*/
95+
hideSeekKnobWhenPlaying?: boolean;
3696
}
3797

3898
const AudioPlayer: React.FC<AudioPlayerProps> = ({
@@ -54,8 +114,8 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
54114
showVolumeControl = true,
55115
seekBarColor,
56116
volumeControlColor,
57-
hideTrack = false,
58-
hideTrackKnobWhenPlaying = false,
117+
hideSeekBar = false,
118+
hideSeekKnobWhenPlaying = false,
59119
}) => {
60120
const [blob, setBlob] = useState<Blob>();
61121
const [audio] = useState<HTMLAudioElement>(() => new Audio());
@@ -200,7 +260,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
200260
height: trackHeight,
201261
}}
202262
>
203-
{visualise && (
263+
{visualise && blob && (
204264
<AudioVisualizer
205265
width={width * 0.7}
206266
height={trackHeight}
@@ -223,8 +283,8 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
223283
current={currentTime}
224284
setCurrent={seekTo}
225285
color={seekBarColor}
226-
showTrack={!hideTrack}
227-
showKnob={!(hideTrackKnobWhenPlaying && isPlaying)}
286+
showTrack={!hideSeekBar}
287+
showKnob={!(hideSeekKnobWhenPlaying && isPlaying)}
228288
/>
229289
</div>
230290
<Timer

0 commit comments

Comments
 (0)