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

WebSDR code modifications to add a button to start chrome audio.

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!




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.





Additional information:

Go to the Northern Utah WebSDR