 |
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!
- In the dist11/pub2 directory: websdr-base.js
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+=' <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!
- In the dist11/pub2 directory: mobile-controls.html
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:
- For general information about this WebSDR, go to the About
page (link).
- For answers to possible questions, visit the FAQ
page (link).
- For more information about the WebSDR project in general -
including information about other WebSDR servers worldwide and
additional technical information - go to http://www.websdr.org
Go to the Northern Utah WebSDR landing page