Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dolbyio/media-uikit-react
UIKit for React app developers to build media processing applications using Dolby.io Media API's
https://github.com/dolbyio/media-uikit-react
components dolby dolbyio mediaprocessing music react uikit
Last synced: 4 days ago
JSON representation
UIKit for React app developers to build media processing applications using Dolby.io Media API's
- Host: GitHub
- URL: https://github.com/dolbyio/media-uikit-react
- Owner: DolbyIO
- License: mit
- Created: 2022-08-01T16:35:50.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T22:12:56.000Z (21 days ago)
- Last Synced: 2024-10-28T22:19:53.813Z (21 days ago)
- Topics: components, dolby, dolbyio, mediaprocessing, music, react, uikit
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@dolbyio/media-uikit-react
- Size: 59.5 MB
- Stars: 11
- Watchers: 9
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/DolbyIO/media-uikit-react/actions/workflows/build-package.yml)
[](https://www.npmjs.com/package/@dolbyio/media-uikit-react)
[](LICENSE)
# Dolby.io Media Music Mastering UIKit for React
# Overview
The Dolby.io Music Mastering UIKit for React is designed to help React developers reduce the complexity of building and embedding a Dolby.io Music Mastering solution for the web.
- To see a Music Mastering kickstart app that shows the UIKit in action, check out our [GitHub](https://github.com/dolbyio-samples/media-app-react-music-mastering).
The package consists of the following element:
- **UI components**: Basic elements used to create a Music Mastering solution for the web.
# Getting Started
## Prerequisites
- React 16.5 or greater.
- A supported browser: Chrome 100+, Safari 15+, Firefox 100+, or Edge 100+
## Setup
```bash
# Create a new React application
npx create-react-app my-app
# Change into the app directory
cd my-app
# Install the UI kit with yarn
yarn add @dolbyio/media-uikit-react
# Start the dev server
npm start
```
## Use a component
The following examples include a sample of the components available in the UIKit.
### **Accordion**
The Accordion component allows the user to show and hide sections of related content on a page.
```tsx
import { Accordion } from '@dolbyio/media-uikit-react';
const MyComponent = (props) => {
return (
Options}>
- Item 1
- Item 2
);
};
```
### **RadioGroup**
The RadioGroup component allows users to make one selection out of a list of options and only number types are supported.
```tsx
import { RadioGroup } from '@dolbyio/media-uikit-react';
const MyComponent = (props) => {
return (
);
};
```
### **Slider**
The Slider component allows the user to set values on a continuous scale.
```tsx
import { Slider } from '@dolbyio/media-uikit-react';
const MyComponent = (props) => {
return (
);
};
```
### **TextField**
The TextField component allows users to enter and edit text.
```tsx
import { TextField } from '@dolbyio/media-uikit-react';
const MyComponent = (props) => {
return (
);
};
```
### **Waveform**
The Waveform component allows users to display a waveform of an audio track, choose a segment of the track for preview, select location of the playhead, adjust volume, and interact with transport controls and audio timeline bar.
```tsx
import { Waveform } from '@dolbyio/media-uikit-react';
const MyComponent = (props) => {
return (
);
};
```
### **AudioConfigurator**
The AudioConfigurator component provides controls for selecting audio characteristics such as sample rate, channel count, and sample size.
```tsx
import { AudioConfigurator } from '@dolbyio/media-uikit-react';
const MyComponent = (props) => {
return (
);
};
```