refactor audio startup so it will autostart on firefox, if allowed

htdocs/lib/AudioEngine.js

@@ -10,9 +10,16 @@ function AudioEngine(maxBufferLength, audioReporter) {
     if (!ctx) {
         return;
     }
-    this.audioContext = new ctx();
+
-    this.allowed = this.audioContext.state === 'running';
+    this.onStartCallbacks = [];
+
     this.started = false;
+    this.audioContext = new ctx();
+    var me = this;
+    this.audioContext.onstatechange = function() {
+        if (me.audioContext.state !== 'running') return;
+        me._start();
+    }
 
     this.audioCodec = new ImaAdpcmCodec();
     this.compression = 'none';
@@ -24,18 +31,25 @@ function AudioEngine(maxBufferLength, audioReporter) {
     this.maxBufferSize = maxBufferLength * this.getSampleRate();
 }
 
-AudioEngine.prototype.start = function(callback) {
+AudioEngine.prototype.resume = function(){
+    this.audioContext.resume();
+}
+
+AudioEngine.prototype._start = function() {
     var me = this;
-    if (me.resamplingFactor === 0) return; //if failed to find a valid resampling factor...
+
-    if (me.started) {
+    // if failed to find a valid resampling factor...
-        if (callback) callback(false);
+    if (me.resamplingFactor === 0) {
          return;
     }
 
-    me.audioContext.resume().then(function(){
+    // been started before?
-        me.allowed = me.audioContext.state === 'running';
+    if (me.started) {
-        if (!me.allowed) {
+        return;
-            if (callback) callback(false);
+    }
+
+    // are we allowed to play audio?
+    if (!me.isAllowed()) {
         return;
     }
     me.started = true;
@@ -66,7 +80,7 @@ AudioEngine.prototype.start = function(callback) {
                 }
             });
             me.audioNode.port.start();
-                if (callback) callback(true, 'AudioWorklet');
+            me.workletType = 'AudioWorklet';
         });
     } else {
         me.audioBuffers = [];
@@ -121,15 +135,26 @@ AudioEngine.prototype.start = function(callback) {
         me.audioNode = me.audioContext[method](bufferSize, 0, 1);
         me.audioNode.onaudioprocess = audio_onprocess;
         me.audioNode.connect(me.gainNode);
-            if (callback) callback(true, 'ScriptProcessorNode');
+        me.workletType = 'ScriptProcessorNode';
     }
 
     setInterval(me.reportStats.bind(me), 1000);
-    });
+
+    var callbacks = this.onStartCallbacks;
+    this.onStartCallbacks = false;
+    callbacks.forEach(function(c) { c(me.workletType); });
+};
+
+AudioEngine.prototype.onStart = function(callback) {
+    if (this.onStartCallbacks) {
+        this.onStartCallbacks.push(callback);
+    } else {
+        callback();
+    }
 };
 
 AudioEngine.prototype.isAllowed = function() {
-    return this.allowed;
+    return this.audioContext.state === 'running';
 };
 
 AudioEngine.prototype.reportStats = function() {

htdocs/openwebrx.js

@@ -1099,9 +1099,11 @@ var mute = false;
 // Optimalise these if audio lags or is choppy:
 var audio_buffer_maximal_length_sec = 1; //actual number of samples are calculated from sample rate
 
-function onAudioStart(success, apiType){
+function onAudioStart(apiType){
     divlog('Web Audio API succesfully initialized, using ' + apiType  + ' API, sample rate: ' + audioEngine.getSampleRate() + " Hz");
 
+    hideOverlay();
+
     // canvas_container is set after waterfall_init() has been called. we cannot initialize before.
     //if (canvas_container) synchronize_demodulator_init();
 
@@ -1320,11 +1322,12 @@ var audioEngine;
 function openwebrx_init() {
     audioEngine = new AudioEngine(audio_buffer_maximal_length_sec, audioReporter);
     $overlay = $('#openwebrx-autoplay-overlay');
-    $overlay.on('click', playButtonClick);
+    $overlay.on('click', function(){
+        audioEngine.resume();
+    });
+    audioEngine.onStart(onAudioStart);
     if (!audioEngine.isAllowed()) {
         $overlay.show();
-    } else {
-        audioEngine.start(onAudioStart);
     }
     fft_codec = new ImaAdpcmCodec();
     initProgressBars();
@@ -1370,9 +1373,7 @@ function update_dmr_timeslot_filtering() {
     $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator().setDmrFilter(filter);
 }
 
-function playButtonClick() {
+function hideOverlay() {
-    //On iOS, we can only start audio from a click or touch event.
-    audioEngine.start(onAudioStart);
     var $overlay = $('#openwebrx-autoplay-overlay');
     $overlay.css('opacity', 0);
     $overlay.on('transitionend', function() {