Nothern Utah WebSDR Logo - A skep with a Yagi The Northern Utah WebSDR

WebSDR code modifications to add a button to start Chrome and iOS (Apple) audio - and updated settings for newer (late 2019) browser identifications.

The Problem:

You have probably gotten to this page by reading the "Fixing Chrome" web page:  If you haven't read that page yet, please pause - and go back and read it NOW before continuing on.

This page is directed primarily to operators of other WebSDRs using the software by PA3FWM (P.T. de Boer) - but it may be useful for the general case of adding this to your web page.

I'm not, by any means, an expert in this type of code - but I manage to muddle through it - so there are probably better/cleaner ways to do these same things.  These changes are pretty straightforward so they should be easy to do.

As noted below, you should use just a plain text editor to edit the files rather than an HTML code editor as the latter may add extra characters/formatting and "break" it!

You should make back-up copies of every file you modify so that you can revert back to it if things don't work!

Finally, while I have tried to make this information both complete and accurate, I may have missed something.  There are no guarantees - expressed or implied - and you should not taunt happy fun ball!

Important:

Changes were recently made to the way Apple products interact with web pages - particularly iOS 13 - see below for more information as to what was done.





Adding the button to the "main" web page:

This information relates to adding the button to start chrome audio to the main web page - that is, the default page at which one lands when going to the WebSDR (e.g. index.html).  Information about the "mobile" version may be found farther down.

Before you start:  Make a backup copy of the following file so that you can revert back to the original if something doesn't work!
When you edit this file, use a standard text editor, not an editor for HTML code as the latter may add extraneous characters/formatting and "break" it!
In the websdr-base.js find the following code:

function iOS_audio_start()
{
   // Safari on iOS only plays webaudio after it has been started by clicking a button, so this function must be called from a button's onclick handler
   if (!document.ct) document.ct= new webkitAudioContext();
   var s = document.ct.createBufferSource();
   s.connect(document.ct.destination);
   try { s.start(0); } catch(e) { s.noteOn(0); }
}

Just below, add this code:

function chrome_audio_start()
{
   // Chrome only plays webaudio after it has been started by clicking a button, so this function must be called from a button's onclick handler
   if (!document.ct) document.ct= new webkitAudioContext();
   var s = document.ct.createBufferSource();
   s.connect(document.ct.destination);
   document.ct.resume();
   try { s.start(0); } catch(e) { s.noteOn(0);}
}

Farther down the file, find this code - add/change the lines in BOLD:

