12 | {icon &&
16 | );
17 | };
18 |
19 | export default FeatureCard;
20 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | // Export core functionality
2 | export {
3 | fetchSoundBlob,
4 | getCDNUrl,
5 | isSoundEnabled,
6 | makeRemoteSound,
7 | playSound,
8 | preloadSounds,
9 | setCDNUrl,
10 | setSoundEnabled,
11 | } from "./runtime";
12 |
13 | // Export hooks
14 | export { useSound, useSoundEnabled, useSoundOnChange } from "./hooks";
15 |
16 | // Export components
17 | export { Sound, SoundButton, SoundProvider } from "./components";
18 |
19 | // Export types
20 | export type {
21 | GameSoundName,
22 | LibrarySoundName,
23 | NotificationSoundName,
24 | SoundCategory,
25 | SoundHookReturn,
26 | SoundOptions,
27 | UiSoundName,
28 | } from "./types";
29 |
--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 | "moduleResolution": "bundler",
9 | "allowImportingTsExtensions": true,
10 | "resolveJsonModule": true,
11 | "isolatedModules": true,
12 | "noEmit": true,
13 | "jsx": "react-jsx",
14 | "strict": true,
15 | "noUnusedLocals": true,
16 | "noUnusedParameters": true,
17 | "noFallthroughCasesInSwitch": true,
18 | "baseUrl": ".",
19 | "paths": {
20 | "@/*": ["src/*"]
21 | }
22 | },
23 | "include": ["src"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2018",
4 | "module": "esnext",
5 | "lib": ["dom", "esnext"],
6 | "declaration": true,
7 | "sourceMap": true,
8 | "moduleResolution": "node",
9 | "skipLibCheck": true,
10 | "strict": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "noImplicitReturns": true,
13 | "noImplicitThis": true,
14 | "noImplicitAny": true,
15 | "strictNullChecks": true,
16 | "noUnusedLocals": true,
17 | "noUnusedParameters": true,
18 | "esModuleInterop": true,
19 | "resolveJsonModule": true,
20 | "jsx": "react",
21 | "outDir": "dist",
22 | "rootDir": "src"
23 | },
24 | "include": ["src"],
25 | "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
26 | }
27 |
--------------------------------------------------------------------------------
/website/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/website/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Route, Routes } from "react-router-dom";
3 | import Footer from "./components/Footer";
4 | import Header from "./components/Header";
5 | import "./index.css";
6 | import DocumentationPage from "./pages/DocumentationPage";
7 | import HomePage from "./pages/HomePage";
8 | import SoundLibraryPage from "./pages/SoundLibraryPage";
9 |
10 | const App: React.FC = () => {
11 | return (
12 | {icon}
}
13 | {title}
14 |{description}
15 |
13 |
15 |
16 |
20 |
21 |
22 |
23 | );
24 | };
25 |
26 | export default App;
27 |
--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
13 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from "@rollup/plugin-commonjs";
2 | import json from "@rollup/plugin-json";
3 | import resolve from "@rollup/plugin-node-resolve";
4 | import typescript from "@rollup/plugin-typescript";
5 | import { terser } from "rollup-plugin-terser";
6 |
7 | const packageJson = require("./package.json");
8 |
9 | export default {
10 | input: "src/index.ts",
11 | output: [
12 | {
13 | file: packageJson.main,
14 | format: "cjs",
15 | sourcemap: true,
16 | exports: "named",
17 | },
18 | {
19 | file: packageJson.module,
20 | format: "esm",
21 | sourcemap: true,
22 | exports: "named",
23 | },
24 | ],
25 | plugins: [
26 | resolve(),
27 | commonjs(),
28 | json(),
29 | typescript({
30 | tsconfig: "./tsconfig.json",
31 | exclude: ["**/__tests__/**", "**/*.test.ts", "**/*.test.tsx"],
32 | }),
33 | terser(),
34 | ],
35 | external: ["react", "react-dom", "howler"],
36 | };
37 |
--------------------------------------------------------------------------------
/website/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js'
2 | import globals from 'globals'
3 | import reactHooks from 'eslint-plugin-react-hooks'
4 | import reactRefresh from 'eslint-plugin-react-refresh'
5 |
6 | export default [
7 | { ignores: ['dist'] },
8 | {
9 | files: ['**/*.{js,jsx}'],
10 | languageOptions: {
11 | ecmaVersion: 2020,
12 | globals: globals.browser,
13 | parserOptions: {
14 | ecmaVersion: 'latest',
15 | ecmaFeatures: { jsx: true },
16 | sourceType: 'module',
17 | },
18 | },
19 | plugins: {
20 | 'react-hooks': reactHooks,
21 | 'react-refresh': reactRefresh,
22 | },
23 | rules: {
24 | ...js.configs.recommended.rules,
25 | ...reactHooks.configs.recommended.rules,
26 | 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
27 | 'react-refresh/only-export-components': [
28 | 'warn',
29 | { allowConstantExport: true },
30 | ],
31 | },
32 | },
33 | ]
34 |
--------------------------------------------------------------------------------
/website/src/components/CodeBlock.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/utils/cn";
2 | import Prism from "prismjs";
3 | import "prismjs/components/prism-bash";
4 | import "prismjs/components/prism-javascript";
5 | import "prismjs/components/prism-jsx";
6 | import "prismjs/components/prism-tsx";
7 | import "prismjs/components/prism-typescript";
8 | import "prismjs/themes/prism-tomorrow.css";
9 | import React, { useEffect } from "react";
10 |
11 | interface CodeBlockProps {
12 | className?: string;
13 | children: React.ReactNode;
14 | language?: string;
15 | }
16 |
17 | const CodeBlock: React.FC
26 | {children}
27 |
28 | );
29 | };
30 |
31 | export default CodeBlock;
32 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Aedilic Inc.
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.
--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-sounds-website",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "rm -rf dist/ && npm run sync && vite build",
9 | "start": "serve -s dist",
10 | "sync": "cp ../src/manifest.json ./src/",
11 | "lint": "eslint .",
12 | "preview": "vite preview"
13 | },
14 | "dependencies": {
15 | "clsx": "^2.1.1",
16 | "howler": "^2.2.4",
17 | "prismjs": "^1.30.0",
18 | "react": "^19.0.0",
19 | "react-dom": "^19.0.0",
20 | "react-router-dom": "^7.5.2",
21 | "react-sounds": "^1.0.25",
22 | "serve": "^14.2.1",
23 | "tailwind-merge": "^3.2.0"
24 | },
25 | "devDependencies": {
26 | "@eslint/js": "^9.22.0",
27 | "@tailwindcss/vite": "^4.1.4",
28 | "@types/prismjs": "^1.26.5",
29 | "@types/react": "^19.0.10",
30 | "@types/react-dom": "^19.0.4",
31 | "@typescript-eslint/eslint-plugin": "^8.31.1",
32 | "@typescript-eslint/parser": "^8.31.1",
33 | "@typescript-eslint/utils": "^8.31.1",
34 | "@vitejs/plugin-react": "^4.3.4",
35 | "autoprefixer": "^10.4.21",
36 | "eslint": "^9.25.1",
37 | "eslint-plugin-react-hooks": "^5.2.0",
38 | "eslint-plugin-react-refresh": "^0.4.19",
39 | "globals": "^16.0.0",
40 | "picomatch": "^4.0.2",
41 | "postcss": "^8.5.3",
42 | "tailwindcss": "^4.1.4",
43 | "typescript": "^5.3.3",
44 | "vite": "^6.3.1"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/website/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
15 |
16 |
17 |
21 |
22 |
23 |
24 |
4 | 
5 | 
6 | 
7 |
10 | Hundreds of ready-to-play sound effects for your React applications
11 | Add delight to your UI with just a few lines of code
12 |
15 | Demo • 16 | Documentation • 17 | Sound Explorer 18 |
19 | 20 | ## ✨ Why react-sounds? 21 | 22 | - 🪶 **Lightweight**: Only loads JS wrappers, audio files stay on CDN until needed 23 | - 🔄 **Lazy Loading**: Sounds are fetched only when they're used 24 | - 📦 **Offline Support**: Download sounds for self-hosting with the included CLI 25 | - 🎯 **Simple API**: Intuitive hooks and components 26 | - 🔊 **Extensive Library**: Hundreds of categorized sounds (UI, notification, game) 27 | 28 | ## 🚀 Quick Start 29 | 30 | ```bash 31 | npm install react-sounds howler 32 | # or 33 | yarn add react-sounds howler 34 | ``` 35 | 36 | ```tsx 37 | import { useSound } from 'react-sounds'; 38 | 39 | function Button() { 40 | const { play } = useSound('ui/button_1'); 41 | 42 | return ( 43 | 46 | ); 47 | } 48 | ``` 49 | 50 | ## 📚 Documentation 51 | 52 | For complete documentation including advanced usage, visit [reactsounds.com/docs](https://www.reactsounds.com/docs) 53 | 54 | ## 🎮 Live Demo 55 | 56 | Try the interactive demo at [reactsounds.com](https://www.reactsounds.com) 57 | 58 | ## 🔍 Explore All Sounds 59 | 60 | Browse and play all available sounds at [reactsounds.com/sounds](https://www.reactsounds.com/sounds) 61 | 62 | ## 💻 Browser Support 63 | 64 | Works in all modern browsers that support the Web Audio API (Chrome, Firefox, Safari, Edge) 65 | 66 | ## 📄 License 67 | 68 | MIT © Aedilic Inc. 69 | 70 | --- 71 | 72 |73 | Made with ♥ by Aedilic Inc 74 |
75 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # vitepress build output 108 | **/.vitepress/dist 109 | 110 | # vitepress cache directory 111 | **/.vitepress/cache 112 | 113 | # Docusaurus cache and generated files 114 | .docusaurus 115 | 116 | # Serverless directories 117 | .serverless/ 118 | 119 | # FuseBox cache 120 | .fusebox/ 121 | 122 | # DynamoDB Local files 123 | .dynamodb/ 124 | 125 | # TernJS port file 126 | .tern-port 127 | 128 | # Stores VSCode versions used for testing VSCode extensions 129 | .vscode-test 130 | 131 | # yarn v2 132 | .yarn/cache 133 | .yarn/unplugged 134 | .yarn/build-state.yml 135 | .yarn/install-state.gz 136 | .pnp.* 137 | 138 | # custom 139 | .cursor/ 140 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Categories of sounds available in the library 4 | */ 5 | export type SoundCategory = 'ambient' | 'arcade' | 'game' | 'misc' | 'notification' | 'system' | 'ui'; 6 | 7 | /** 8 | * AmbientSoundName sound names 9 | */ 10 | export type AmbientSoundName = 'campfire' | 'heartbeat' | 'rain' | 'water_stream' | 'wind'; 11 | 12 | /** 13 | * ArcadeSoundName sound names 14 | */ 15 | export type ArcadeSoundName = 'coin' | 'coin_bling' | 'jump' | 'level_down' | 'level_up' | 'power_down' | 'power_up' | 'upgrade'; 16 | 17 | /** 18 | * GameSoundName sound names 19 | */ 20 | export type GameSoundName = 'coin' | 'hit' | 'miss' | 'portal_closing' | 'portal_opening' | 'void'; 21 | 22 | /** 23 | * MiscSoundName sound names 24 | */ 25 | export type MiscSoundName = 'silence'; 26 | 27 | /** 28 | * NotificationSoundName sound names 29 | */ 30 | export type NotificationSoundName = 'completed' | 'error' | 'info' | 'message' | 'notification' | 'popup' | 'reminder' | 'success' | 'warning'; 31 | 32 | /** 33 | * SystemSoundName sound names 34 | */ 35 | export type SystemSoundName = 'boot_down' | 'boot_up' | 'device_connect' | 'device_disconnect' | 'lock' | 'screenshot' | 'trash'; 36 | 37 | /** 38 | * UiSoundName sound names 39 | */ 40 | export type UiSoundName = 'blocked' | 'button_hard' | 'button_hard_double' | 'button_medium' | 'button_soft' | 'button_soft_double' | 'button_squishy' | 'buzz' | 'buzz_deep' | 'buzz_long' | 'copy' | 'input_blur' | 'input_focus' | 'item_deselect' | 'item_select' | 'keystroke_hard' | 'keystroke_medium' | 'keystroke_soft' | 'panel_collapse' | 'panel_expand' | 'pop_close' | 'pop_open' | 'popup_close' | 'popup_open' | 'radio_select' | 'send' | 'submit' | 'success_bling' | 'success_blip' | 'success_chime' | 'tab_close' | 'tab_open' | 'toggle_off' | 'toggle_on' | 'window_close' | 'window_open'; 41 | 42 | /** 43 | * All available sound names 44 | */ 45 | export type LibrarySoundName = 46 | | `ambient/${AmbientSoundName}` 47 | | `arcade/${ArcadeSoundName}` 48 | | `game/${GameSoundName}` 49 | | `misc/${MiscSoundName}` 50 | | `notification/${NotificationSoundName}` 51 | | `system/${SystemSoundName}` 52 | | `ui/${UiSoundName}`; 53 | 54 | /** 55 | * Sound options for playback 56 | */ 57 | export interface SoundOptions { 58 | /** 59 | * Volume of the sound (0.0 to 1.0) 60 | */ 61 | volume?: number; 62 | 63 | /** 64 | * Playback rate (1.0 is normal speed) 65 | */ 66 | rate?: number; 67 | 68 | /** 69 | * Sound should loop 70 | */ 71 | loop?: boolean; 72 | } 73 | 74 | /** 75 | * Return type for useSound hook 76 | */ 77 | export interface SoundHookReturn { 78 | /** 79 | * Play the sound with optional options 80 | */ 81 | play: (options?: SoundOptions) => Promise
67 |
113 | );
114 | };
115 |
116 | export default SoundSelector;
117 |
--------------------------------------------------------------------------------
/bin/react-sounds-cli.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const fs = require("fs");
4 | const path = require("path");
5 | const https = require("https");
6 |
7 | // Load the manifest
8 | const manifestPath = path.join(__dirname, "../dist/manifest.json");
9 | let manifest;
10 |
11 | try {
12 | manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
13 | } catch (err) {
14 | console.error("Error loading manifest:", err.message);
15 | process.exit(1);
16 | }
17 |
18 | // Get the CDN base URL
19 | const cdnBaseUrl = process.env.REACT_SOUNDS_CDN || "https://reacticons.sfo3.cdn.digitaloceanspaces.com/v1";
20 |
21 | // Parse command line arguments
22 | const args = process.argv.slice(2);
23 | let command = args[0];
24 | let soundNames = [];
25 | let outputDir = "./public/sounds";
26 |
27 | if (command === "pick") {
28 | soundNames = args.slice(1).filter((arg) => !arg.startsWith("--"));
29 |
30 | // Check for output directory option
31 | const outputOption = args.find((arg) => arg.startsWith("--output="));
32 | if (outputOption) {
33 | outputDir = outputOption.split("=")[1];
34 | } else {
35 | const outputIndex = args.indexOf("--output");
36 | if (outputIndex !== -1 && args[outputIndex + 1]) {
37 | outputDir = args[outputIndex + 1];
38 | }
39 | }
40 |
41 | if (soundNames.length === 0) {
42 | console.error("Please specify at least one sound to pick.");
43 | console.log("Usage: npx react-sounds-cli pick
68 | {
72 | setSearchTerm(e.target.value);
73 | setIsOpen(true);
74 | }}
75 | onFocus={() => setIsOpen(true)}
76 | placeholder="Search for a sound..."
77 | className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-150 ease-in-out"
78 | />
79 |
90 |
91 | {isOpen && (
92 |
80 |
88 |
89 |
93 | {Object.entries(filteredSounds).map(([category, sounds]) => (
94 |
111 | )}
112 |
95 |
106 | ))}
107 | {Object.keys(filteredSounds).length === 0 && (
108 | {category}
96 | {sounds.map((sound) => (
97 |
104 | ))}
105 | No sounds found
109 | )}
110 |
94 | {/* Style tag for custom animations */}
95 |
96 |
97 | {/* Hero Section */}
98 |
193 | );
194 | };
195 |
196 | export default HomePage;
197 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "1.0.0",
3 | "sounds": {
4 | "ambient/campfire": {
5 | "src": "ambient/campfire.eb676cb.mp3",
6 | "duration": 22.047313
7 | },
8 | "ambient/heartbeat": {
9 | "src": "ambient/heartbeat.3680f81.mp3",
10 | "duration": 22.047313
11 | },
12 | "ambient/rain": {
13 | "src": "ambient/rain.96a6bc5.mp3",
14 | "duration": 22.047313
15 | },
16 | "ambient/water_stream": {
17 | "src": "ambient/water_stream.9383548.mp3",
18 | "duration": 22.047313
19 | },
20 | "ambient/wind": {
21 | "src": "ambient/wind.13b95c3.mp3",
22 | "duration": 22.047313
23 | },
24 | "arcade/coin": {
25 | "src": "arcade/coin.5ec00e3.mp3",
26 | "duration": 0.862
27 | },
28 | "arcade/coin_bling": {
29 | "src": "arcade/coin_bling.e7e6644.mp3",
30 | "duration": 0.862
31 | },
32 | "arcade/jump": {
33 | "src": "arcade/jump.6baf978.mp3",
34 | "duration": 0.862
35 | },
36 | "arcade/level_down": {
37 | "src": "arcade/level_down.7f42195.mp3",
38 | "duration": 1.123265
39 | },
40 | "arcade/level_up": {
41 | "src": "arcade/level_up.0aba301.mp3",
42 | "duration": 1.48898
43 | },
44 | "arcade/power_down": {
45 | "src": "arcade/power_down.222ab81.mp3",
46 | "duration": 1.071
47 | },
48 | "arcade/power_up": {
49 | "src": "arcade/power_up.bcafcc5.mp3",
50 | "duration": 1.071
51 | },
52 | "arcade/upgrade": {
53 | "src": "arcade/upgrade.1da1db4.mp3",
54 | "duration": 0.862
55 | },
56 | "game/coin": {
57 | "src": "game/coin.21575b3.mp3",
58 | "duration": 0.914286
59 | },
60 | "game/hit": {
61 | "src": "game/hit.7f64763.mp3",
62 | "duration": 0.313469
63 | },
64 | "game/miss": {
65 | "src": "game/miss.b1d5a19.mp3",
66 | "duration": 0.287347
67 | },
68 | "game/portal_closing": {
69 | "src": "game/portal_closing.f434407.mp3",
70 | "duration": 2.08975
71 | },
72 | "game/portal_opening": {
73 | "src": "game/portal_opening.54935de.mp3",
74 | "duration": 3.474286
75 | },
76 | "game/void": {
77 | "src": "game/void.ab99118.mp3",
78 | "duration": 0.862
79 | },
80 | "misc/silence": {
81 | "src": "misc/silence.01e0b9b.mp3",
82 | "duration": 1.152
83 | },
84 | "notification/completed": {
85 | "src": "notification/completed.31e527e.mp3",
86 | "duration": 0.862
87 | },
88 | "notification/error": {
89 | "src": "notification/error.b92d3c6.mp3",
90 | "duration": 0.548563
91 | },
92 | "notification/info": {
93 | "src": "notification/info.fc3baa4.mp3",
94 | "duration": 0.862
95 | },
96 | "notification/message": {
97 | "src": "notification/message.1eefe18.mp3",
98 | "duration": 0.862
99 | },
100 | "notification/notification": {
101 | "src": "notification/notification.595d086.mp3",
102 | "duration": 0.862
103 | },
104 | "notification/popup": {
105 | "src": "notification/popup.cf74b54.mp3",
106 | "duration": 0.313469
107 | },
108 | "notification/reminder": {
109 | "src": "notification/reminder.6d68587.mp3",
110 | "duration": 0.862
111 | },
112 | "notification/success": {
113 | "src": "notification/success.f38c2ed.mp3",
114 | "duration": 1.227755
115 | },
116 | "notification/warning": {
117 | "src": "notification/warning.207aed9.mp3",
118 | "duration": 0.862
119 | },
120 | "system/boot_down": {
121 | "src": "system/boot_down.7baf040.mp3",
122 | "duration": 1.593469
123 | },
124 | "system/boot_up": {
125 | "src": "system/boot_up.7369806.mp3",
126 | "duration": 3.134694
127 | },
128 | "system/device_connect": {
129 | "src": "system/device_connect.e609d62.mp3",
130 | "duration": 0.862
131 | },
132 | "system/device_disconnect": {
133 | "src": "system/device_disconnect.bd814fa.mp3",
134 | "duration": 0.862
135 | },
136 | "system/lock": {
137 | "src": "system/lock.4063aab.mp3",
138 | "duration": 0.862
139 | },
140 | "system/screenshot": {
141 | "src": "system/screenshot.f3483cb.mp3",
142 | "duration": 0.235102
143 | },
144 | "system/trash": {
145 | "src": "system/trash.ed51a4e.mp3",
146 | "duration": 0.862
147 | },
148 | "ui/blocked": {
149 | "src": "ui/blocked.be40409.mp3",
150 | "duration": 0.940408
151 | },
152 | "ui/button_hard": {
153 | "src": "ui/button_hard.011f516.mp3",
154 | "duration": 0.835918
155 | },
156 | "ui/button_hard_double": {
157 | "src": "ui/button_hard_double.2c7e778.mp3",
158 | "duration": 0.862
159 | },
160 | "ui/button_medium": {
161 | "src": "ui/button_medium.f1076ea.mp3",
162 | "duration": 0.862
163 | },
164 | "ui/button_soft": {
165 | "src": "ui/button_soft.896771c.mp3",
166 | "duration": 0.862
167 | },
168 | "ui/button_soft_double": {
169 | "src": "ui/button_soft_double.ef0aec4.mp3",
170 | "duration": 0.862
171 | },
172 | "ui/button_squishy": {
173 | "src": "ui/button_squishy.69c5c9a.mp3",
174 | "duration": 0.391837
175 | },
176 | "ui/buzz": {
177 | "src": "ui/buzz.6d6857f.mp3",
178 | "duration": 0.548563
179 | },
180 | "ui/buzz_deep": {
181 | "src": "ui/buzz_deep.c1f597f.mp3",
182 | "duration": 0.809796
183 | },
184 | "ui/buzz_long": {
185 | "src": "ui/buzz_long.d506d81.mp3",
186 | "duration": 1.071
187 | },
188 | "ui/copy": {
189 | "src": "ui/copy.4aadb27.mp3",
190 | "duration": 0.130612
191 | },
192 | "ui/input_blur": {
193 | "src": "ui/input_blur.607531b.mp3",
194 | "duration": 0.862
195 | },
196 | "ui/input_focus": {
197 | "src": "ui/input_focus.80b402e.mp3",
198 | "duration": 0.287347
199 | },
200 | "ui/item_deselect": {
201 | "src": "ui/item_deselect.9955ec7.mp3",
202 | "duration": 0.862
203 | },
204 | "ui/item_select": {
205 | "src": "ui/item_select.5d88832.mp3",
206 | "duration": 0.862
207 | },
208 | "ui/keystroke_hard": {
209 | "src": "ui/keystroke_hard.6d8eb42.mp3",
210 | "duration": 0.548563
211 | },
212 | "ui/keystroke_medium": {
213 | "src": "ui/keystroke_medium.2b4ae6c.mp3",
214 | "duration": 0.548563
215 | },
216 | "ui/keystroke_soft": {
217 | "src": "ui/keystroke_soft.fcd4503.mp3",
218 | "duration": 0.548563
219 | },
220 | "ui/panel_collapse": {
221 | "src": "ui/panel_collapse.1b8441f.mp3",
222 | "duration": 0.862
223 | },
224 | "ui/panel_expand": {
225 | "src": "ui/panel_expand.ef3ca39.mp3",
226 | "duration": 0.862
227 | },
228 | "ui/pop_close": {
229 | "src": "ui/pop_close.1f2dc35.mp3",
230 | "duration": 0.809796
231 | },
232 | "ui/pop_open": {
233 | "src": "ui/pop_open.360c640.mp3",
234 | "duration": 0.835918
235 | },
236 | "ui/popup_close": {
237 | "src": "ui/popup_close.1bd2a1b.mp3",
238 | "duration": 1.071
239 | },
240 | "ui/popup_open": {
241 | "src": "ui/popup_open.97597a8.mp3",
242 | "duration": 1.071
243 | },
244 | "ui/radio_select": {
245 | "src": "ui/radio_select.4fbe4e3.mp3",
246 | "duration": 0.862
247 | },
248 | "ui/send": {
249 | "src": "ui/send.396090f.mp3",
250 | "duration": 0.182857
251 | },
252 | "ui/submit": {
253 | "src": "ui/submit.1e228b1.mp3",
254 | "duration": 0.548563
255 | },
256 | "ui/success_bling": {
257 | "src": "ui/success_bling.3f44a2f.mp3",
258 | "duration": 0.809796
259 | },
260 | "ui/success_blip": {
261 | "src": "ui/success_blip.911b304.mp3",
262 | "duration": 0.626939
263 | },
264 | "ui/success_chime": {
265 | "src": "ui/success_chime.436ed4a.mp3",
266 | "duration": 1.619592
267 | },
268 | "ui/tab_close": {
269 | "src": "ui/tab_close.3c1a646.mp3",
270 | "duration": 0.548563
271 | },
272 | "ui/tab_open": {
273 | "src": "ui/tab_open.3745bcd.mp3",
274 | "duration": 0.548563
275 | },
276 | "ui/toggle_off": {
277 | "src": "ui/toggle_off.7103845.mp3",
278 | "duration": 0.261224
279 | },
280 | "ui/toggle_on": {
281 | "src": "ui/toggle_on.2f87bf7.mp3",
282 | "duration": 0.287347
283 | },
284 | "ui/window_close": {
285 | "src": "ui/window_close.0e958da.mp3",
286 | "duration": 0.548563
287 | },
288 | "ui/window_open": {
289 | "src": "ui/window_open.7478756.mp3",
290 | "duration": 0.548563
291 | }
292 | }
293 | }
--------------------------------------------------------------------------------
/website/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "1.0.0",
3 | "sounds": {
4 | "ambient/campfire": {
5 | "src": "ambient/campfire.eb676cb.mp3",
6 | "duration": 22.047313
7 | },
8 | "ambient/heartbeat": {
9 | "src": "ambient/heartbeat.3680f81.mp3",
10 | "duration": 22.047313
11 | },
12 | "ambient/rain": {
13 | "src": "ambient/rain.96a6bc5.mp3",
14 | "duration": 22.047313
15 | },
16 | "ambient/water_stream": {
17 | "src": "ambient/water_stream.9383548.mp3",
18 | "duration": 22.047313
19 | },
20 | "ambient/wind": {
21 | "src": "ambient/wind.13b95c3.mp3",
22 | "duration": 22.047313
23 | },
24 | "arcade/coin": {
25 | "src": "arcade/coin.5ec00e3.mp3",
26 | "duration": 0.862
27 | },
28 | "arcade/coin_bling": {
29 | "src": "arcade/coin_bling.e7e6644.mp3",
30 | "duration": 0.862
31 | },
32 | "arcade/jump": {
33 | "src": "arcade/jump.6baf978.mp3",
34 | "duration": 0.862
35 | },
36 | "arcade/level_down": {
37 | "src": "arcade/level_down.7f42195.mp3",
38 | "duration": 1.123265
39 | },
40 | "arcade/level_up": {
41 | "src": "arcade/level_up.0aba301.mp3",
42 | "duration": 1.48898
43 | },
44 | "arcade/power_down": {
45 | "src": "arcade/power_down.222ab81.mp3",
46 | "duration": 1.071
47 | },
48 | "arcade/power_up": {
49 | "src": "arcade/power_up.bcafcc5.mp3",
50 | "duration": 1.071
51 | },
52 | "arcade/upgrade": {
53 | "src": "arcade/upgrade.1da1db4.mp3",
54 | "duration": 0.862
55 | },
56 | "game/coin": {
57 | "src": "game/coin.21575b3.mp3",
58 | "duration": 0.914286
59 | },
60 | "game/hit": {
61 | "src": "game/hit.7f64763.mp3",
62 | "duration": 0.313469
63 | },
64 | "game/miss": {
65 | "src": "game/miss.b1d5a19.mp3",
66 | "duration": 0.287347
67 | },
68 | "game/portal_closing": {
69 | "src": "game/portal_closing.f434407.mp3",
70 | "duration": 2.08975
71 | },
72 | "game/portal_opening": {
73 | "src": "game/portal_opening.54935de.mp3",
74 | "duration": 3.474286
75 | },
76 | "game/void": {
77 | "src": "game/void.ab99118.mp3",
78 | "duration": 0.862
79 | },
80 | "misc/silence": {
81 | "src": "misc/silence.01e0b9b.mp3",
82 | "duration": 1.152
83 | },
84 | "notification/completed": {
85 | "src": "notification/completed.31e527e.mp3",
86 | "duration": 0.862
87 | },
88 | "notification/error": {
89 | "src": "notification/error.b92d3c6.mp3",
90 | "duration": 0.548563
91 | },
92 | "notification/info": {
93 | "src": "notification/info.fc3baa4.mp3",
94 | "duration": 0.862
95 | },
96 | "notification/message": {
97 | "src": "notification/message.1eefe18.mp3",
98 | "duration": 0.862
99 | },
100 | "notification/notification": {
101 | "src": "notification/notification.595d086.mp3",
102 | "duration": 0.862
103 | },
104 | "notification/popup": {
105 | "src": "notification/popup.cf74b54.mp3",
106 | "duration": 0.313469
107 | },
108 | "notification/reminder": {
109 | "src": "notification/reminder.6d68587.mp3",
110 | "duration": 0.862
111 | },
112 | "notification/success": {
113 | "src": "notification/success.f38c2ed.mp3",
114 | "duration": 1.227755
115 | },
116 | "notification/warning": {
117 | "src": "notification/warning.207aed9.mp3",
118 | "duration": 0.862
119 | },
120 | "system/boot_down": {
121 | "src": "system/boot_down.7baf040.mp3",
122 | "duration": 1.593469
123 | },
124 | "system/boot_up": {
125 | "src": "system/boot_up.7369806.mp3",
126 | "duration": 3.134694
127 | },
128 | "system/device_connect": {
129 | "src": "system/device_connect.e609d62.mp3",
130 | "duration": 0.862
131 | },
132 | "system/device_disconnect": {
133 | "src": "system/device_disconnect.bd814fa.mp3",
134 | "duration": 0.862
135 | },
136 | "system/lock": {
137 | "src": "system/lock.4063aab.mp3",
138 | "duration": 0.862
139 | },
140 | "system/screenshot": {
141 | "src": "system/screenshot.f3483cb.mp3",
142 | "duration": 0.235102
143 | },
144 | "system/trash": {
145 | "src": "system/trash.ed51a4e.mp3",
146 | "duration": 0.862
147 | },
148 | "ui/blocked": {
149 | "src": "ui/blocked.be40409.mp3",
150 | "duration": 0.940408
151 | },
152 | "ui/button_hard": {
153 | "src": "ui/button_hard.011f516.mp3",
154 | "duration": 0.835918
155 | },
156 | "ui/button_hard_double": {
157 | "src": "ui/button_hard_double.2c7e778.mp3",
158 | "duration": 0.862
159 | },
160 | "ui/button_medium": {
161 | "src": "ui/button_medium.f1076ea.mp3",
162 | "duration": 0.862
163 | },
164 | "ui/button_soft": {
165 | "src": "ui/button_soft.896771c.mp3",
166 | "duration": 0.862
167 | },
168 | "ui/button_soft_double": {
169 | "src": "ui/button_soft_double.ef0aec4.mp3",
170 | "duration": 0.862
171 | },
172 | "ui/button_squishy": {
173 | "src": "ui/button_squishy.69c5c9a.mp3",
174 | "duration": 0.391837
175 | },
176 | "ui/buzz": {
177 | "src": "ui/buzz.6d6857f.mp3",
178 | "duration": 0.548563
179 | },
180 | "ui/buzz_deep": {
181 | "src": "ui/buzz_deep.c1f597f.mp3",
182 | "duration": 0.809796
183 | },
184 | "ui/buzz_long": {
185 | "src": "ui/buzz_long.d506d81.mp3",
186 | "duration": 1.071
187 | },
188 | "ui/copy": {
189 | "src": "ui/copy.4aadb27.mp3",
190 | "duration": 0.130612
191 | },
192 | "ui/input_blur": {
193 | "src": "ui/input_blur.607531b.mp3",
194 | "duration": 0.862
195 | },
196 | "ui/input_focus": {
197 | "src": "ui/input_focus.80b402e.mp3",
198 | "duration": 0.287347
199 | },
200 | "ui/item_deselect": {
201 | "src": "ui/item_deselect.9955ec7.mp3",
202 | "duration": 0.862
203 | },
204 | "ui/item_select": {
205 | "src": "ui/item_select.5d88832.mp3",
206 | "duration": 0.862
207 | },
208 | "ui/keystroke_hard": {
209 | "src": "ui/keystroke_hard.6d8eb42.mp3",
210 | "duration": 0.548563
211 | },
212 | "ui/keystroke_medium": {
213 | "src": "ui/keystroke_medium.2b4ae6c.mp3",
214 | "duration": 0.548563
215 | },
216 | "ui/keystroke_soft": {
217 | "src": "ui/keystroke_soft.fcd4503.mp3",
218 | "duration": 0.548563
219 | },
220 | "ui/panel_collapse": {
221 | "src": "ui/panel_collapse.1b8441f.mp3",
222 | "duration": 0.862
223 | },
224 | "ui/panel_expand": {
225 | "src": "ui/panel_expand.ef3ca39.mp3",
226 | "duration": 0.862
227 | },
228 | "ui/pop_close": {
229 | "src": "ui/pop_close.1f2dc35.mp3",
230 | "duration": 0.809796
231 | },
232 | "ui/pop_open": {
233 | "src": "ui/pop_open.360c640.mp3",
234 | "duration": 0.835918
235 | },
236 | "ui/popup_close": {
237 | "src": "ui/popup_close.1bd2a1b.mp3",
238 | "duration": 1.071
239 | },
240 | "ui/popup_open": {
241 | "src": "ui/popup_open.97597a8.mp3",
242 | "duration": 1.071
243 | },
244 | "ui/radio_select": {
245 | "src": "ui/radio_select.4fbe4e3.mp3",
246 | "duration": 0.862
247 | },
248 | "ui/send": {
249 | "src": "ui/send.396090f.mp3",
250 | "duration": 0.182857
251 | },
252 | "ui/submit": {
253 | "src": "ui/submit.1e228b1.mp3",
254 | "duration": 0.548563
255 | },
256 | "ui/success_bling": {
257 | "src": "ui/success_bling.3f44a2f.mp3",
258 | "duration": 0.809796
259 | },
260 | "ui/success_blip": {
261 | "src": "ui/success_blip.911b304.mp3",
262 | "duration": 0.626939
263 | },
264 | "ui/success_chime": {
265 | "src": "ui/success_chime.436ed4a.mp3",
266 | "duration": 1.619592
267 | },
268 | "ui/tab_close": {
269 | "src": "ui/tab_close.3c1a646.mp3",
270 | "duration": 0.548563
271 | },
272 | "ui/tab_open": {
273 | "src": "ui/tab_open.3745bcd.mp3",
274 | "duration": 0.548563
275 | },
276 | "ui/toggle_off": {
277 | "src": "ui/toggle_off.7103845.mp3",
278 | "duration": 0.261224
279 | },
280 | "ui/toggle_on": {
281 | "src": "ui/toggle_on.2f87bf7.mp3",
282 | "duration": 0.287347
283 | },
284 | "ui/window_close": {
285 | "src": "ui/window_close.0e958da.mp3",
286 | "duration": 0.548563
287 | },
288 | "ui/window_open": {
289 | "src": "ui/window_open.7478756.mp3",
290 | "duration": 0.548563
291 | }
292 | }
293 | }
--------------------------------------------------------------------------------
/website/src/components/AdvancedSoundDemo.tsx:
--------------------------------------------------------------------------------
1 | import CodeBlock from "@/components/CodeBlock";
2 | import React, { useState } from "react";
3 | import { LibrarySoundName, useSound } from "react-sounds";
4 | import SoundSelector from "./SoundSelector";
5 |
6 | interface SoundButtonProps {
7 | soundName: LibrarySoundName;
8 | label: string;
9 | }
10 |
11 | interface CategorySoundButtonProps {
12 | sound: LibrarySoundName;
13 | }
14 |
15 | interface Category {
16 | name: string;
17 | description: string;
18 | sounds: LibrarySoundName[];
19 | }
20 |
21 | // Enhanced sound demo component with more interactive features
22 | const AdvancedSoundDemo: React.FC = () => {
23 | return (
24 |
99 |
149 |
150 | {/* Features Section */}
151 | 100 | Add Sound Effects to Your React Apps Effortlessly 101 |
102 |
103 | react-sounds provides a library of ready-to-play
104 | sound effects with a simple API, lazy loading, and offline support.
105 |
106 |
120 | MIT License
121 |
122 |
124 |
133 | Get Started
134 |
135 |
141 | View on GitHub
142 |
143 |
144 | {/* Quick Install Snippet */}
145 |
146 | npm install react-sounds howler
147 |
148 |
152 |
159 |
160 | {/* Enhanced Demo Section */}
161 | Key Features
153 |
154 | {features.map((feature, index) => (
155 |
158 |
162 |
164 |
165 | {/* Call to action before footer */}
166 |
167 |
192 | Ready to add sounds?
168 |Check out the documentation or install the library now.
169 |
170 |
174 | Read the Docs
175 |
176 |
180 | Browse Sounds
181 |
182 |
188 | View on GitHub
189 |
190 |
191 |
25 |
37 | );
38 | };
39 |
40 | // Simple sound buttons section
41 | const BasicSoundButtons: React.FC = () => {
42 | return (
43 | Interactive Sound Demo
26 | 27 |
28 |
31 |
32 |
33 |
36 | Sound Effects Categories
34 |
44 |
53 | {`import { useSound } from 'react-sounds';
54 |
55 | function Button() {
56 | const { play } = useSound('ui/button_1');
57 | return ;
58 | }`}
59 |
60 |
61 | );
62 | };
63 |
64 | // Simple button component that plays a sound
65 | const SoundButton: React.FCBasic Usage
45 |Click the buttons to hear different sound effects.
46 |
47 |
52 |
93 |
174 | );
175 | };
176 |
177 | // Sound categories showcase
178 | const SoundCategories: React.FC = () => {
179 | const categories: Category[] = [
180 | {
181 | name: "Notification Sounds",
182 | description: "Ideal for alerts, confirmations, and system events",
183 | sounds: ["notification/info", "notification/popup", "notification/success", "notification/error"],
184 | },
185 | {
186 | name: "Game Sounds",
187 | description: "Great for achievements, collectibles, and game events",
188 | sounds: ["game/coin", "game/void", "game/hit", "game/miss"],
189 | },
190 | {
191 | name: "UI Sounds",
192 | description: "Perfect for buttons, toggles, and interface interactions",
193 | sounds: ["ui/blocked", "ui/button_medium", "ui/panel_expand", "ui/panel_collapse"],
194 | },
195 | ];
196 |
197 | return (
198 | Advanced Controls
94 |Try adjusting these parameters before playing the sound.
95 | 96 |
97 |
138 |
139 |
98 |
99 | setVolume(parseFloat(e.target.value))}
106 | className="w-full h-2 bg-blue-100 rounded-lg appearance-none cursor-pointer"
107 | />
108 |
109 |
110 |
111 |
112 | setRate(parseFloat(e.target.value))}
119 | className="w-full h-2 bg-blue-100 rounded-lg appearance-none cursor-pointer"
120 | />
121 |
122 |
123 |
126 | setLoop(e.target.checked)}
131 | className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
132 | />
133 |
136 |
137 |
140 |
147 |
154 |
161 |
168 |
169 |
170 |
171 | Status: {isLoaded ? "Loaded" : "Loading"}, {isPlaying ? "Playing" : "Stopped"}
172 |
173 |
199 | {categories.map((category, index) => (
200 |
211 | );
212 | };
213 |
214 | // Category sound button with name display
215 | const CategorySoundButton: React.FC
201 |
209 | ))}
210 | {category.name}
202 |{category.description}
203 |
204 | {category.sounds.map((sound, idx) => (
205 |
208 |
30 |
47 |
54 |
55 | {/* Key Features */}
56 |
57 |
85 |
86 | {/* Installation */}
87 |
88 |
91 | {`npm install react-sounds howler
92 | # or
93 | yarn add react-sounds howler`}
94 |
95 |
108 |
109 | {/* Basic Usage */}
110 |
111 |
114 | Playing a Sound with the
116 |
121 | {`import { useSound } from 'react-sounds';
122 |
123 | function Button() {
124 | const { play } = useSound('ui/button_1');
125 |
126 | return (
127 |
130 | );
131 | }`}
132 |
133 |
134 |
137 | {`import { useSound } from 'react-sounds';
138 | import customClickSound from '../assets/sounds/click.mp3';
139 |
140 | function Button() {
141 | // Use a custom sound file by requiring it
142 | const { play } = useSound(customClickSound);
143 |
144 | return (
145 |
148 | );
149 | }`}
150 |
151 |
152 |
153 | Direct Sound Playing with
155 |
157 | {`import { playSound } from 'react-sounds';
158 | import customSound from '../assets/sounds/notification.mp3';
159 |
160 | function Button() {
161 | // You can use built-in sounds
162 | const handleClick = () => playSound('ui/button_1');
163 |
164 | // Or your own custom sounds
165 | const handleCustomSound = () => playSound(customSound);
166 |
167 | return (
168 |
179 |
180 |
181 | Setup with
183 |
189 | {`import { SoundProvider } from 'react-sounds';
190 | import customSound from '../assets/sounds/startup.mp3';
191 |
192 | function App() {
193 | return (
194 |
200 |
202 | );
203 | }`}
204 |
205 |
206 |
207 | {/* Core API */}
208 |
209 |
212 | The
214 |
219 | {`import { useSound } from 'react-sounds';
220 | import customSound from '../assets/sounds/custom.mp3';
221 |
222 | function SoundPlayer() {
223 | // Using a built-in sound
224 | const {
225 | play, // Function to play the sound
226 | stop, // Function to stop the sound
227 | pause, // Function to pause the sound
228 | resume, // Function to resume a paused sound
229 | isPlaying, // Boolean indicating if sound is currently playing
230 | isLoaded, // Boolean indicating if sound has been loaded
231 | } = useSound('ui/button_1');
232 |
233 | // Using a custom sound file with options
234 | const { play: playCustom } = useSound(customSound, {
235 | volume: 0.8,
236 | rate: 1.2,
237 | loop: false
238 | });
239 |
240 | return (
241 |
251 |
252 |
255 | {`import { Sound, SoundButton, SoundProvider } from 'react-sounds';
256 |
257 | // Component that plays a sound on mount, unmount, or manually
258 | function NotificationBanner() {
259 | return (
260 | console.log('Sound loaded')}
265 | onPlay={() => console.log('Sound playing')}
266 | onStop={() => console.log('Sound stopped')}
267 | onError={(error) => console.error('Sound error:', error)}
268 | >
269 |
271 | );
272 | }
273 |
274 | import customNotification from '../assets/sounds/notification.mp3';
275 |
276 | // Button that plays a sound when clicked
277 | function ActionButton({ onClick }) {
278 | return (
279 | console.error('Sound error:', error)}
284 | >
285 | Action Button
286 |
287 | );
288 | }`}
289 |
290 |
291 |
294 | {`import { useSoundOnChange, useSoundEnabled } from 'react-sounds';
295 |
296 | // Play a sound when a value changes
297 | function Counter() {
298 | const [count, setCount] = useState(0);
299 |
300 | // Play a sound whenever count changes
301 | useSoundOnChange('ui/increment', count, { volume: 0.5 });
302 |
303 | return (
304 |
307 | );
308 | }
309 |
310 | // Access and control the global sound enabled state
311 | function SoundToggle() {
312 | // Must be used within a SoundProvider
313 | const [enabled, setEnabled] = useSoundEnabled();
314 |
315 | return (
316 |
319 | );
320 | }`}
321 |
322 |
323 |
324 | {/* Advanced Usage */}
325 |
326 |
334 | {`import { setCDNUrl, getCDNUrl } from 'react-sounds';
335 |
336 | // Set a custom CDN base URL for built-in sounds
337 | setCDNUrl('https://your-cdn.com/sounds');
338 |
339 | // Get the current CDN URL
340 | const currentUrl = getCDNUrl();`}
341 |
342 |
343 |
348 | {`import { setSoundEnabled, isSoundEnabled } from 'react-sounds';
349 |
350 | // Check if sounds are enabled
351 | const enabled = isSoundEnabled();
352 |
353 | // Disable all sounds
354 | setSoundEnabled(false);
355 |
356 | // Re-enable sounds
357 | setSoundEnabled(true);`}
358 |
359 |
360 |
363 | {`import { preloadSounds } from 'react-sounds';
364 | import customSound from '../assets/sounds/custom.mp3';
365 |
366 | // Preload multiple sounds at once (both built-in and custom)
367 | preloadSounds(['ui/button_1', 'notification/success', customSound])
368 | .then(() => console.log('All sounds preloaded'))
369 | .catch((error) => console.error('Error preloading sounds:', error));`}
370 |
371 |
372 |
375 | {`import { useSound, playSound, SoundOptions } from 'react-sounds';
376 | import customExplosion from '../assets/sounds/explosion.mp3';
377 |
378 | // SoundOptions interface:
379 | // {
380 | // volume?: number; // 0.0 to 1.0
381 | // rate?: number; // playback speed (1.0 is normal)
382 | // loop?: boolean; // whether to loop the sound
383 | // }
384 |
385 | function SoundPlayer() {
386 | const { play } = useSound(customExplosion);
387 |
388 | const playWithOptions = () => {
389 | // Play with custom options
390 | play({
391 | volume: 0.8, // 80% volume
392 | rate: 1.2, // 20% faster
393 | loop: false // don't loop
394 | });
395 |
396 | // Direct play with options
397 | playSound('ui/click', { volume: 0.5 });
398 | };
399 |
400 | return ;
401 | }`}
402 |
403 |
404 |
409 | {`# List all available sounds
410 | npx react-sounds-cli list
411 |
412 | # Download specific sounds for offline use
413 | npx react-sounds-cli pick ui/click notification/success
414 |
415 | # Download sounds to a custom directory
416 | npx react-sounds-cli pick ui/click --output=./public/sounds`}
417 |
418 |
419 |
420 | {/* Type Information */}
421 |
422 |
430 | {`import type {
431 | LibrarySoundName, // Union of all built-in sound categories
432 | UiSoundName, // UI sounds (clicks, toggles, etc.)
433 | GameSoundName, // Game sounds (achievements, actions, etc.)
434 | NotificationSoundName // Notification sounds (alerts, success, etc.)
435 | } from 'react-sounds';
436 | import customSound from '../assets/sounds/custom.mp3';
437 |
438 | // Using with type safety
439 | function PlaySounds() {
440 | // For built-in sounds, use the type for type checking
441 | const playUiSound = (sound: UiSoundName) => playSound(sound);
442 |
443 | // For custom sounds, just import and use directly
444 | const playCustomSound = () => playSound(customSound);
445 |
446 | return (
447 |
454 |
455 |
461 | {`import type { SoundHookReturn } from 'react-sounds';
462 |
463 | // SoundHookReturn contains:
464 | // {
465 | // play: (options?: SoundOptions) => Promise | undefined;
466 | // stop: () => void;
467 | // pause: () => void;
468 | // resume: () => void;
469 | // isPlaying: boolean;
470 | // isLoaded: boolean;
471 | // }`}
472 |
473 |
474 |
475 | );
476 | };
477 |
478 | export default DocumentationPage;
479 |
--------------------------------------------------------------------------------
/website/src/pages/SoundLibraryPage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useMemo, useState } from "react";
2 | import { fetchSoundBlob, LibrarySoundName, useSound } from "react-sounds";
3 | import manifest from "../manifest.json";
4 | import { cn } from "../utils/cn";
5 |
6 | // Number of items per page
7 | const ITEMS_PER_PAGE = 30;
8 |
9 | // Color palette for categories
10 | const CATEGORY_COLORS = [
11 | { bg: "bg-blue-100", text: "text-blue-800" },
12 | { bg: "bg-green-100", text: "text-green-800" },
13 | { bg: "bg-purple-100", text: "text-purple-800" },
14 | { bg: "bg-pink-100", text: "text-pink-800" },
15 | { bg: "bg-yellow-100", text: "text-yellow-800" },
16 | { bg: "bg-red-100", text: "text-red-800" },
17 | { bg: "bg-indigo-100", text: "text-indigo-800" },
18 | { bg: "bg-orange-100", text: "text-orange-800" },
19 | { bg: "bg-teal-100", text: "text-teal-800" },
20 | { bg: "bg-gray-100", text: "text-gray-800" },
21 | ];
22 |
23 | interface CategoryColor {
24 | bg: string;
25 | text: string;
26 | }
27 |
28 | // Get consistent color for a category
29 | const getCategoryColor = (category: string): CategoryColor => {
30 | // Use the sum of character codes as a simple hash
31 | const hash = category.split("").reduce((sum, char) => sum + char.charCodeAt(0), 0);
32 | // Get a consistent index from the hash
33 | const colorIndex = hash % CATEGORY_COLORS.length;
34 | return CATEGORY_COLORS[colorIndex];
35 | };
36 |
37 | // Extract categories from manifest
38 | const extractCategories = (): string[] => {
39 | const categories = new Set
31 |
44 |
45 | {/* Introduction */}
46 | Documentation
32 | 43 |Introduction
48 |
49 | react-sounds provides a library of
50 | ready-to-play sound effects for your React applications, designed to be lightweight, easy to use, and
51 | flexible. It's built on top of Howler.js and provides a simple API for playing sounds in your React apps.
52 |
Key Features
58 |-
59 |
- 60 | 🔊 Extensive Sound Library: Organized by category (ui, notification, game, etc.). 61 | 62 |
- 63 | 🎵 Custom Sounds: Use your own sound files by requiring them directly. 64 | 65 |
- 66 | 🪶 Lightweight: Only JS wrappers included; audio files hosted on CDN. 67 | 68 |
- 69 | 🔄 Lazy Loading: Sounds fetched only when needed. 70 | 71 |
- 72 | 📦 Offline Support: Local sound files with automatic fallback to CDN. 73 | 74 |
- 75 | 🎯 Simple API: Easy-to-use hooks and components. 76 | 77 |
- 78 | 💾 Persistent Settings: Sound preferences saved to localStorage. 79 | 80 |
- 81 | 🎮 Controls: Play, pause, resume and stop with sound state management. 82 | 83 |
Installation
89 |Install the library and its peer dependency, Howler.js:
90 |96 | Note:{" "} 97 | 103 | Howler.js 104 | {" "} 105 | is a required peer dependency. 106 |
107 |Basic Usage
112 | 113 |
114 | Playing a Sound with the useSound Hook
115 |
116 |
117 | The useSound hook is the primary way to
118 | interact with sounds.
119 |
Using Custom Sound Files
135 |You can use your own custom sound files by requiring them directly:
136 |
153 | Direct Sound Playing with playSound
154 |
155 | For simple, one-off sound playback without needing state or controls.
156 |
169 |
172 |
175 |
176 | );
177 | }`}
178 |
181 | Setup with SoundProvider
182 |
183 |
184 | For best results, wrap your application with the{" "}
185 | SoundProvider component. This allows control
186 | of sound enabled state, preloads sounds, and establishes the sound context.
187 |
Core API
210 | 211 |
212 | The useSound Hook
213 |
214 |
215 | The useSound hook provides full control over
216 | sound playback. It works with both built-in sound names and custom sound files.
217 |
242 |
243 |
244 |
245 |
246 |
247 |
248 | );
249 | }`}
250 | React Components
253 |For declarative sound playback within your components.
254 |Notification Banner
270 | Utility Hooks
292 |Additional hooks for specific sound use cases.
293 |Advanced Usage
327 | 328 |Configuring CDN URL
329 |330 | Configure where built-in sound files are loaded from. Note: This doesn't affect custom sound files that you 331 | import directly. 332 |
333 |Sound Enabling/Disabling
344 |345 | Globally enable or disable all sounds. The setting is automatically persisted in localStorage. 346 |
347 |Preloading Sounds
361 |Preload sounds to ensure they are ready for immediate playback.
362 |Custom Sound Options
373 |Customize sound playback with various options.
374 |CLI Tool for Offline Sounds
405 |406 | Use the CLI tool to download sounds for offline use or explore available sounds. 407 |
408 |TypeScript Support
423 |424 | react-sounds provides TypeScript definitions for all exported functions, hooks, components, and types. 425 |
426 | 427 |Sound Types
428 |Sounds can be either built-in sound names or custom imported sound files.
429 |
448 |
449 |
450 |
451 | );
452 | }`}
453 | Sound Hook Return Type
456 |
457 | Type definition for what useSound hook
458 | returns.
459 |
108 | {/* Card header with category and duration */}
109 |
276 | );
277 | };
278 |
279 | const SoundLibraryPage: React.FC = () => {
280 | const [searchTerm, setSearchTerm] = useState("");
281 | const [selectedCategory, setSelectedCategory] = useState("");
282 | const [currentPage, setCurrentPage] = useState(1);
283 |
284 | const categories = useMemo(() => extractCategories(), []);
285 |
286 | // Filter sounds based on search and category
287 | const filteredSounds = useMemo(() => {
288 | return Object.entries(manifest.sounds).filter(([soundKey]) => {
289 | const matchesSearch = searchTerm === "" || soundKey.toLowerCase().includes(searchTerm.toLowerCase());
290 |
291 | const matchesCategory = selectedCategory === "" || soundKey.startsWith(selectedCategory + "/");
292 |
293 | return matchesSearch && matchesCategory;
294 | });
295 | }, [searchTerm, selectedCategory]);
296 |
297 | // Calculate pagination
298 | const totalPages = Math.ceil(filteredSounds.length / ITEMS_PER_PAGE);
299 | const paginatedSounds = filteredSounds.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
300 |
301 | // Reset to first page when filters change
302 | useEffect(() => {
303 | setCurrentPage(1);
304 | }, [searchTerm, selectedCategory]);
305 |
306 | return (
307 |
110 |
111 | {category[0].toUpperCase() + category.slice(1)}
112 |
113 |
131 |
132 | {/* Sound name and play button */}
133 |
114 |
128 | {metadata.duration.toFixed(2)}s
129 |
130 |
134 |
215 |
216 | {/* Sound path with copy to clipboard */}
217 | {displayName?.replace(/_/g, " ")}
135 | 136 |
137 |
213 |
214 |
218 |
275 |
219 | {soundKey}
220 |
221 |
222 |
245 |
273 |
274 |
308 |
576 | );
577 | };
578 |
579 | export default SoundLibraryPage;
580 |
--------------------------------------------------------------------------------
Sound Library
309 | 310 | {/* Search and filters */} 311 |
312 |
375 |
376 | {/* Results stats */}
377 |
313 | {/* Search input */}
314 |
374 |
315 |
318 |
339 |
340 | {/* Category filter */}
341 |
319 |
338 |
320 |
328 |
329 | setSearchTerm(e.target.value)}
335 | className="pl-10 py-2 block w-full border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
336 | />
337 |
342 |
356 |
372 |
373 |
378 |
432 |
433 | {/* Sound grid */}
434 | {paginatedSounds.length > 0 ? (
435 | 379 | Showing {paginatedSounds.length} of {filteredSounds.length} sounds 380 | {selectedCategory && ( 381 | 388 | {selectedCategory[0].toUpperCase() + selectedCategory.slice(1)} 389 | 390 | )} 391 |
392 | 393 | {/* Pagination controls */} 394 | {totalPages > 1 && ( 395 |
396 |
411 |
412 | Page {currentPage} of {totalPages}
413 |
414 |
429 |
430 | )}
431 |
436 | {paginatedSounds.map(([soundKey, metadata]) => (
437 |
440 | ) : (
441 |
442 |
456 |
459 | )}
460 |
461 | {/* Pagination (bottom) */}
462 | {totalPages > 1 && (
463 | No sounds found
457 |Try adjusting your search or filter to find what you're looking for.
458 |
464 |
573 |
574 | )}
575 |