Getting Started

Installation

BMates is available as a package on NPM for use:

# NPM
npm install @bmates/studio

Create Component

Please import the BMates component.

import { BMates } from '@bmates/studio';

Set the appropriate props for the BMates component.

const App = () => {
  const editorRef = useRef<Editor>();

  return (
    <BmatesProvider editorRef={editorRef}>
      <ControlPanel />
      <BMates
        data={data}
        style={style}
        trackEl={({ track, muted, toggleMute, removeTrack }) => {
          return (
            <div className="track">
              <div className="name">{track.name}</div>
              <div className="feature">
                <ToggleMute muted={muted} onClick={toggleMute} />
                <RemoveTrackButton onClick={removeTrack}>Remove</RemoveTrackButton>
              </div>
            </div>
          );
        }}
      />
    </BmatesProvider>
  );
};

And feel free to manage it using the useBMates hook.

const ControlPanel = () => {
  const { isPlaying, togglePlay, toggleStopPlay, handleFileUpload, download, editorRef } = useBMates();

  return (
    <div>
      <Button variant="primary" onClick={togglePlay}>
        {isPlaying ? 'Pause' : 'Play'}
      </Button>
      <Button variant="primary" onClick={toggleStopPlay}>
        Stop
      </Button>
      <input type="file" accept="audio/*" onChange={handleFileUpload} />
      <Button variant="primary" onClick={download}>
        Download
      </Button>
      <Button
        variant="primary"
        onClick={() => {
          console.log('Result: ', editorRef.current.export());
        }}
      >
        Export
      </Button>
    </div>
  );
};

Other frameworks besides React are currently in preparation.

Framework

@bmates/studio is a library built for React based on @bmates/editor. If you want to use it in other frameworks, please utilize @bmates/editor.

# NPM
npm install @bmates/editor

We will support other frameworks soon.