Merge pull request scratchfoundation#5444 from watilde/fix/audio-context

fix: initialize audio context only with user interaction

Author: benjiwheeler

src/lib/audio/shared-audio-context.js

@@ -2,10 +2,22 @@ import StartAudioContext from 'startaudiocontext';
 import bowser from 'bowser';
 
 let AUDIO_CONTEXT;
-if (!bowser.msie) {
-    AUDIO_CONTEXT = new (window.AudioContext || window.webkitAudioContext)();
 
-    StartAudioContext(AUDIO_CONTEXT);
+if (!bowser.msie) {
+    /**
+     * AudioContext can be initialized only when user interaction event happens
+     */
+    const event =
+        typeof document.ontouchstart === 'undefined' ?
+            'mousedown' :
+            'touchstart';
+    const initAudioContext = () => {
+        document.removeEventListener(event, initAudioContext);
+        AUDIO_CONTEXT = new (window.AudioContext ||
+            window.webkitAudioContext)();
+        StartAudioContext(AUDIO_CONTEXT);
+    };
+    document.addEventListener(event, initAudioContext);
 }
 
 /**

test/unit/util/audio-context.test.js

@@ -0,0 +1,25 @@
+import 'web-audio-test-api';
+import SharedAudioContext from '../../../src/lib/audio/shared-audio-context';
+
+describe('Shared Audio Context', () => {
+    const audioContext = new AudioContext();
+
+    test('returns empty object without user gesture', () => {
+        const sharedAudioContext = new SharedAudioContext();
+        expect(sharedAudioContext).toMatchObject({});
+    });
+
+    test('returns AudioContext when mousedown is triggered', () => {
+        const sharedAudioContext = new SharedAudioContext();
+        const event = new Event('mousedown');
+        document.dispatchEvent(event);
+        expect(sharedAudioContext).toMatchObject(audioContext);
+    });
+
+    test('returns AudioContext when touchstart is triggered', () => {
+        const sharedAudioContext = new SharedAudioContext();
+        const event = new Event('touchstart');
+        document.dispatchEvent(event);
+        expect(sharedAudioContext).toMatchObject(audioContext);
+    });
+});