Basic Audio

Load and control playback of an audio file.

Loading...

Decode Audio

Specviz expects a fully decoded audio buffer and a React loading pattern of your choice. Specviz.Audio.Provider provides the audio buffer to the application.The Audio.load helper is provided for convenience.

./App.tsx

function AppProvider(props) {
  const [audioBuffer, setAudioBuffer] = React.useState<null | AudioBuffer>(null)
  React.useEffect(() => {
    Specviz.Audio.load(props.audio).then(setAudioBuffer)
  }, [props.audio])
  if (audioBuffer == null) return "Loading audio..."
  return (
    <Specviz.Audio.Provider buffer={audioBuffer}>
      <...>
        {props.children}
      </...>
    </Specviz.Audio.Provider>
  )
}

Insert Audio Effect

In your App, use the Specviz.Audio.Effect component to play the audio.

./App.tsx

function App() {
  return (
    <>
      <Visualizer />
      <AudioControls />
      <... />
      <Specviz.Audio.Effect />
    </>
  )
}

Audio Controls

The Audio context provides access to the audio state and transport controls.

./App.tsx

function AudioControls() {
  const audio = Specviz.Audio.useContext()
  return (
    <>
      <button
        children="Rewind"
        onClick={_ => audio.transport.seek(0)}
      />
      <button
        children="Play"
        disabled={!audio.state.pause}
        onClick={_ => audio.transport.play()}
      />
      <button
        children="Stop"
        disabled={audio.state.pause}
        onClick={_ => audio.transport.stop()}
      />
      <... />
    </>
  )
}