Jump to content

How to play audio file in same window on mobile without Soundblock block?

Recommended Posts

Posted (edited)

Hi,

I want to embed an audio file that opens in the same window on my mobile device when I click to play it. The Soundclock block allows this but I don't want to use Soundcloud. Uploading a file or linking to an external means the file has to be opened in a separate window on my mobile to play it. Do you recommend another type of block that would allow me to play an audio file in the same window, and not open to a new window?

Thank you.

Edited by kashuda
  • 3 months later...
Posted

@kashuda, The good fellas over at [squarespaceWebsites][1] updated their finding in the SQS widget script which allows the Squarespace audio block to play WITHOUT opening a new window with the default IOS media player. Just code inject this into your page header where you audio block lives and all is well again. Thank god as this was driving me f**king bonkers!! Apparently is needs to be with a "domready" function as opposed to the old "squarespace:initialized"Ok here it is:


<script>
 Y.on('domready', function(){
       Y.UA.ios = 0; //Y.UA object have test key for different platforms.
   //Setting ios value to 0 here allow to skip default Audio Block's behavior
 })
</script>




  • 5 months later...
  • 2 weeks later...
  • 4 months later...
  • 2 months later...
Posted

@Fubeman this is working for me in safari, but on chrome, the first time i tap 'play,' it still opens up the native iOS player. i have to go back in my browser and then tap 'play' again for it to play on the same page. any help troubleshooting would be much appreciated!

  • 1 year later...
Posted

Sadly, this is not working for me.... is there a solution?

Re: MobileEssentially, I have a written article on the webpage for which there is an audio file. I want the user to be able to play the audio and read the article at the same time.

It seems to be possible on the desktop, but not on mobile.

Please help, thank you so much!

  • 1 year later...
Posted

Hello, this is ancient, but issue is still here. Shared code snippet does not solve the issue anymore (if it ever did).

Im trying to get the audio on same tab at mobile in iOS. Is there any way to do so?

Any help appreciated

  • 1 month later...
Posted

I have the same content scenario - audio block with text and images, but when the audio is iniated on mobile, the iOS player takes over the screen.

 

Hoping for a workaround.

On 8/24/2018 at 11:29 PM, Global1570048496 said:

Sadly, this is not working for me.... is there a solution?

Re: MobileEssentially, I have a written article on the webpage for which there is an audio file. I want the user to be able to play the audio and read the article at the same time.

It seems to be possible on the desktop, but not on mobile.

Please help, thank you so much!

 

  • 2 months later...
Posted

Hey, for those who recently have ran into this issue. I found a fix!

 

<script>
  window.addEventListener("load", function(){
        Y.UA.ios = 0; //Y.UA object have test key for different platforms.
    //Setting ios value to 0 here allow to skip default Audio Block's behavior
  })
</script>

 

inject the following code into the page settings that contains the audio blocks.

Found all the info on the matter here: https://www.squarewebsites.org/blog/prevent-squarespace-audio-blocks-open-in-player-on-ios-devices

 

  • 2 months later...
Posted
On 8/27/2020 at 4:46 PM, kmckaybai said:

into the page settings that contains the audio blocks

I inserted this script and it worked perfectly. Does anyone know why Squarewebsites recommends inserting it into specific pages rather than using the site-wide Code Injection? I'm using audio blocks on many pages and I'd rather save myself the hassle if its an option to inject it site-wide.

His blog article says, "I didn't try if something another falls, so you may inject this (page or collection Advanced Tab) only on page with your Audio Blocks." But I wasn't sure what that meant.

  • 4 weeks later...
  • 3 weeks later...
Posted

This code should help. It is based on the guidance provided by @Fubeman1570048166

Anywhere on the page where you can insert a code block (Blog header code injection, site header or footer injection,...etc.) copy/paste the following.

<script>    
whenReady = function (readyFunc, actionFunc, options) {
    if (readyFunc()) {
        actionFunc.apply(this);
    } else {
        if (!options) options = {};
        if (!options.current) options.current = 0;
        if (!options.max) options.max = 60000;
        if (!options.interval) options.interval = 500;
        if (options.current < options.max) {
            setTimeout(function () {
                options.current += options.interval;
                whenReady(readyFunc, actionFunc, options);
            }, options.interval);
        } else if (options.ontimeout) {
            options.ontimeout();
        }
    }
    return true;
};

whenReady(

    function () {
        return window.hasOwnProperty("Y");
    },

    function () {

        Y.UA.ios = 0;

    }, // action function
    { //this is only necessary if you need to do something on timeout.
        ontimeout: function () {
            console.log('*** Inline Mobile Player Timing out ***');
        }
    } //ontimeout // action function
); // whenReady
</script>

 

  • 1 year later...

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.