@clxrity/react-audio
Version:
An audio package for React
592 lines (421 loc) • 20.3 kB
Markdown
# Changelog
## 3.0.2
### Patch Changes
- aaa0719: Fixed components and hooks to correctly utilize the audio reference for playback and analysis.
- Updated **Player** component to ensure it uses the audio ref properly for playback control.
- Updated **useAudioAnalyser** hook to ensure it correctly accesses the audio element for analysis.
- Updated **Waveform** component to ensure it uses the audio ref for waveform rendering.
- 0fac93a: Fixed the style of the progress input bar
- f8eedaa: Added sub components section within documentation for pages for each component
- cbe9ae1: Added homepage
## 3.1.0
### Minor Changes
- 836e785: Finished mono-repo move
### Patch Changes
- 87f8047: - Updated documentation to include changelog
- Created `prebuild` script to copy the changelog to the docs
- Updated `README.md` to include changelog link
- 1bedd1f: Re-wrote [CONTRIBUTING.md](https://github.com/clxrityy/react-audio/blob/main/CONTRIBUTING.md) to encapsulate the new structure of the repository and the development workflow.
## 3.0.0
### Major Changes
- Switched structure to a [turborepo](https://turbo.build/repo/docs) structure.
- The main package is now in the `packages/main` directory.
- The documentation is now in the `packages/docs` directory.
- The documentation is now built with [Next.js](https://nextjs.org/) & [nextra](https://nextra.site/).
- The package is now built with [tsup](https://tsup.dev/) instead of [vite](https://vitejs.dev/).
- Refactored the build process to use `tsup` for building the package.
- Removed many unnecessary dependencies that were used for the previous build process.
- Additional utility packages (pre-included by turbo) are utilized thourghout the codebase:
- `@repo/typescript-config` - Shared TypeScript configurations
- `@repo/eslint-config` - Shared ESLint configurations
## 2.5.1
### Patch Changes
- 04149cb: fix docs favicon
## 2.5.0
### Minor Changes
- 4ce0d12: Add eslint
- 79bad00: Add sitemap
- Created `scripts/generate-sitemap.cjs` that runs after building the docs
- Utilizes `ladle`'s `meta.json` to get the routes
- fc5d270: add SECURITY.md
- 8f4fc86: add CODE_OF_CONDUCT.md
- fb89952: add vscode extension recommendations
- b90bc02: add robots.txt
- 75fd845: update node version 23.6.0 -> 23.6.1
- 1ab91ae: add CONTRIBUTING.md
- 1574dd6: add code coverage
### Patch Changes
- 5ca96a9: changed prettier tab width to 2
- 624ed09: fix all eslint errors
- dfadccd: Fix play/pause button for autoplay
- 226e7d6: Remove @mui packages - replace with lucide-react for icons
- eae2ee1: remove unnecessary props from Spectrogram (realTime & logarithmicScale)
## 2.4.0
### Minor Changes
- 96b7a45: Add `<Oscillator />` component
This produces periodic signal with the type of wave specified by the `type` ([`OscillatorType`](https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode/type)) prop. The component is a wrapper around the Web Audio API's [`OscillatorNode`](https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode).
You must pass the `isPlaying` boolean prop to start and stop the oscillator.
### Parameters
| Param | Type | Description | Default | Required |
| ----------------- | ----------------------------- | ---------------------------------------- | -------- | -------- |
| type | `OscillatorType` | The type of wave to produce | `'sine'` | ❌ |
| isPlaying | `boolean` | Whether the oscillator should be playing | `false` | ✅ |
| frequency | `number` | The frequency of the oscillator in hertz | `440` | ❌ |
| gain | `number` | The gain of the oscillator | `0.5` | ❌ |
| onFrequencyChange | `(frequency: number) => void` | Callback when the frequency changes | N/A | ❌ |
| onGainChange | `(gain: number) => void` | Callback when the gain changes | N/A | ❌ |
#### Example with Next.js
```tsx
"use client";
import { Oscillator, type OscillatorProps } from "@clxrity/react-audio";
export default function Home() {
const [isPlaying, setIsPlaying] = useState(false);
return (
<div>
<button onClick={() => setIsPlaying(!isPlaying)}>
{isPlaying ? "Stop" : "Start"}
</button>
<Oscillator type="sine" isPlaying={isPlaying} />
</div>
);
}
```
### Patch Changes
- 72089dd: Fix development environment to support the latest version of pnpm
## 2.2.1
### Patch Changes
- 6959472: fix spectrogram
## 2.2.0
### Minor Changes
- 13b68de: Add the `<Spectrogram />` component.
#### Parameters
| Param | Type | Description | Default | Required |
| --------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- |
| track | `Track` | The track to display the spectrogram of. | N/A | ✅ |
| fftSize | `FFTSize` | The size of the FFT to use. | `1024` | ❌ |
| width | `number`/`string` | The width of the spectrogram. | `100%` | ❌ |
| height | `number`/`string` | The height of the spectrogram. | `25%` | ❌ |
| minDecibels | `number` | The minimum decibels to display. | `-100` | ❌ |
| maxDecibels | `number` | The maximum decibels to display. | `-30` | ❌ |
| colorMap | `Array<string>` | The color map to use. | `["#000000", "#ff0000", "#ffff00", "#ffffff"]` | ❌ |
| smoothingTimeConstant | `number` | The smoothing time constant to use. | `0.8` | ❌ |
| realTime | `boolean` | Whether to display the spectrogram in real time. | `true` | ❌ |
| logarithmicScale | `boolean` | Whether to use a logarithmic scale. | `true` | ❌ |
| onFrameUpdate | `Function` | A callback to be called when a new frame is available. Accepts a data array (`Uint8Array`) as a parameter. | N/A | ❌ |
| loop | `boolean` | Whether to loop the audio. | `false` | ❌ |
| fillStyle | `string` | The background fill of the canvas | `#000000` | ❌ |
#### Example
```tsx
<Spectrogram
track={track}
fftSize={1024}
width={500}
height={300}
minDecibels={-100}
maxDecibels={-30}
colorMap={["#000000", "#ff0000", "#ffff00", "#ffffff"]}
smoothingTimeConstant={0.8}
realTime={true}
logarithmicScale={true}
onFrameUpdate={() => {}}
loop={true}
fillStyle="rgba(0, 0, 0, 0.5)"
/>
```
- 9540893: Update dependencies
## 2.1.0
### Minor Changes
- 910a28d: Add a **border** prop to ShufflePlayer
- ed9308c: Add more stories for `<ShufflePlayer />`
- **Dont show tracks** - Example not displaying the track information
- **Custom color** - Example of changing the color of the player
- **Custom border** - Example of changing the border of the player
- c802826: Add some development dependencies to optimize the visibility of the docs, make the default mode dark.
**New Dependencies:**
- [`baseui`](https://github.com/uber/baseweb#readme)
- [`styletron-react`](https://www.npmjs.com/package/styletron-react)
- [`styletron-engine-monolithic`](https://www.npmjs.com/package/styletron-engine-monolithic)
**Changes:**
```mjs
// .ladle/config.mjs
/** @type {import('@ladle/react').UserConfig} */
export default {
// ...
addons: {
// ...
theme: {
enabled: true,
defaultState: "dark",
},
},
};
```
```tsx
// .ladle/components.tsx
import { Provider as StyletronProvider } from "styletron-react";
import { Client as Styletron } from "styletron-engine-monolithic";
import { LightTheme, DarkTheme, BaseProvider } from "baseui";
import type { GlobalProvider } from "@ladle/react";
const engine = new Styletron();
export const Provider: GlobalProvider = ({ children, globalState }) => (
<StyletronProvider value={engine}>
<BaseProvider
theme={{
...(globalState.theme === "dark" ? DarkTheme : LightTheme),
direction: globalState.rtl ? "rtl" : "ltr",
}}
>
<div className="docs-container">
<div className="docs-main">{children}</div>
</div>
</BaseProvider>
</StyletronProvider>
);
```
- 1f6297b: Update **ShufflePlayer** props to include showTracks which can optionally hide the display of all the tracks
### Patch Changes
- 218df0a: Fix docs output (default story, output directory)
- 11ec0e2: Add a script to run after building the documentation to fix the metadata.
Before, the `<link />` tags were being generated with the wrong `href` attribute. This script will fix the `href` attribute to point to the correct location.
- The `href` attribute was being generated as `/assets/...` instead of `./assets/...`
```json
{
"scripts": {
"build:ladle": "ladle build && node scripts/docs-postbuild.cjs"
}
}
```
```cjs
const fs = require("fs");
const path = require("path");
const indexPath = path.join(__dirname, "../docs", "index.html");
fs.readFile(indexPath, "utf8", (err, data) => {
if (err) {
console.error("Error reading index.html", err);
process.exit(1);
}
// Replace absolute asset paths with relative ones (e.g., '/assets' to './assets')
let updatedData = data
.replace(/href="\/assets/g, 'href="./assets')
.replace(/src="\/assets/g, 'src="./assets');
updatedData = updatedData.replace(
/<meta name="dscription"[^>]*>/,
'<meta name="description" content="A collection of audio components for React applications" />',
);
updatedData = updatedData.replace(/<link rel="icon"[^>]*>/, "");
updatedData = updatedData.replace(/<link rel="apple-touch-icon"[^>]*>/, "");
updatedData = updatedData.replace(/<link rel="manifest"[^>]*>/, "");
updatedData = updatedData.replace(/<title>Ladle<\/title>/, "");
fs.writeFile(indexPath, updatedData, "utf-8", (err) => {
if (err) {
console.error("Error writing index.html", err);
process.exit(1);
} else {
console.log("index.html updated successfully");
}
});
});
```
## 2.0.2
### Patch Changes
- 4853714: Fix the ability to import the package's css file.
Before it was bundling into `dist/src/index.css` which was not being imported correctly.
Upon trying to fix it, it would bundle as `react-audio.css` which was not the desired output.
- Altered `vite.config.ts` to output the css to `dist/index.css`
- Added a custom `rename-css-plugin` to vite plugins:
```ts
import { UserConfigExport } from "vite";
import { renameSync } from "fs"; // NEW
import path from "path";
import { defineConfig } from "vitest/config";
// ...
const app = async (): Promise<UserConfigExport> => {
return defineConfig({
plugins: [
//.. prev plugins,
{
name: "rename-css-plugin",
closeBundle() {
const oldPath = path.resolve(__dirname, "dist/react-audio.css");
const newPath = path.resolve(__dirname, "dist/index.css");
try {
renameSync(oldPath, newPath); // FIX
} catch (error) {
console.error(error);
}
},
},
],
});
};
```
- Also added a way to import within css by updating `css.preprocessorOptions` in `vite.config.ts`:
```ts
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@clxrity/react-audio/index.css";`;
}
}
}
```
You can now import within your css file like so:
```css
@import "@clxrity/react-audio/index.css";
```
And within your js/ts file like so:
```ts
import "@clxrity/react-audio/index.css";
```
## 2.0.0
### Major Changes
- b82ecec: - Switched from [storybook](https://storybook.js.org/) to [ladle](https://ladle.dev/) - Much more lightweight and faster - A lot more of a simple UI to work with
- Text and colors are automatically inherited by the theme.
- Dark background = white text
- Light background = black text
- Components in new working new version so far:
- `<Player />` - Replaces `<JustPlayer />` & `<AudioPlayer />`
- `<ShufflePlayer />` - Replaces `<LibraryPlayer />`
- `<Waveform />`
Working structure:
```yaml
~:
__tests__/: # Tests with vitest
.changeset/: # Changeset version management
.github/: # Github workflows
.ladle/: # Ladle setup for documenation
docs/: # Output from ladle for github pages
public/: # Public static directory
src/:
components/ui/: # Reusable UI components
hooks/: # Reusable hooks
lib/: # The package exports
- ...
- index.ts # Main entry point
stories/: # Ladle stories
util/: # Utility functions
- config.ts # Default configurations
- index.css # Global CSS
...
```
- 22f001e: - Update all dependencies
- Begin restructuring code
- Switch to Vite
- Switch from styled components to tailwind
- Add new logo
- Add new landing page
- Add new documentation
- Add new examples
- Add new audio player
### Minor Changes
- e8d4166: update all packages to latest version
- 149e841: Added the Player component which will replace JustPlayer & AudioPlayer into one component (with props for customization)
- e155be4: add functionality to EQ & volume knobs (**AudioInputVisualizer**)
- 6f1c415: Added a code coverage workflow that indicates whether all [`vitest`](https://vitest.dev/) tests are passing.
- Utilizes [Codecov](https://about.codecov.io/) to provide an interactive UI for test coverage.
- Added an environment variable `CODECOV_TOKEN` to the repository's secrets and local `.env` file.
- Added a new script `npm run coverage` to generate and upload the coverage report.
- 8172042: added the Waveform component, working perfectly. might need some style tweaks and configurations down the road
- f1a1c48: Add a new \***\*tests\*\*** directory to contain public tests
- f102a1f: Finished the Player component with a progress bar, autoplay feature, ability to disable progress bar and track info display
## 1.7.0
### Minor Changes
- f5abd36: added **AudioUploader** functional with no UI display yet
- d89e093: add **resize()** function to **Waveform**'s canvas if no size prop is present
- 23839c0: **AudioInputVisualizer** works fully functional
- ba70a93: began **AudioInput** component where you can input audio mic/guitar
- bb9f2b5: added prop to **Waveform** & **AudioInputVisualizer**: fftsize
### Patch Changes
- be63b43: re-added imports for libraryplayer & librarytrackitem
## 1.6.0
### Minor Changes
- 9ba3169: update props setup, all now have specific inherited props
- 0422a54: update storybook
### Patch Changes
- ad13785: fix imports and props passing on
## 1.5.0
### Minor Changes
- dbc2980: add docs
- 7d930b0: add nextjs app to docs
- e56a5f9: added a script that generates an api route for creating a waveform image
## 1.4.0
### Minor Changes
- 832989e: added jest, testing ffmpeg features to create waveforms
- f7f4d6f: restructure files (exports in src/lib/)
### Patch Changes
- c650b27: make all exports default
- 610d33d: fixed jest interfering with rollup build
- 3a33cf0: ability to change color in waveforms actually works now
## 1.3.0
### Minor Changes
- 48caa05: change styled-components to devDependency
- 7560f63: update packages
- 0dff7df: add **showTrackInfo** prop to **Waveform**
### Patch Changes
- aa2aaa1: remove tailwindcss dependency
- 3bd6fe5: fix progress bar on waveform
## 0.14.0
### Minor Changes
- cd32bde: more styling updates to library
- 2061b0b: update readme
- 596d485: add other components to **Waveform**
- e95dde9: updated styles for **AudioPlayer** (removed unused thumbnail)
### Patch Changes
- cb432a6: **Waveform** is functional, no errors, need to add other component parts
- 8ef7746: waveform now works
- ce890a9: fix dom errors
## 0.13.0
### Minor Changes
- 1659bd6: begin **Waveform** component, existing error: "Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode."
- fdf559b: style updates to library player
## 0.11.0
### Minor Changes
- 39ed441: add loading states to every component
### Patch Changes
- 7a5aca2: fix error "rounded is not defined" prop with **Button**
## 0.10.0
### Minor Changes
- c1c9610: removed **AudioPlayer** for now
- 9bb0c8d: added (begun) **`<AudioPlayer />`**
### Patch Changes
- 8cd2ac2: fix "Audio is not defined" error in **`<JustPlayer />`**
- 4af6757: fix **JustPlayer**: no more useEffect issue
- 213a90c: fixed "variant" unknown prop in **`<Button /`>**, will find better ways to update styles and theming
## 0.9.0
### Minor Changes
- 4f368d5: **AudioLibrary** is fully functional and styled nicely for now, updated readme & package.json
- 1f5711c: change library component to **AudioLibrary** with states and styles inside
## 0.8.0
### Minor Changes
- 469f488: add / begin `<LibraryPlayer />` component
- aec2e66: add styled-components
### Patch Changes
- 60d76fd: `<LibraryPlayer />` now works (somewhat)
## 0.7.0
### Minor Changes
- 62c85bf: update packages
### Patch Changes
- 443185b: `<JustPlayer />` now works (plays audio)
## 0.6.0
### Minor Changes
- 6e7d46f: updated visuals to `<AudioPlayer />`, began `<JustPlayer />`
## 0.5.0
### Minor Changes
- 3dc1f94: add background color param
- df5f580: add license and npmignore
### Patch Changes
- fc106f5: it works now
- df5f580: make changeset a dev dependency
## 0.4.0
### Minor Changes
- d184bff: made component export & import into applications properly, `<AudioPlayer />` component is now (semi) functional and visible
- f5c0d15: structuring `AudioPlayer` component. began exporting compatible types for the (optional) options (styling so far)
## 0.3.0
### Minor Changes
- af6c419: test tailwindcss
- 7cacb07: begin functionality of audio component
### Patch Changes
- 7cacb07: change name of `Player` to `AudioPlayer`
## 0.2.0
### Minor Changes
- begin testing, add changeset, begin development process