Skip to content

Commit

Permalink
Added workaround for no sound on iOS (web)
Browse files Browse the repository at this point in the history
- iOS gets a "Tap to start" overlay which must be tapped for sound to work. This is because starting in iOS 16 tapping the canvas no longer counts as a page interaction worthy of enabling sound.
  • Loading branch information
Sappharad committed Jan 30, 2024
1 parent f7ca94a commit 9b41276
Showing 1 changed file with 50 additions and 0 deletions.
50 changes: 50 additions & 0 deletions Oxygen/sonic3air/build/_emscripten/dist/sonic3air_web.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,19 @@
#root{
color: black;
}
#ios_workaround{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding-top: 40vh;
font-size: 2em;
user-select: none;
cursor: default;
background-color: rgba(0,0,0,50%);
}
</style>
<script src="browserfs.min.js"></script>
<script>
Expand All @@ -77,6 +90,36 @@
gameCanvas.style.width = "min(100vw, calc(100vh * 16 / 9))";
gameCanvas.style.height = "min(100vh, calc(100vw * 9 / 16))";
gameCanvas.style.marginTop = "max(0vh, calc(50vh - (100vw * 9 / 16 / 2)))";

if(isRunningOniOS()){
let iosoverlay = document.getElementById('ios_workaround');
if(iosoverlay){
iosoverlay.classList.remove('hidden');
}
}
}

function isRunningOniOS() {
return [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

function hideIOSoverlay(){
//iOS prevents websites from playing sound unless the user interacts with the web page first.
//Prior to iOS 16, tapping the canvas used to be enough to enable sound but now they need to tap a normal page element first.
//The full screen overlay on iOS is a workaround, once tapped sound will enable and we can get rid of the overlay.
let iosoverlay = document.getElementById('ios_workaround');
if(iosoverlay){
document.body.removeChild(iosoverlay);
}
}

function onPageLoaded(){
Expand All @@ -99,6 +142,10 @@
loader.setAttribute('src', 'loader.js');
document.body.appendChild(loader);
Module['calledRun'] = true; //We got here from pre-run, so loader needs to know that.

if(isRunningOniOS() == false){
hideIOSoverlay();
}
}

function onGameExit(){
Expand Down Expand Up @@ -333,6 +380,9 @@
<div id="gameView" class="emscripten_border">
<canvas class="emscripten" id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas>
</div>
<div id="ios_workaround" class="hidden" onclick="hideIOSoverlay()">
Tap to Start
</div>
<script>
var statusElement = document.getElementById("status"),
progressElement = document.getElementById("progress"),
Expand Down

0 comments on commit 9b41276

Please sign in to comment.