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>
