Jump to content

getting music to play in the background of my homepage naturally - no blocks for it seen

Recommended Posts

Hello

I hope you can help

I have embedded some code in the "weddings" page on my site that allows music to be played as soon as someone opens that page. This works all fine when looking at the page through google chrome or Edge, but when I look at the page through an iOS device, the music doesn't load automatically and the audio block that I added (which is nicely hidden when looking at the page through chrome or Internet Explorer), is visible.

I am trying to get it so that the experience for visitors using iOS is the same as those viewing from chrome etc.

The website is www.paulmartinguitar.com

Hoping someone might be able to help me.

The code I used to embed the music is:

<script>
window.addEventListener('DOMContentLoaded', function() { //wait for document load
    var audio = document.querySelector('.sqs-audio-embed'); //select the audio block
    if (!Y.UA.mobile) { //it is not mobile
        var checkOnScroll = function() {
            if (window.pageYOffset > 200) {
                audio.pause();
            } else {
                audio.play();
            }
        };
        if (audio) {
            var url = audio.getAttribute('data-url'); //get the audio src
            Y.one(audio).ancestor('.sqs-block-audio').setStyle('display','none');
            audio = new Audio(url);
            window.addEventListener('scroll', checkOnScroll); //listen for window scroll and toggle audio state
            checkOnScroll();
        }
    }
})
</script>
Link to comment
14 hours ago, pamartin said:

Hello

I hope you can help

I have embedded some code in the "weddings" page on my site that allows music to be played as soon as someone opens that page. This works all fine when looking at the page through google chrome or Edge, but when I look at the page through an iOS device, the music doesn't load automatically and the audio block that I added (which is nicely hidden when looking at the page through chrome or Internet Explorer), is visible.

I am trying to get it so that the experience for visitors using iOS is the same as those viewing from chrome etc.

The website is www.paulmartinguitar.com

Hoping someone might be able to help me.

The code I used to embed the music is:

<script>
window.addEventListener('DOMContentLoaded', function() { //wait for document load
    var audio = document.querySelector('.sqs-audio-embed'); //select the audio block
    if (!Y.UA.mobile) { //it is not mobile
        var checkOnScroll = function() {
            if (window.pageYOffset > 200) {
                audio.pause();
            } else {
                audio.play();
            }
        };
        if (audio) {
            var url = audio.getAttribute('data-url'); //get the audio src
            Y.one(audio).ancestor('.sqs-block-audio').setStyle('display','none');
            audio = new Audio(url);
            window.addEventListener('scroll', checkOnScroll); //listen for window scroll and toggle audio state
            checkOnScroll();
        }
    }
})
</script>

I’m not sure about why the audio player is showing but not playing automatically is the default setting for Safari and I don't believe it's something that you can change on your end. 

Sayre

Design: (Recently rolled into the Italian Journey under Services)

Author Coordinates: https://bio.site/sayreambrosio

Italian Journey: https://bio.site/ambrosiosjrnyhm

Link to comment
29 minutes ago, pamartin said:

Oh, that's a real shame, makes the iOS version of the page look clunky compared to the Chrome etc.

Is there any advice you can give on this?

Not on the way to fix it. Someone with more coding experience may have some ideas. 
 

On accessibility I do. In general, it’s a bad practice to have music and video auto load. If somebody goes to your site with a screen reader, or some other assistive device, it can actually be the reason that they leave your site because they can’t navigate it.
 

For example, if they’re visually impaired their reader is going to be telling them how to navigate and if you have music playing automatically they won’t be able to hear it and will leave. 

Sayre

Design: (Recently rolled into the Italian Journey under Services)

Author Coordinates: https://bio.site/sayreambrosio

Italian Journey: https://bio.site/ambrosiosjrnyhm

Link to comment
  • 2 months later...

We can use custom code to achieve this (require a Business Plan or higher). But it will certainly annoy some users. I myself really hate sites that automatically play videos or turn on music, and I can't turn it off except turn off the volume on pc.

What is your site url?

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
On 7/19/2023 at 12:04 PM, georgiafitzgerald said:

how do i get music playing in the background? when someone enters the site - ideally i do not want them to see any music blocks

I agree with Tuan. Adding music may be detrimental to the user’s comfort and focus so shouldn't be started without warning - even on musician sites. You have no idea what kind of environment the user is going to be in. Loud music may be a deal breaker or the user may just be listening to music of their own choice. 

That said, if music is essential to the experience and you make it very obvious how to stop it, there are ways to achieve this with JavaScript. If you want the music to continue between pages, you'll only be able to achieve this on Brine family templates on the older Squarespace 7.0 platform. Newer templates don't support Ajax page loading and so will stop the music each time a link is clicked.

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 4 months later...

I'm having the same issue. My code block will not play. Please help me.

<script>
window.addEventListener('DOMContentLoaded', function() { //wait for document load
    var audio = document.querySelector('.sqs-audio-embed'); //select the audio block
    if (!Y.UA.mobile) { //it is not mobile
        var checkOnScroll = function() {
            if (window.pageYOffset > 200) {
                audio.pause();
            } else {
                audio.play();
            }
        };
        if (audio) {
            var url = audio.getAttribute('

'); //get the audio src Y.one(audio).ancestor('.sqs-block-audio').setStyle('display','none'); audio = new Audio(url); window.addEventListener('scroll', checkOnScroll); //listen for window scroll and toggle audio state checkOnScroll(); } } }) </script>

Link to comment

Help! I've created a website for a wedding. I want music to play automatically as the page loads. I've tried to embed a Soundcloud link and Enabled Automatic Play from SoundCloud for the track to play automatically when the page loads. This does not work. So, I've embedded a code block on the page, and still the song won't play. I've used HTML and Javascript and tried different links, but the music will not play whatsoever. Please advise. Thank you in advance.

I'm having the same issue. My code block will not play. Please help me.

<script>
window.addEventListener('DOMContentLoaded', function() { //wait for document load
    var audio = document.querySelector('.sqs-audio-embed'); //select the audio block
    if (!Y.UA.mobile) { //it is not mobile
        var checkOnScroll = function() {
            if (window.pageYOffset > 200) {
                audio.pause();
            } else {
                audio.play();
            }
        };
        if (audio) {
            var url = audio.getAttribute('

'); //get the audio src Y.one(audio).ancestor('.sqs-block-audio').setStyle('display','none'); audio = new Audio(url); window.addEventListener('scroll', checkOnScroll); //listen for window scroll and toggle audio state checkOnScroll(); } } }) </script>

Link to comment
  • 6 months 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.