Merge pull request #2928 from Brain-up/fix/background-noise-on-refresh

Fix background noise not playing after a page refresh

Author: lifeart

frontend/app/services/audio.ts

@@ -355,6 +355,7 @@ export default class AudioService extends Service {
 
   startNoiseTask = task(async () => {
     let noise = null;
+    let started = false;
     const timeInSeconds = 10;
     try {
       const [level, url] = [
@@ -365,7 +366,16 @@ export default class AudioService extends Service {
         return;
       }
       noise = await this.getNoise(timeInSeconds, level, url);
+      // Mirror the word-playback path: a fresh AudioContext (e.g. right after a
+      // page refresh) starts suspended under the browser autoplay policy, and
+      // source.start(0) on a suspended context queues silently. Resume before
+      // starting so background noise plays on first load — not only after a
+      // lesson restart, which happened to reuse an already-resumed context.
+      if (this.context && this.context.state === 'suspended' && !isTesting()) {
+        await this.context.resume();
+      }
       noise.source.start(0);
+      started = true;
       this.noiseNode = noise;
       if (url) {
         await timeout(toMilliseconds(6000));
@@ -374,7 +384,11 @@ export default class AudioService extends Service {
         this.startNoise();
       }
     } finally {
-      if (noise) {
+      // Only stop a source that actually started. The context.resume() above
+      // adds an await between creating and starting the source, so a cancel
+      // (e.g. stopNoise) or a resume rejection in that window would otherwise
+      // call stop() on a never-started node and throw InvalidStateError.
+      if (noise && started) {
         noise.source.stop();
       }
     }

frontend/tests/unit/services/audio-test.js

@@ -287,4 +287,78 @@ module('Unit | Service | audio', function (hooks) {
       );
     });
   });
+
+  module('startNoiseTask', function () {
+    test('does not create or start noise when the exercise has no noise level', async function (assert) {
+      class TestAudioService extends AudioService {
+        get currentExerciseNoiseLevel() {
+          return 0;
+        }
+        get currentExerciseNoiseUrl() {
+          return null;
+        }
+        async getNoise() {
+          assert.step('getNoise');
+          return { source: { start() {}, stop() {} }, gainNode: {} };
+        }
+      }
+      this.owner.register('service:audio', TestAudioService);
+      const service = this.owner.lookup('service:audio');
+
+      await service.startNoiseTask.perform();
+
+      assert.verifySteps([], 'no noise is created when the level is 0');
+    });
+
+    test('creates and starts the noise source when the exercise has a noise level', async function (assert) {
+      class TestAudioService extends AudioService {
+        get currentExerciseNoiseLevel() {
+          return 50;
+        }
+        get currentExerciseNoiseUrl() {
+          return 'http://example.com/noise.mp3';
+        }
+        async getNoise() {
+          assert.step('getNoise');
+          return {
+            source: {
+              start() {
+                assert.step('start');
+              },
+              stop() {
+                assert.step('stop');
+              },
+            },
+            gainNode: {},
+          };
+        }
+      }
+      this.owner.register('service:audio', TestAudioService);
+      const service = this.owner.lookup('service:audio');
+      // A running context is the post-restart case; the suspended-context
+      // resume is production-only (guarded by !isTesting()). close() is needed
+      // because the service's willDestroy() closes the context on teardown.
+      service.context = {
+        state: 'running',
+        resume: () => Promise.resolve(),
+        close: () => Promise.resolve(),
+      };
+
+      const instance = service.startNoiseTask.perform();
+      // The task loops on timeout(6000) after starting; cancel once started.
+      await new Promise((resolve) => setTimeout(resolve, 20));
+      instance.cancel();
+      try {
+        await instance;
+      } catch (_e) {
+        // cancellation is expected
+      }
+
+      // Ordered: the source is created, then started, then stopped on cancel.
+      assert.verifySteps(
+        ['getNoise', 'start', 'stop'],
+        'noise is created before it is started, and stopped on cancellation',
+      );
+    });
+  });
 });