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

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.

@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>

@Fubeman, would you be able to break that process down for me? I would like to do the same thing, but I'm not sure how to get to the bit of code I need to get to in order to inject the code you shared >.<

Thanks so much! this is such a gem, was driving me crazy too!

Hey @Fubeman how can I make it work for media player in certain blog posts? Just tried it over at the Blog Header but in won't work.

Link to my site: https://kevin-biberbach-wedding.squarespace.com

Thanks for any help!

@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!

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!

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

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!

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

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.

Where in the Audio Block edit page do you insert the code? Thank you

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>

I am curious if anyone knows why this code no longer works. It seems to have changed in the last year. Does anyone know what the most updated code is?