function html5orjavamenu()
{
   var s;
   if (sup_webaudio) {
      if (sup_webaudio) {
         if (!document['ct']) document['ct']= new sup_webaudio;
         try {
            var cc=document['ct'].createConvolver;
         } catch (e) {
            document['ct']=null; // firefox 23 supports webaudio, but not yet createConvolver(), making it unusable.
            sup_webaudio=false;
         };
      }
   }
   sup_iOS = 0;   // global!
   sup_android = 0;   // global!
   sup_chrome = 0;  // global!
   try {
      var n=navigator.userAgent.toLowerCase();
      if (n.indexOf('iphone')!=-1) sup_iOS=1;
      if (n.indexOf('ipad')!=-1) sup_iOS=1;
      if (n.indexOf('ipod')!=-1) sup_iOS=1;
      if (n.indexOf('ios')!=-1) sup_iOS=1;
      if (n.indexOf('android')!=-1) sup_android=1;
      if (n.indexOf('chrome')!=-1) sup_chrome=1;
   } catch (e) {};
   if (sup_iOS) isTouchDev=true;
   var usecookie= readCookie('usejava');
   if (!usecookie) {
      if (sup_socket && sup_canvas) usecookie="n"; else usecookie="y";
      if (sup_socket && (sup_webaudio || sup_mozaudio)) usecookie+="n"; else usecookie+="y";
   }
   usejavawaterfall=(usecookie.substring(0,1)=='y');
   usejavasound=(usecookie.substring(1,2)=='y');
  
   var javacolor=checkjava();
   s='<b>Waterfall:</b>';
   s+='<span style="color: '+javacolor+'"><input type="radio" name="groupw" value="Java" onclick="html5orjava(0,1);"'+(usejavawaterfall?" checked":"")+'>Java</span>';
   if (sup_socket && sup_canvas) s+='<span style="color:green">'; else s+='<span style="color:red">';
   s+='<input type="radio" name="groupw" value="HTML5" onclick="html5orjava(0,0);"'+(!usejavawaterfall?" checked":"")+'>HTML5</span>';
   s+='&nbsp;&nbsp;&nbsp;<b>Sound:</b>';
   s+='<span style="color: '+javacolor+'"><input type="radio" name="groupa" value="Java" onclick="html5orjava(1,1);"'+(usejavasound?" checked":"")+'>Java</span>';
   if (sup_socket && sup_webaudio) s+='<span style="color: green">';
   else if (sup_socket && sup_mozaudio) s+='<span style="color: blue">';
   else s+='<span style="color: red">';
   s+='<input type="radio" name="groupa" value="HTML5" onclick="html5orjava(1,0);"'+(!usejavasound?" checked":"")+'>HTML5 </span>';
   if (sup_iOS && sup_socket && sup_webaudio) s+='<input type="button" value="iOS users- Click here to start audio" onclick="iOS_audio_start()" style="background:#88ff88; font-weight: bold">';
   if (sup_chrome && sup_socket && sup_webaudio) s+='<input type="button" value="Chrome audio start" onclick="chrome_audio_start()" style="background:#88ff88; font-weight: bold">';
   document.getElementById('html5choice').innerHTML = s;
   document.getElementById('record_span').style.display = usejavasound ? "none" : "inline";
}


Once this code is added and updated on the server, you should refresh the page to test it using the Chrome browser:  If you did it correctly (got all of the parantheses, brackets, etc. in the right places)  it should work normally.  If the web page doesn't start (e.g. the waterfall won't draw correctly) restore the back-up version of the file and re-check your works.



Updating the "Mobile" version.

If you use a mobile device (typically Android phone/tablet) you will see a banner near the top of the screen suggesting the use of the "mobile" version.  This lightweight implementation calls the file "m.html".  The modifications to add the button to this interface are as follows.

Before you start:  Make a backup copy of the following file so that you can revert back to the original if something doesn't work!
When you edit this file, use a standard text editor, not an editor for HTML code as the latter may add extraneous characters/formatting and "break" it!

In the mobile-controls.html file, make the following changes:

Find the following code:

<div id="browserwarning" class="warning">
Your browser is not supported; if it does not work, please try again with Firefox on Android, or Safari version 6 or later on iOS.</div>
</div>

Just below it add the following code that will warn users of the experimental nature of Chrome support on a mobile platform.:

<div id="chromewarning" class="warning">
Mobile support of Chrome may be buggy; If there are problems, try a different browser.</div>
</div>

Not too far below this, you will find the following code - add/change the lines in BOLD.

<form name="freqform" action="#" onsubmit="freqsubmit(this); return false;"
><script>
var sup_android=false;
var sup_iOS=false;
var sup_chrome=false;
try {
   var n=navigator.userAgent.toLowerCase();
   if (n.indexOf('android')!=-1) sup_android=true;
   if (n.indexOf('iphone')!=-1) sup_iOS=true;
   if (n.indexOf('ipad')!=-1) sup_iOS=true;
   if (n.indexOf('ipod')!=-1) sup_iOS=true;
   if (n.indexOf('ios')!=-1) sup_iOS=true;
   if (n.indexOf('chrome')!=-1) sup_chrome=true;
} catch (e) {};

