{"id":72985,"date":"2026-05-10T03:01:00","date_gmt":"2026-05-09T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=72985"},"modified":"2026-05-09T10:50:11","modified_gmt":"2026-05-09T00:50:11","slug":"one-image-webpage-mobile-audio-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-image-webpage-mobile-audio-tutorial\/","title":{"rendered":"One Image Webpage Mobile Audio Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/autumnleaves\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"One Image Webpage Mobile Audio Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/autumnleaves\/mobile_audio.gif\" title=\"One Image Webpage Mobile Audio Tutorial\"   \/><\/a><p class=\"wp-caption-text\">One Image Webpage Mobile Audio Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Autumn Leaves One Image Webpage Tutorial' href='#aloiwt' rel=\"noopener\">Autumn Leaves One Image Webpage Tutorial<\/a> another discovery in the category of &#8220;generic issue&#8221; <font size=1>(and so moves up priority lists around here)<\/font> was the discovery that &#8230;<\/p>\n<ul>\n<li>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 <i>href<\/i> attribute of an &#8220;a&#8221; link encompassing the image <i>img<\/i> elements &#8230; but &#8230;<\/li>\n<li>these same programmatical approaches do not &#8220;cut the mustard&#8221; on mobile platforms, where, to play media, the user needs to tap (with a real non-programmatical gesture) the media element<\/li>\n<\/ul>\n<p> &#8230; and so we needed a &#8220;generic makeover&#8221;.  Luckily we had an external Javascript called <i>onrightclick.js<\/i> called on every One Image Webpage we could call upon as a good place to affect all the behaviour of all these webpages, <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><font color=blue><br \/>\n    function audiolook() {<br \/>\n     var ifsare=document.getElementsByTagName('a');<br \/>\n     if (eval('' + ifsare.length) &gt; 0) {<br \/>\n      \/\/ alert(ifsare[eval(-1 + ifsare.length)].href);<br \/>\n        if (ifsare[eval(-1 + ifsare.length)].href.slice(-4) == '.mp3') {<br \/>\n             \/\/document.title='' + ifsare[eval(-1 + ifsare.length)].href;<br \/>\n          var parisis=null, parisisx=null;<br \/>\n          if (window.opener) {<br \/>\n             parisis=window.opener;<br \/>\n             if (parisis.document.getElementById('xxsource')) {<br \/>\n                      parisisx=parisis.document.getElementById('xxsource');<br \/>\n             }<br \/>\n          }<br \/>\n          if (parisisx) {<br \/>\n             if (parisisx.src != ifsare[eval(-1 + ifsare.length)].href) {<br \/>\n               if (6 == 8) { parisisx.src=ifsare[eval(-1 + ifsare.length)].href; }<br \/>\n             }<br \/>\n             var ifzsare=parisis.document.getElementsByTagName('a');<br \/>\n             if (eval('' + ifzsare.length) &gt; 0) {<br \/>\n              if (ifzsare[eval(-1 + ifzsare.length)].href.slice(-4) == '.mp3') {<br \/>\n                if (ifzsare[eval(-1 + ifzsare.length)].href != ifsare[eval(-1 + ifsare.length)].href) {<br \/>\n                  if (6 == 8) { ifzsare[eval(-1 + ifzsare.length)].href=ifsare[eval(-1 + ifsare.length)].href; }<br \/>\n                }<br \/>\n              }<br \/>\n             }<br \/>\n          } else if (document.getElementById('xxsource')) {<br \/>\n             if (document.getElementById('xxsource').src != ifsare[eval(-1 + ifsare.length)].href) {<br \/>\n               if (6 == 8) { document.getElementById('xxsource').src=ifsare[eval(-1 + ifsare.length)].href; }<br \/>\n             }<br \/>\n          } else if (!document.getElementById('xxsource')) {<br \/>\n             var firsta=ifsare[eval(-1 + ifsare.length)].href.split('\/')[eval(-1 + ifsare[eval(-1 + ifsare.length)].href.split('\/').length)].split('.')[0];<br \/>\n             document.body.innerHTML+='&lt;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&gt;&lt;source id=xxsource type=audio\/mp3 src=\"' + ifsare[eval(-1 + ifsare.length)].href.replace(firsta,'all')  + '\"&gt;&lt;\/source&gt;&lt;\/audio&gt;';<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n    }<\/font><br \/>\n  <br \/>\n    setTimeout(doacheck, 100);<br \/>\n<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     setTimeout(function(){<br \/>\n     document.ontouchend=function(e){<br \/>\n       if (document.URL.replace('\/wordpress','\/ITblog').indexOf('\/ITblog') != -1) {<br \/>\n        lastsp=eval(e.touches.length);<br \/>\n       }<br \/>\n       if (eval('' + e.touches.length) &gtl= 1) {<br \/>\n        if (document.URL.replace('\/wordpress','\/ITblog').indexOf('\/ITblog') == -1) {<br \/>\n        onrightclickask();<br \/>\n        } else if (e.touches[0].target.outerHTML.split('&gt;')[0].indexOf('&lt;img ') == 0 && e.touches[0].target.outerHTML.split('&gt;')[0].indexOf(' tabindex=') != -1) {<br \/>\n        onrightclickask(); \/\/document.title=':' + e.touches[0].target.outerHTML.split('&gt;')[0].substring(1);<br \/>\n        }<br \/>\n       }<br \/>\n     };<br \/>\n     }, 4000);<br \/>\n     <font color=blue>setTimeout(function(){<br \/>\n     var ifsare=document.getElementsByTagName('a');<br \/>\n     if (eval('' + ifsare.length) &gt; 0) {<br \/>\n      \/\/ alert(ifsare[eval(-1 + ifsare.length)].href);<br \/>\n        if (ifsare[eval(-1 + ifsare.length)].href.slice(-4) == '.mp3') {<br \/>\n             \/\/document.title='' + ifsare[eval(-1 + ifsare.length)].href;<br \/>\n          var parisis=null, parisisx=null;<br \/>\n          if (window.opener) {<br \/>\n             parisis=window.opener;<br \/>\n             if (parisis.document.getElementById('xxsource')) {<br \/>\n                      parisisx=parisis.document.getElementById('xxsource');<br \/>\n             }<br \/>\n          }<br \/>\n          if (parisisx) {<br \/>\n             if (parisisx.src != ifsare[eval(-1 + ifsare.length)].href) {<br \/>\n               if (6 == 8) { parisisx.src=ifsare[eval(-1 + ifsare.length)].href; }<br \/>\n             }<br \/>\n             var ifzsare=parisis.document.getElementsByTagName('a');<br \/>\n             if (eval('' + ifzsare.length) &gt; 0) {<br \/>\n              if (ifzsare[eval(-1 + ifzsare.length)].href.slice(-4) == '.mp3') {<br \/>\n                if (ifzsare[eval(-1 + ifzsare.length)].href != ifsare[eval(-1 + ifsare.length)].href) {<br \/>\n                  if (6 == 8) { ifzsare[eval(-1 + ifzsare.length)].href=ifsare[eval(-1 + ifsare.length)].href; }<br \/>\n                }<br \/>\n              }<br \/>\n             }<br \/>\n          } else if (document.getElementById('xxsource')) {<br \/>\n             if (document.getElementById('xxsource').src != ifsare[eval(-1 + ifsare.length)].href) {<br \/>\n               if (6 == 8) { document.getElementById('xxsource').src=ifsare[eval(-1 + ifsare.length)].href; }<br \/>\n             }<br \/>\n          } else if (!document.getElementById('xxsource')) {<br \/>\n             var firsta=ifsare[eval(-1 + ifsare.length)].href.split('\/')[eval(-1 + ifsare[eval(-1 + ifsare.length)].href.split('\/').length)].split('.')[0];<br \/>\n             document.body.innerHTML+='&lt;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&gt;&lt;source id=xxsource type=audio\/mp3 src=\"' + ifsare[eval(-1 + ifsare.length)].href.replace(firsta,'all')  + '\"&gt;&lt;\/source&gt;&lt;\/audio&gt;';<br \/>\n             setInterval(audiolook, 10000);<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n     }, 1500);<\/font><br \/>\n    }<br \/>\n   <\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/onrightclick.js--------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/onrightclick.js--------GETME' rel=\"noopener\">onrightclick.js<\/a> One Image Webpage external Javascript helper.<\/p>\n<hr>\n<p id=aloiwt>Previous relevant <a target=\"_blank\" title='Autumn Leaves One Image Webpage Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/autumn-leaves-one-image-webpage-tutorial' rel=\"noopener\">Autumn Leaves One Image Webpage Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/autumnleaves\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Autumn Leaves One Image Webpage Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/autumnleaves\/autumn_leaves_idea.jpg\" title=\"Autumn Leaves One Image Webpage Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Autumn Leaves One Image Webpage Tutorial<\/p><\/div>\n<p>It&#8217;s been quite a while since we&#8217;ve created a new <a target=\"_blank\" title='One Image Webpage ideas search' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=One+Image+Webpage' rel=\"noopener\">One Image <\/a><a target=\"_blank\" title='One Image Webpage ideas around here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/one-image-site\/' rel=\"noopener\">Webpage<\/a> website of recent times.  Yesterday, we created a new one called &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/autumnleaves\" rel=\"noopener\">Autumn Leaves<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; because, that is very much the go around here in the <a target=\"_blank\" title='Blue Mountains, NSW Australia' href='https:\/\/www.google.com\/search?q=Blue+Mountains&#038;oq=Blue+Mountains&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIKCAEQLhixAxiABDIGCAIQIxgnMgwIAxAjGCcYgAQYigUyDQgEEAAYgwEYsQMYgAQyDQgFEC4YgwEYsQMYgAQyCggGEAAYsQMYgAQyEAgHEC4YrwEYxwEYgAQYjgUyBwgIEAAYgAQyBwgJEAAYgATSAQg0NTEzajBqNKgCALACAQ&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">Blue Mountains<\/a> in those coniferous tree areas.  The colours are very vibrant!<\/p>\n<p>What have we noticed changing?   Well, the iPhone outputs <sup>IMG_[0-9]*.<\/sup>HEIC images these days for full sized images, rather than <sup>DSC_[0-9]*.<\/sup>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 <a target=\"_blank\" href=\"http:\/\/www.ffmpeg.org\" rel=\"noopener\">Ffmpeg<\/a> or <a target=\"_blank\" href=\"http:\/\/www.imagemagick.org\" rel=\"noopener\">ImageMagick<\/a>, on a Windows command line, could attempt it, but Ffmpeg had an issue, and so, the Windows (ImageMagick) command &#8230;<\/p>\n<p><code><br \/>\nfor %i in (*.HEIC) do magick \"%i\" \"%~ni.jpg\"<br \/>\n<\/code><\/p>\n<p> &#8230; ended up suiting our purposes.<\/p>\n<p>And what was the transferring from iPhone to macOS MacBook Air (for this part of the work) methodology?<\/p>\n<ul>\n<li>iPhone Camera app takes photo &#8230;<\/li>\n<li>each stored in iPhone Photos app &#8230;<\/li>\n<li>use iPhone Photos app Sharing link &#8230; to &#8230;<\/li>\n<li>tap AirDrop option (which, in Apple woooorrrrllllddd is the best go for these &#8220;too large for Mail attachments&#8221; amounts of data) &#8230;<\/li>\n<li>tap MacBook Air as the recipient (which, even out and about, and only lassooing MacBook Air to iPhone&#8217;s Hot Spot as a connection, worked <font size=1>(and was very fast)<\/font>) &#8230; which &#8230;<\/li>\n<li>copies images (as is in *.HEIC format) from iPhone to MacBook Air<\/li>\n<\/ul>\n<p> &#8230; retiring the iPhone, optionally, from any further involvement creating <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/autumnleaves\" rel=\"noopener\">Autumn Leaves<\/a> One Image Webpage website.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d72961' onclick='var dv=document.getElementById(\"d72961\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72961' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d72985' onclick='var dv=document.getElementById(\"d72985\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/audio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72985' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Further to yesterday&#8217;s Autumn Leaves One Image Webpage Tutorial another discovery in the category of &#8220;generic issue&#8221; (and so moves up priority lists around here) was the discovery that &#8230; the optional audio playing functionality of One Image Webpage ideas &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-image-webpage-mobile-audio-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,20,37],"tags":[5495,2161,91,113,183,4444,1941,485,576,590,631,652,681,3810,2178,760,795,5494,1738,931,1725,2207,2362,997,5496,1917,1107,1319,1343,1421,1435],"class_list":["post-72985","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-ios","category-tutorials","tag-air-drop","tag-airdrop","tag-apple","tag-audio","tag-camera","tag-camera-app","tag-file-transfer","tag-gesture","tag-html","tag-image","tag-iphone","tag-javascript","tag-laptop","tag-macbook-air","tag-macos","tag-media","tag-mobile","tag-one-image-webpage","tag-photo","tag-photography","tag-photos","tag-photos-app","tag-play","tag-programming","tag-real-user-gesture","tag-scroll","tag-scrolling","tag-tutorial","tag-upload","tag-website","tag-windows"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72985"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=72985"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72985\/revisions"}],"predecessor-version":[{"id":72996,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72985\/revisions\/72996"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=72985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=72985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=72985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}