One Image Webpage Mobile Audio Tutorial
Further to yesterday’s Autumn Leaves One Image Webpage Tutorial another discovery in the category of “generic issue” (and so moves up priority lists around here) was the discovery that …
- the optional audio playing functionality of One Image Webpage ideas around here worked on non-mobile via HTML webpages (calling an *.mp3 iframe URL) or a *.mp3 UREL as the destination href attribute of an “a” link encompassing the image img elements … but …
- these same programmatical approaches do not “cut the mustard” on mobile platforms, where, to play media, the user needs to tap (with a real non-programmatical gesture) the media element
… and so we needed a “generic makeover”. Luckily we had an external Javascript called onrightclick.js called on every One Image Webpage we could call upon as a good place to affect all the behaviour of all these webpages, as per …
function audiolook() {
var ifsare=document.getElementsByTagName('a');
if (eval('' + ifsare.length) > 0) {
// alert(ifsare[eval(-1 + ifsare.length)].href);
if (ifsare[eval(-1 + ifsare.length)].href.slice(-4) == '.mp3') {
//document.title='' + ifsare[eval(-1 + ifsare.length)].href;
var parisis=null, parisisx=null;
if (window.opener) {
parisis=window.opener;
if (parisis.document.getElementById('xxsource')) {
parisisx=parisis.document.getElementById('xxsource');
}
}
if (parisisx) {
if (parisisx.src != ifsare[eval(-1 + ifsare.length)].href) {
if (6 == 8) { parisisx.src=ifsare[eval(-1 + ifsare.length)].href; }
}
var ifzsare=parisis.document.getElementsByTagName('a');
if (eval('' + ifzsare.length) > 0) {
if (ifzsare[eval(-1 + ifzsare.length)].href.slice(-4) == '.mp3') {
if (ifzsare[eval(-1 + ifzsare.length)].href != ifsare[eval(-1 + ifsare.length)].href) {
if (6 == 8) { ifzsare[eval(-1 + ifzsare.length)].href=ifsare[eval(-1 + ifsare.length)].href; }
}
}
}
} else if (document.getElementById('xxsource')) {
if (document.getElementById('xxsource').src != ifsare[eval(-1 + ifsare.length)].href) {
if (6 == 8) { document.getElementById('xxsource').src=ifsare[eval(-1 + ifsare.length)].href; }
}
} else if (!document.getElementById('xxsource')) {
var firsta=ifsare[eval(-1 + ifsare.length)].href.split('/')[eval(-1 + ifsare[eval(-1 + ifsare.length)].href.split('/').length)].split('.')[0];
document.body.innerHTML+='<audio id=xxaudio onclick="this.style.left=0; this.style.opacity=0.5; this.autoplay=true; ; if (document.getElementById(' + "'thedivlink'" + ')) { document.getElementById(' + "'thedivlink'" + ').style.marginLeft=' + "'120px'" + '; } " controls style="opacity:1.0;z-index:8976;position:fixed;left:' + eval(-120 + eval('' + window.innerWidth)) + 'px;top:-20px;height:60px;\" loop><source id=xxsource type=audio/mp3 src="' + ifsare[eval(-1 + ifsare.length)].href.replace(firsta,'all') + '"></source></audio>';
}
}
}
}
setTimeout(doacheck, 100);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
document.ontouchend=function(e){
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
lastsp=eval(e.touches.length);
}
if (eval('' + e.touches.length) >l= 1) {
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') == -1) {
onrightclickask();
} else if (e.touches[0].target.outerHTML.split('>')[0].indexOf('<img ') == 0 && e.touches[0].target.outerHTML.split('>')[0].indexOf(' tabindex=') != -1) {
onrightclickask(); //document.title=':' + e.touches[0].target.outerHTML.split('>')[0].substring(1);
}
}
};
}, 4000);
setTimeout(function(){
var ifsare=document.getElementsByTagName('a');
if (eval('' + ifsare.length) > 0) {
// alert(ifsare[eval(-1 + ifsare.length)].href);
if (ifsare[eval(-1 + ifsare.length)].href.slice(-4) == '.mp3') {
//document.title='' + ifsare[eval(-1 + ifsare.length)].href;
var parisis=null, parisisx=null;
if (window.opener) {
parisis=window.opener;
if (parisis.document.getElementById('xxsource')) {
parisisx=parisis.document.getElementById('xxsource');
}
}
if (parisisx) {
if (parisisx.src != ifsare[eval(-1 + ifsare.length)].href) {
if (6 == 8) { parisisx.src=ifsare[eval(-1 + ifsare.length)].href; }
}
var ifzsare=parisis.document.getElementsByTagName('a');
if (eval('' + ifzsare.length) > 0) {
if (ifzsare[eval(-1 + ifzsare.length)].href.slice(-4) == '.mp3') {
if (ifzsare[eval(-1 + ifzsare.length)].href != ifsare[eval(-1 + ifsare.length)].href) {
if (6 == 8) { ifzsare[eval(-1 + ifzsare.length)].href=ifsare[eval(-1 + ifsare.length)].href; }
}
}
}
} else if (document.getElementById('xxsource')) {
if (document.getElementById('xxsource').src != ifsare[eval(-1 + ifsare.length)].href) {
if (6 == 8) { document.getElementById('xxsource').src=ifsare[eval(-1 + ifsare.length)].href; }
}
} else if (!document.getElementById('xxsource')) {
var firsta=ifsare[eval(-1 + ifsare.length)].href.split('/')[eval(-1 + ifsare[eval(-1 + ifsare.length)].href.split('/').length)].split('.')[0];
document.body.innerHTML+='<audio id=xxaudio onclick="this.style.left=0; this.style.opacity=0.5; this.autoplay=true; if (document.getElementById(' + "'thedivlink'" + ')) { document.getElementById(' + "'thedivlink'" + ').style.marginLeft=' + "'120px'" + '; } " controls style="opacity:1.0;z-index:8976;position:fixed;left:' + eval(-120 + eval('' + window.innerWidth)) + 'px;top:-20px;height:60px;" loop><source id=xxsource type=audio/mp3 src="' + ifsare[eval(-1 + ifsare.length)].href.replace(firsta,'all') + '"></source></audio>';
setInterval(audiolook, 10000);
}
}
}
}, 1500);
}
… in the changed onrightclick.js One Image Webpage external Javascript helper.
Previous relevant Autumn Leaves One Image Webpage Tutorial is shown below.
Autumn Leaves One Image Webpage Tutorial
It’s been quite a while since we’ve created a new One Image Webpage website of recent times. Yesterday, we created a new one called …
… because, that is very much the go around here in the Blue Mountains in those coniferous tree areas. The colours are very vibrant!
What have we noticed changing? Well, the iPhone outputs IMG_[0-9]*.HEIC images these days for full sized images, rather than DSC_[0-9]*.JPEG, like the way it used to be for the same full sized images back when we last tried to create a One Image Webpage website. We decided to convert HEIC to JPEG and found both Ffmpeg or ImageMagick, on a Windows command line, could attempt it, but Ffmpeg had an issue, and so, the Windows (ImageMagick) command …
for %i in (*.HEIC) do magick "%i" "%~ni.jpg"
… ended up suiting our purposes.
And what was the transferring from iPhone to macOS MacBook Air (for this part of the work) methodology?
- iPhone Camera app takes photo …
- each stored in iPhone Photos app …
- use iPhone Photos app Sharing link … to …
- tap AirDrop option (which, in Apple woooorrrrllllddd is the best go for these “too large for Mail attachments” amounts of data) …
- tap MacBook Air as the recipient (which, even out and about, and only lassooing MacBook Air to iPhone’s Hot Spot as a connection, worked (and was very fast)) … which …
- copies images (as is in *.HEIC format) from iPhone to MacBook Air
… retiring the iPhone, optionally, from any further involvement creating Autumn Leaves One Image Webpage website.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