if (sup_iOS) document.write('<div id="iOSstart"><button onclick="iOS_audio_start()">iOS audio start</button><br></div>');
if (sup_chrome) document.write('<div id="Chromestart"><button onclick="Chrome_audio_start()">Chrome audio start</button><br></div>');
if (sup_android && (n.indexOf('firefox')==-1) && (n.indexOf('chrome')==-1)) document.getElementById("browserwarning").style.display= "block";
if (sup_android && sup_chrome) document.getElementById("chromewarning").style.display= "block";

Below this, find the following code:

function iOS_audio_start()
{
   // Safari on iOS only plays webaudio after it has been started by clicking a button, so this function must be called from a button's onclick handler
   if (!document.ct) document.ct= new webkitAudioContext();
   var s = document.ct.createBufferSource();
   s.connect(document.ct.destination);
   try { s.start(0); } catch(e) { s.noteOn(0); }
   document.getElementById("iOSstart").innerHTML="";
}

Below, add this code:

function Chrome_audio_start()
{
   // Chrome only plays webaudio after it has been started by clicking a button, so this function must be called from a button's onclick handler
   if (!document.ct) document.ct= new webkitAudioContext();
   var s = document.ct.createBufferSource();
   s.connect(document.ct.destination);
   document.ct.resume();
   try { s.start(0); } catch(e) { s.noteOn(0); }
   document.getElementById("Chromestart").innerHTML="";
}

Below the above, add this (possibly unnecessary) code:

function chromesupporterror()
{
   document.getElementById("chromewarning").style.display= "block";
}


Once this code is added and updated on the server, you should refresh the page to test it using the Chrome browser:  If you did it correctly (got all of the parantheses, brackets, etc. in the right places)  it should work normally.  If the web page doesn't start (e.g. the waterfall won't draw correctly) restore the back-up version of the file and re-check your works.




Issues with recent Apple devices - including iOS 13:

There has been a spate of reports that users of Apple devices are no longer getting audio.  One of the possible issues seems to be how the browser identifies itself to the WebSDR, which seems to have changed.  As a result, the "Apple specific" code which allows audio to work on these devices - namely the "Audio Start" button just above the waterfall and to the right - was not appearing.

The following changes need to be made to a file in the dist11/pub2 directory:  websdr-base.js

The added code is represented below in BOLD:  The snippet below includes the changes describe earlier on this page.

   try {
      var n=navigator.userAgent.toLowerCase();
      if (n.indexOf('iphone')!=-1) sup_iOS=1;
      if (n.indexOf('ipad')!=-1) sup_iOS=1;
      if (n.indexOf('ipod')!=-1) sup_iOS=1;
      if (n.indexOf('ios')!=-1) sup_iOS=1;
      if (n.indexOf('ipados')!=-1) sup_iOS=1;
      if (n.indexOf('macintosh')!=-1) sup_iOS=1;

      if (n.indexOf('ios')!=-1) sup_iOS=1;
      if (n.indexOf('android')!=-1) sup_android=1;
       if (n.indexOf('chrome')!=-1) sup_chrome=1;
   } catch (e) {};

For the mobile version of the WebSDR, you will need to change a file, also in the dist11/pub2 directory:  mobile-controls.html

Again, the added code is represented below in BOLD:  Again, the snippet below includes the changes describe earlier on this page.

try {
   var n=navigator.userAgent.toLowerCase();
   if (n.indexOf('android')!=-1) sup_android=true;
   if (n.indexOf('iphone')!=-1) sup_iOS=true;
   if (n.indexOf('ipad')!=-1) sup_iOS=true;
   if (n.indexOf('ipod')!=-1) sup_iOS=true;
   if (n.indexOf('ios')!=-1) sup_iOS=true;
   if (n.indexOf('ipados')!=-1) sup_iOS=true;
   if (n.indexOf('macintosh')!=-1) sup_iOS=true;

    if (n.indexOf('chrome')!=-1) sup_chrome=true;
} catch (e) {};

Note that one may still need to make a change to the "gestures" settings mentioned on the "Audio Problems with Chrome and Safari" page - link.






Additional information:


Go to the Northern Utah WebSDR landing page