Route to restore audioContext (if suspended on safari or other?)

app/router.js

@@ -8,6 +8,7 @@ const Router = EmberRouter.extend({
 
 Router.map(function() {
   this.route('box', {path : 'box/:version_idx'});
+  this.route('unlock-audio');
 });
 
 export default Router;

app/routes/application.js

@@ -7,6 +7,9 @@ export default Route.extend({
 
     intl: service(),
     ajaxService: service('ajax'),
+    audioService: service('audio'),
+
+    audioUnlockPreviousTransition: null,
 
     beforeModel() {
       this._super(...arguments);
@@ -33,4 +36,33 @@ export default Route.extend({
 
         return samplesConf;
     },
+
+    afterModel(model, transition) {
+      this._super(model, transition);
+      let audioContext = this.get('audioService.audioContext');
+      if (audioContext.state !== 'suspended'){
+        return;
+      }
+
+      if( transition.targetName != 'unlock-audio'){
+        //Deal with "suspended" audio Context on Safari
+        transition.abort();
+        this.set('audioUnlockPreviousTransition', transition);
+        this.transitionTo('unlock-audio');
+      }
+    },
+
+    actions: {
+      replayInitialeTransition: function(){
+        let transition = this.get('audioUnlockPreviousTransition');
+        if( transition){
+          this.set('audioUnlockPreviousTransition', null);
+          transition.retry();
+        }
+        else{
+          this.transitionTo('index');
+        }
+      }
+    }
+
 });

app/routes/unlock-audio.js

@@ -0,0 +1,42 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+/**
+ * https://www.mattmontag.com/web/unlock-web-audio-in-safari-for-ios-and-macos
+ */
+export default Route.extend({
+
+  audioService: service('audio'),
+  events : ['touchstart','touchend', 'mousedown','keydown'],
+
+  handleEvent: function(){
+      this.unlock();
+  },
+
+  afterModel(model, transition) {
+    this._super(model, transition);
+
+    const b = document.body;
+    this.get('events').forEach((e) => {
+      b.addEventListener(e, this, false);
+    });
+  },
+
+  unlock: function(){
+
+    this.get('audioService.audioContext').resume().then(() => {
+
+      //Remove touch/click event
+      this.clean();
+
+      //Replay previous transition
+      this.send('replayInitialeTransition');
+    });
+  },
+
+  clean: function(){
+    const b = document.body;
+    this.get('events').forEach((e) => {
+      b.removeEventListener(e, this, false);
+    });
+  },
+});

app/templates/unlock-audio.hbs

@@ -0,0 +1 @@
+Votre navigateur a suspendu l'accès audio, veuillez cliquez/toucher l'écran pour débloquer l'audio et utiliser l'application.

tests/unit/routes/unlock-audio-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:unlock-audio', 'Unit | Route | unlock audio', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});