├── .eslintignore
├── .eslintrc
├── .github
└── workflows
│ ├── gh-pages.yml
│ └── publish.yml
├── .gitignore
├── .prettierrc
├── .prettierrc.json
├── LICENSE
├── README.md
├── config
└── CSSStub.ts
├── documentation
├── docs
│ ├── .vitepress
│ │ ├── components
│ │ │ ├── AudioPlayerRefExample.vue
│ │ │ ├── AudioPlayerWithRef.jsx
│ │ │ └── AudioPlayerWrapper.vue
│ │ ├── config.ts
│ │ ├── lib
│ │ │ └── Music.ts
│ │ ├── styles
│ │ │ └── app.css
│ │ └── theme
│ │ │ └── index.ts
│ ├── examples.md
│ ├── index.md
│ ├── public
│ │ ├── android-chrome-192x192.png
│ │ ├── android-chrome-512x512.png
│ │ ├── apple-touch-icon.png
│ │ ├── clarity.js
│ │ ├── favicon-16x16.png
│ │ ├── favicon-32x32.png
│ │ └── favicon.ico
│ └── sponsors.md
├── package-lock.json
└── package.json
├── jestconfig.json
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
├── assets
│ └── loading.png
├── components
│ ├── AudioPlayer.tsx
│ ├── audioPlay.css
│ ├── core.interface.ts
│ └── index.ts
├── helpers
│ ├── icons
│ │ └── icons.ts
│ └── utils
│ │ ├── formatTime.ts
│ │ ├── getDeviceEventNames.ts
│ │ └── getRangeBox.ts
└── index.ts
├── tests
└── common.test.tsx
└── tsconfig.json
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "extends": ["prettier", "plugin:prettier/recommended", "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended"],
4 | "parser": "@typescript-eslint/parser",
5 | "plugins": ["@typescript-eslint", "prettier", "react", "react-hooks"],
6 | "rules": {
7 | "react-hooks/rules-of-hooks": "error",
8 | "react-hooks/exhaustive-deps": "warn",
9 | "@typescript-eslint/no-non-null-assertion": "off",
10 | "@typescript-eslint/ban-ts-comment": "off",
11 | "@typescript-eslint/no-explicit-any": "off"
12 | },
13 | "settings": {
14 | "react": {
15 | "version": "detect"
16 | }
17 | },
18 | "env": {
19 | "browser": true,
20 | "node": true
21 | },
22 | "globals": {
23 | "JSX": true
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/.github/workflows/gh-pages.yml:
--------------------------------------------------------------------------------
1 | name: Deploy Documentation Page
2 |
3 | on:
4 | push:
5 | branches:
6 | - doc-build
7 |
8 | jobs:
9 | deploy:
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - name: Checkout code
14 | uses: actions/checkout@v3
15 |
16 | - name: Setup Node.js
17 | uses: actions/setup-node@v3
18 | with:
19 | node-version: '18'
20 |
21 | - name: Install dependencies
22 | run: npm install
23 | working-directory: ./documentation
24 |
25 | - name: Build site
26 | run: npm run docs:build
27 | working-directory: ./documentation
28 |
29 | - name: Deploy to GitHub Pages
30 | uses: peaceiris/actions-gh-pages@v3
31 | with:
32 | github_token: ${{ secrets.GITHUB_TOKEN }}
33 | publish_dir: ./documentation/docs/.vitepress/dist
34 |
--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
1 | name: build
2 |
3 | on:
4 | release:
5 | types: [published]
6 |
7 | jobs:
8 | build:
9 | runs-on: ubuntu-latest
10 |
11 | steps:
12 | - name: Checkout
13 | uses: actions/checkout@v3
14 |
15 | - name: Setup Node
16 | uses: actions/setup-node@v2
17 | with:
18 | node-version: 16.x
19 | registry-url: https://registry.npmjs.org/
20 |
21 | - name: Install dependencies
22 | run: npm install --force
23 |
24 | - name: Build
25 | run: npm run build
26 |
27 | - name: Publish
28 | run: npm publish
29 |
30 | env:
31 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
32 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | dist
4 | yarn-error.log
5 | .vscode
6 | .parcel-cache
7 |
8 | /documentation/docs/.vitepress/cache
9 | /documentation/docs/docs
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "printWidth": 200,
4 | "proseWrap": "always",
5 | "tabWidth": 2,
6 | "useTabs": false,
7 | "trailingComma": "none",
8 | "bracketSpacing": true,
9 | "semi" : true
10 | }
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "bracketSpacing": true,
3 | "singleQuote": true,
4 | "trailingComma": "all",
5 | "tabWidth": 2,
6 | "semi": false,
7 | "printWidth": 120,
8 | "jsxSingleQuote": true,
9 | "endOfLine": "auto"
10 | }
11 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Shahidul Alam Riyad (riyaddecoder)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://www.npmjs.com/package/react-audio-play)
2 |
3 |
4 |
5 |
6 | ## react-audio-play
7 |
8 | `react-audio-play` is a simple, lightweight and customizable audio player npm package for React applications. It provides an easy-to-use interface to play audio files in your React components with
9 | minimal setup.
10 |
11 |
12 |
13 | ## Features
14 |
15 | - Play audio files in your React application with a single component.
16 | - Control playback with play, pause, stop, and volume adjustment functionality.
17 | - Display track progress with a customizable progress bar.
18 | - Trigger custom actions on audio events like onPlay, onPause, onStop, onEnd, etc.
19 | - Fully customizable appearance to match your application's design.
20 |
21 | ## Demo
22 |
23 | Check [examples](https://riyaddecoder.github.io/react-audio-play/examples.html)
24 |
25 | ## Installation
26 |
27 | You can install `react-audio-play` using npm or yarn:
28 |
29 | ```bash
30 | npm install react-audio-play
31 | ```
32 |
33 | or
34 |
35 | ```bash
36 | yarn add react-audio-play
37 | ```
38 |
39 | ## Usage
40 |
41 | To use `react-audio-play`, import the `AudioPlayer` component and provide the necessary props:
42 |
43 | ```js
44 | import React from 'react';
45 | import { AudioPlayer } from 'react-audio-play';
46 |
47 | const App = () => {
48 | return (
49 |
50 |
My Audio Player
51 |
52 |
53 | );
54 | };
55 |
56 | export default App;
57 | ```
58 |
59 | #### Keyboard shortcuts (When audio player focused)
60 |
61 | They can be turned off by setting `hasKeyBindings` prop to `false`
62 |
63 | | Key binding | Action |
64 | | ----------- | ------ |
65 | | Space | Play/Pause |
66 | | ← | Rewind |
67 | | → | Forward |
68 | | ↑ | Volume up |
69 | | ↓ | Volume down |
70 |
71 | ## Props
72 |
73 | `react-audio-play` accepts the following props:
74 |
75 | - `className` (string, optional): A CSS class name for styling the component.
76 | - `src` (string, required): The URL or file path of the audio file to be played.
77 | - `autoPlay` (boolean, optional): Set this to `true` to autoplay the audio. Default is `false`.
78 | - `preload` (string, optional): Specifies the preload behavior for the audio file. Possible values are:
79 | - `auto`: The audio data is loaded as soon as possible.
80 | - `metadata`: Only metadata (e.g., duration) is loaded.
81 | - `none`: No preloading. Audio data is only loaded when requested.
82 | - `loop` (boolean, optional): Set this to `true` to enable looping of the audio playback. Default is `false`.
83 | - `volume` (number, optional): The initial volume level of the audio, ranging from 0 to 100. Default is `100`.
84 | - `hasKeyBindings` (boolean, optional): Specifies whether the `AudioPlayer` component should enable keyboard shortcuts for volume control and seeking. Default is `true`.
85 | - `onPlay` (function, optional): Callback function to execute when the audio starts playing.
86 | - `onPause` (function, optional): Callback function to execute when the audio is paused.
87 | - `onEnd` (function, optional): Callback function to execute when the audio playback ends.
88 | - `onError` (function, optional): Callback function to execute if there's an error loading or playing the audio.
89 | - `backgroundColor` (string, optional): The background color of the audio player. Default is `#fff`.
90 | - `color` (string, optional): The text and icon color of the audio player. Default is `#566574`.
91 | - `sliderColor` (string, optional): The color of the progress slider. Default is `#007FFF`.
92 | - `volumePlacement` (string, optional): Specifies the placement of the volume controls. Possible values are `top` and `bottom`. Default is `top`.
93 | - `width` (string, optional): The width of the audio player. Use this prop to set the width of the player. For example, `"100%"`, `"300px"`, etc.
94 | - `style` (object, optional): An object containing additional inline styles for the component.
95 |
96 |
97 | ## Advanced Usage
98 |
99 | Starting with version `v1.0.4`, you can access certain actions of the `AudioPlayer` component programmatically using a `ref` with the following interface:
100 |
101 | - `play`: Function to start audio playback.
102 | - `pause`: Function to pause audio playback.
103 | - `stop`: Function to stop the audio playback.
104 | - `focus`: Function to focus on the audio player component.
105 |
106 | ## Example usage with ref (available from v1.0.4)
107 |
108 | [Live preview here](https://riyaddecoder.github.io/react-audio-play/examples.html#example-4-usage-with-ref-available-from-v1-0-4)
109 |
110 | ```js
111 | import { useRef } from 'react';
112 | import { AudioPlayer, AudioPlayerRef } from 'react-audio-play';
113 |
114 | function App() {
115 | const playerRef = useRef(null);
116 |
117 | const handlePlay = () => {
118 | playerRef.current?.play();
119 | };
120 |
121 | const handlePause = () => {
122 | playerRef.current?.pause();
123 | };
124 |
125 | const handleStop = () => {
126 | playerRef.current?.stop();
127 | };
128 |
129 | const handleFocus = () => {
130 | playerRef.current?.focus();
131 | };
132 |
133 | return (
134 |
4 | 
5 |
6 | ## react-audio-play
7 |
8 | `react-audio-play` is a simple, lightweight and customizable audio player npm package for React applications. It provides an easy-to-use interface to play audio files in your React components with
9 | minimal setup.
10 |
11 |
12 |
13 | ## Features
14 |
15 | - Play audio files in your React application with a single component.
16 | - Control playback with play, pause, stop, and volume adjustment functionality.
17 | - Display track progress with a customizable progress bar.
18 | - Trigger custom actions on audio events like onPlay, onPause, onStop, onEnd, etc.
19 | - Fully customizable appearance to match your application's design.
20 |
21 | ## Demo
22 |
23 | Check [examples](https://riyaddecoder.github.io/react-audio-play/examples.html)
24 |
25 | ## Installation
26 |
27 | You can install `react-audio-play` using npm or yarn:
28 |
29 | ```bash
30 | npm install react-audio-play
31 | ```
32 |
33 | or
34 |
35 | ```bash
36 | yarn add react-audio-play
37 | ```
38 |
39 | ## Usage
40 |
41 | To use `react-audio-play`, import the `AudioPlayer` component and provide the necessary props:
42 |
43 | ```js
44 | import React from 'react';
45 | import { AudioPlayer } from 'react-audio-play';
46 |
47 | const App = () => {
48 | return (
49 |