import { Song, Track, Instrument } from 'reactronica;

const Audio = () => {
  return (
    <Song isPlaying={false}>
      <Track steps={['C3', 'E3', 'B2', 'E3']}>
        <Instrument type="synth" />
      </Track>
    </Song>
  )
}

import { Song, Track, Instrument } from 'reactronica;

const KeyboardAudio = () => {
  const [notes, setNotes] = useNotes([]);

  return (
    <>
      {/* Custom keyboard component  */}
      <Keyboard 
        onMouseDown={(notes) => setNotes(notes)} 
        onMouseUp={() => setNotes([])} 
      />

      <Song>
        <Track>
          <Instrument type="synth" notes={notes} />
        </Track>
      </Song>
    </>
  )
}

import { Song, Track, Instrument } from 'reactronica;

const Samples = () => {
  const [notes, setNotes] = useNotes([]);

  return (
    <>
      <button onClick={() => setNotes({ name: 'C3' })}>
        Kick
      </button>
      {/* Other buttons... */}

      <Song>
        <Track>
          <Instrument
            type="sampler"
            notes={notes}
            samples={{
              C3: '/drums/kick.wav',
              D3: '/drums/snare.wav',
              E3: '/drums/hat.wav',
            }}
          />
        </Track>
      </Song>
    </>
  )
}