fix: Make the sound play on Safari as well. #1601

h2oai · Aug 10, 2023 · 1bef657 · 1bef657
1 parent d34ea6b
commit 1bef657
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/ui/src/audio_annotator.test.tsx b/ui/src/audio_annotator.test.tsx
@@ -43,7 +43,7 @@ class MockAudioContext {
   createGain = () => ({ gain: {} })
   createMediaElementSource = () => this
   connect = () => this
-  decodeAudioData = () => ({ duration: WIDTH_AND_DURATION, getChannelData: () => new Array(300).fill(1) })
+  decodeAudioData = (_data: any, res: any) => res({ duration: WIDTH_AND_DURATION, getChannelData: () => new Array(300).fill(1) })
 }
 
 describe('AudioAnnotator.tsx', () => {

diff --git a/ui/src/audio_annotator.tsx b/ui/src/audio_annotator.tsx
@@ -75,7 +75,11 @@ const
     { key: 1.25, text: '1.25x' },
     { key: 1.5, text: '1.5x' },
     { key: 2, text: '2x' },
-  ]
+  ],
+  // Love ya Safari.
+  promisifyDecodeAudioData = (audioContext: AudioContext, audioData: ArrayBuffer) => new Promise<AudioBuffer>((resolve, reject) => {
+    audioContext.decodeAudioData(audioData, resolve, reject)
+  })
 
 declare global {
   interface Window { webkitAudioContext: typeof window.AudioContext }
@@ -121,14 +125,14 @@ export const XAudioAnnotator = ({ model }: { model: AudioAnnotator }) => {
         return
       }
       // Store the URL into the ref so that it can be revoked on destroy and mem leak prevented.
-      fetchedAudioUrlRef.current = URL.createObjectURL(new Blob([arrBuffer]))
+      fetchedAudioUrlRef.current = URL.createObjectURL(new Blob([arrBuffer], { type: 'audio/mpeg' }))
       // Do not set src directly within HTML to prevent double fetching.
       audioRef.current.src = fetchedAudioUrlRef.current
 
       setLoadingMsg('Decoding audio data...')
       let audioBuffer: AudioBuffer
       try {
-        audioBuffer = await audioContext.decodeAudioData(arrBuffer)
+        audioBuffer = await promisifyDecodeAudioData(audioContext, arrBuffer)
       } catch (e) {
         setErrMsg('Could not decode audio data. The file is either corrupted or the format is not supported.')
         return

diff --git a/ui/src/parts/range_annotator.tsx b/ui/src/parts/range_annotator.tsx
@@ -645,23 +645,25 @@ export const
     return (
       <>
         <Fluent.Stack horizontal horizontalAlign='space-between' verticalAlign='center'>
-          <Fluent.CommandBar styles={{ root: { padding: 0, minWidth: 280 } }} items={[
-            {
-              key: 'remove-all',
-              text: 'Remove all',
-              onClick: reset,
-              disabled: removeAllDisabled,
-              iconProps: { iconName: 'DependencyRemove', styles: { root: { fontSize: 20 } } },
-            },
-            {
-              key: 'remove',
-              text: 'Remove selected',
-              onClick: removeAnnotation,
-              disabled: removeDisabled,
-              iconProps: { iconName: 'Delete', styles: { root: { fontSize: 20 } } },
-            },
-          ]}
-          />
+          <Fluent.StackItem grow={1}>
+            <Fluent.CommandBar styles={{ root: { padding: 0, minWidth: 280 } }} items={[
+              {
+                key: 'remove-all',
+                text: 'Remove all',
+                onClick: reset,
+                disabled: removeAllDisabled,
+                iconProps: { iconName: 'DependencyRemove', styles: { root: { fontSize: 20 } } },
+              },
+              {
+                key: 'remove',
+                text: 'Remove selected',
+                onClick: removeAnnotation,
+                disabled: removeDisabled,
+                iconProps: { iconName: 'Delete', styles: { root: { fontSize: 20 } } },
+              },
+            ]}
+            />
+          </Fluent.StackItem>
           {onRenderToolbar && onRenderToolbar()}
         </Fluent.Stack>
         <div ref={annotatorContainerRef}>