Twine audio/images not loading correctly for mobile

Hello, I’m very new to the coding/twine world, please if you have any solutions explain them basically so I can try and wrap my brain around it.

I’ve recently made my first twine and have exported the html to itch.io so it can be tested.

I have tested the html on my computer and it works perfectly on all browsers, however when I try to optimise it for mobile the images are out of screen and the audio will not fade out, and therefore stacks all the audio tracks ontop of one another as you progress.

i’m using very basic macro’s for eg:
<<loopsound “door openclose.wav” >>

and

<<fadeoutsound “door openclose.wav” >>
<<fadeinsound “Calm Tavern Music.wav” >>

These macro’s are not being received when played through mobile on the itch server. Does anyone have any solutions?

Please feel free to test it here: https://steriotyper.itch.io/tavern-story
The password is: twinery

Thanks so much.

There are a number of potential issues with the HTML file and the audio files it is referencing:

1: It takes time to download the media resources used by your project, and the more MBs you pre-download the longer it takes for things to stabilise, which in turn effects the potential delay before a audio file will start playing.

For example if I use the Network tab of my web-browser’s Web Developer Tools to view what resources are being downloaded when I view the initial Passage of your story, I see that there are: 97 requests for a total 55.4 MBs of resources which take 1.6 minutes to download. And that three of the wav files (“Elf Music.wav”, “Mystic Music.wav”, and “Dwarven Music.wav”) are each 3.1 MB in size.

If I wait on that initial Passage until all the resources have downloaded then the audio files playing on the next two Passage start instantly. If on the other hand I don’t wait for all the resources to download then there is a long delay before music starts playing for the Passage that starts with “You’ve lived here all your life and you…”

2: Including punctuation characters (like space) in file names can cause issues when referenced by a web-application, so I would advise replacing them with either standard dash or underscore.
eg. <<loopsound “door openclose.wav” >> would be better named…

<<loopsound “door-openclose.wav” >>
or
<<loopsound “door -openclose.wav” >>

3: Letter casing of file names and the URLs that reference them need to be exactly the same, and depending on the end-user’s Operating System’s configuration letter casing can important. Which is why many web developers still only use a single letter casing when naming files.
eg. “Background.mp3” and “background.mp3” can be considered two different files.

1 Like

I use AXMA with background music and sounds, and I’ve noticed that mobile often plays the music but not the sounds. This may be a hardware sound limitation on phones and certain devices.

I’m not sure why AXMA behaves that way, but there is no distinction between sound effects and music in SugarCube, they’re both just tracks, and they work fine on mobile, outside the normal initial autoplay restrictions.

It’s possible AXMA uses the HTMLMediaElements API for music and the Web Audio API for sound effects or something strange like that. It could also be a file format support issue, if you aren’t consistent about that.

1 Like

It’s possible. Music is played from an external track and sounds are loaded in the HTML, so I figured it was an issue that mobile devices might not be able to play tracks from two separate sources simultaneously.