Audio javascript working on desktop but not on iOS

Can someone help with this?
I’m working on a widget for iBooks Author and I’m having issues with audio playback on iOS not acting like it does on macOS.

The audio elements in this project are triggered with javascript functions.

I have it working great on desktop browsers, but on iOS (with either Hype Reflect or running in a mobile browser on iPhone or iPad Pro) it has three problems:

  1. the top and bottom buttons don’t mute the audio like it’s supposed to (this works fine on desktop).

  2. the metronome button on the bottom far right is supposed to mute the click, but it doesn’t affect the click at all (this feature also works great on desktop).

  3. When the play button is clicked, the playback timing of the three tracks (Top audio, Bottom Audio and Click Track) seems a bit off. (Again, on desktop, the three audio tracks synchronize great and appear to start simultaneously as intended). There seems to be a lag between tracks on iOS.

Here are my questions:

  • Are these issues due to iOS limitations?
  • Is there some way I can alter the functions I wrote to work on iOS?

I’ve included the demo - please let me know if you have any ideas on how to get this to work.

Thanks so much!

Bach-iPhoneX-demo.hype.zip (1.2 MB)

Hi Raleigh!

I do not have the time to explore your uploaded Hype project in depth but I noticed You are using “.mp3” files… according to this post by @Daniel iBooks requires “.m4a” (ACC) files:

Adding Audio and Video to your iBooks Widget

Also iOS does not allow volume to be set by JavaScript - that includes muting. Just below is the link to the “iOS-Specific Considerations” page of the Apple Developer site re: Audio & Video.

https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Also - as You probably know - your “control” buttons at the bottom of the page overlap and cover each other when the page is narrowed.