Creating AudioContext()

[drillep]

I'm able to instantiate a new AudioContext() inside useEffect() but I'm not sure the best approach for exporting a singular AudioContext() object.

const Oscillator = ({ frequency, type }) => {
  useEffect(() => {
    const audioContext = new AudioContext()
    const oscillator = audioContext.createOscillator()

    oscillator.frequency.value = frequency
    oscillator.type = type

    oscillator.start()
    oscillator.connect(audioContext.destination)

    return () => {
      oscillator.stop()
       oscillator.disconnect()
    }
  }, [])
  return null
}

I'm having difficulty with the syntax for exporting global AudioContext() so that I can useContext() in the function above.

import { createContext } from 'react'

const audioContext = new AudioContext()
const context = createContext({ audioContext })

export default context

If I move AudioContext() into useEffect() my audioContext appears to be undefined, I'm pretty sure this is an issue with my syntax as AudioContext doesn't exist at build?

import { createContext, useEffect, useState } from "react"
const context = () => {
  const [audioContext, setAudioContext] = useState({
    audioContext: {}
  })
  useEffect(() => {
    setAudioContext({
      audioContext: new AudioContext()
    })
  }, [])
  return createContext({ audioContext })
}

[jamesmosier]

This is kinda verbose, but what about something like this:

// my-context.js
import { createContext } from 'react'

const MyContext = createContext({ audioContext: null, setAudioContext: () => {} })
export default MyContext

// my-provider.js
function Provider({children}){
  const [audioContext, setAudioContext] = React.useState(null)  
  return <MyContext.Provider value={{audioContext, setAudioContext}}>{children}</MyContext.Provider>
}

export default function StateProvider({children}) {
  const ctx = React.useContext(MyContext)
  React.useEffect(() => {
    ctx.setAudioContext(new AudioContext())
  },[])
  return <Provider>{children}</Provider>
}