I have been attempting to fix an issue my website has been having with autoplay and mobile devices. I currently have a little beep that plays when loading the next page. The only way the website can tell if it is supposed to beep is via loading the next page, so I can't just play the beep every time the user jumps from one page to the next. My goal is to get this working on iPads with the latest version of iOS.

I am aware that the <audio> tag's autoplay feature is turned off for mobile devices, requiring user interaction to play audio. So I have been working with Javascript to try to get a beep to play.

So far here are two of my attempts so far:

function beep() {
        ( 
           new  Audio("App_Themes/Default/Images/Ding.mp3" )).play();
}

Select all Open in new window

And this is another attempt:

function beep(){
            var aud = document.createElement("iframe");
            aud.setAttribute('src', "App_Themes/Default/Images/Ding.mp3");
            aud.setAttribute('width', '1px');
            aud.setAttribute('height', '1px');
            aud.setAttribute('scrolling', 'no');
            aud.style.border = "0px";
            document.body.appendChild(aud);
        }

Select all Open in new window

Both of which work on desktop browsers, but not mobile. So I guess my question is, is it possible to get around the user interaction limitation mobile browsers set? Is there another way I should be doing this?