feat(synth): play calls AudioContext.resume

It removes a need for AudioPermissionDialog

Author: Picalines

packages/editor/src/components/audio-permission-dialog/__screenshots__/dialogs-AudioPermissionDialog-Default-800x600-light-1.png

@@ -4,7 +4,6 @@ import { Tooltip } from '@repo/ui-kit/components/tooltip'
 import { fork } from 'effector'
 import { Provider } from 'effector-react'
 import { type FC, memo, useMemo } from 'react'
-import { AudioPermissionDialog } from '#components/audio-permission-dialog'
 import { LoadingIndicator } from '#components/loading-indicator'
 import { NodeCreationDialog } from '#components/node-creation-dialog'
 import { type Project, editorModel } from '#model'
@@ -54,7 +53,6 @@ const EditorUI = memo(() => (
   <Tooltip.Provider>
     <div className="relative size-full">
       <LoadingIndicator />
-      <AudioPermissionDialog />
       <NodeCreationDialog />
       <EditorPanels />
     </div>

packages/editor/src/components/audio-permission-dialog/audio-permission-dialog.screen.spec.ts

@@ -37,7 +37,7 @@ const { $isExternalLoading, $isReadonly, Gate } = gate
 
 const { userRequestedActions } = history
 
-const { $hasAudioPermission, $isPlaying, $playhead, userGrantedAudioPermission, userSetPlayhead } = playback
+const { $isPlaying, $playhead, userSetPlayhead } = playback
 
 const { $edges: $synthEdges, $nodes: $synthNodes, $activeNode: $activeSynthNode } = synthTree
 
@@ -67,7 +67,6 @@ export {
   $activeSynthNode,
   $beatsPerMinute,
   $endTime,
-  $hasAudioPermission,
   $isDirty,
   $isExternalLoading,
   $isLoaded,
@@ -83,7 +82,6 @@ export {
   $timeSignature,
   Gate,
   userCancelledNodeCreation,
-  userGrantedAudioPermission,
   userHidNotePreview,
   userMovedNotePreview,
   userMovedSheet,

packages/editor/src/components/audio-permission-dialog/audio-permission-dialog.stories.tsx

@@ -1,7 +1,7 @@
 import { Synth, type SynthState, Time } from '@repo/synth'
 import { createFactory } from '@withease/factories'
 import { attach, combine, createEffect, createEvent, createStore, restore, sample, scopeBind } from 'effector'
-import { and, condition, interval, not, readonly, spread } from 'patronum'
+import { and, condition, interval, readonly, spread } from 'patronum'
 import type { EditorGate } from './gate'
 
 export type PlaybackStore = ReturnType<typeof createPlayback>
@@ -15,13 +15,11 @@ export const createPlayback = createFactory((params: Params) => {
 
   const stateChanged = createEvent<SynthState>()
 
-  const $hasAudioPermission = createStore(true) // Assume that it's there
   const $synth = createStore<Synth | null>(null)
   const $state = restore(stateChanged, 'disposed')
   const $duration = createStore(Time.note)
   const $playhead = createStore(Time.start)
 
-  const userGrantedAudioPermission = createEvent()
   const userSetPlayhead = createEvent<Time>()
 
   const initialized = createEvent<Synth>()
@@ -33,18 +31,12 @@ export const createPlayback = createFactory((params: Params) => {
   const $isIdle = combine($state, state => state === 'idle')
   const $isPlaying = combine($state, state => state === 'playing')
 
-  const AUDIO_NOT_ALLOWED = new Error()
-
   const initFx = createEffect(() => {
     if (typeof window === 'undefined') {
       return null
     }
 
     const audioContext = new AudioContext()
-    if (audioContext.state === 'suspended') {
-      throw AUDIO_NOT_ALLOWED
-    }
-
     const synth = new Synth(audioContext)
 
     const scopedStateChanged = scopeBind(stateChanged)
@@ -83,20 +75,6 @@ export const createPlayback = createFactory((params: Params) => {
     else: disposed,
   })
 
-  sample({
-    clock: initFx.failData,
-    filter: error => error === AUDIO_NOT_ALLOWED,
-    target: $hasAudioPermission,
-    fn: () => false,
-  })
-
-  sample({
-    clock: userGrantedAudioPermission,
-    filter: not($hasAudioPermission),
-    target: spread({ hasAudioPermission: $hasAudioPermission, init: initFx }),
-    fn: () => ({ hasAudioPermission: true, init: undefined }),
-  })
-
   sample({ clock: initFx.doneData, target: $synth })
 
   sample({
@@ -152,7 +130,6 @@ export const createPlayback = createFactory((params: Params) => {
   })
 
   return {
-    $hasAudioPermission: readonly($hasAudioPermission),
     $isIdle: readonly($isIdle),
     $isPlaying: readonly($isPlaying),
     $playhead: readonly($playhead),
@@ -162,7 +139,6 @@ export const createPlayback = createFactory((params: Params) => {
     initialized,
     started,
     stopped,
-    userGrantedAudioPermission,
     userSetPlayhead,
   }
 })

packages/editor/src/components/audio-permission-dialog/audio-permission-dialog.tsx

@@ -173,12 +173,17 @@ export class Synth {
   }
 
   /**
-   * NOTE: may be called multiple times without {@link Synth.stop}
+   * Starts scheduled time events. Calls {@link Synth#stop} and {@link AudioContext#resume} when needed
+   * @returns a Promise that resolves then the state becomes 'playing'
    */
-  play(start = Time.start) {
+  async play(start = Time.start) {
     this.#assertNotDisposed()
     this.stop()
 
+    if (this.#audioContext instanceof AudioContext && this.#audioContext.state === 'suspended') {
+      await this.#audioContext.resume()
+    }
+
     this.#state = 'playing'
     this.#playing.emit({ start })
     this.#stateChanged.emit({})

packages/editor/src/components/audio-permission-dialog/index.ts

@@ -52,11 +52,11 @@ export const WaveformStory = <T = {}>(props: Props<T>) => {
       sampleRate,
       numberOfChannels,
       seconds: duration,
-      audioTree: audioContext => {
+      audioTree: async audioContext => {
         const synth = new Synth(audioContext, { lookAhead: Seconds(0) })
         synthTree(synth, synthTreeProps)
         secondMarkers.push(...noteMakers.map(time => synth.secondsPerNote.areaBefore(time)))
-        synth.play()
+        await synth.play()
       },
     })