Jump to content

How To Remove Mobile Audio UI?

Go to solution Solved by tuanphan,

Recommended Posts

Hola Everyone! 

On non-mobile, when someone hits the play button on the two audios I have on my site, a progression bar shows how long the audio is (about 5 minutes each) and keeps them on the page. On mobile, clicking on the audio launches a player only window- no site nav or back button, and no progress bar. That's really bad UI! Expecting visitors who arrive on your site cold to hit a back button or not get confused by the lack of navigation, no information, makes zero sense. I'm rolling the dice by having audio on mobile. Is there a way to force mobile plays of website audio to stay on the mobile page? Any sage insights are greatly appreciated. 

Thanks,
Bobby

Link to comment
  • Replies 10
  • Views 371
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
12 hours ago, BobInAustin said:

Ah man, sorry Tuan. I never get notified and even after checking, didn't know you asked for this @tuanphan  You'll have to open this on mobile to see what I'm talking about. The web and tablet interface is fine, but the mobile is really bad. Pops into an audio only audio - so easy for someone to get confused and click away after the audio plays. 

https://bobbyford.io/

 

It shows this to me on mobile (Samsung/Chrome). I think both look same?

image.thumb.png.7fb4267f89873c5ae19a67076c8d46d6.png

and on Desktop

image.thumb.png.f42afb3670d20208ff9d420dc0398a71.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
8 hours ago, BobInAustin said:

 

On the iPhone, it leaves the page and populates the image below. Also, notice the url? Odd @tuanphan

 

image.jpeg.46381e4b9a40adb62c8a408fc7a656ae.jpeg

You try adding this to Code Injection > Footer to prevent audio open in new tab in iOS

<script>
  window.addEventListener("load", function(){
    Y.UA.ios = 0; 
  })
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I'm crosslinking this thread to my original answer from 2021:

 

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.