I am working very hard to get audio to play on my mobile phone with react 360. Through reading various documentation, I've learned that in order to play audio on mobile, I need to enact an html entity to create a user interaction. Once a user interacts by clicking the button, audio should be able to play on mobile. This does not seem to be the case.
In my index.html file I have the following code:
<html>
<head>
<title>ExampleVR</title>
<style>body { margin: 0; }</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<!-- Attachment point for your app -->
<div id="container">
<button id="enter" onclick="enterApp();">
Click to Enter VR
</button>
</div>
<script src="./client.bundle?platform=vr"></script>
<script>
// Initialize the React 360 application
function enterApp() {
React360.init(
'index.bundle?platform=vr&dev=true',
document.getElementById('container'),
{
assetRoot: 'static_assets/',
}
);
}
</script>
</body>
</html>
As you can see, I have created am html button that when clicked, loads my React 360 code . However, when I click a VrButton in mobile, it still does not play. I've followed the recommendations as documented and it works on all browsers on desktop with the exception of mobile. Does anyone know how to fix this problem?
This was the solution to fix the audio issue: