Audio on iOS Safari not stopping

Q&A about the latest versions
Post Reply
Carolyn
Posts: 26
Joined: Fri Jun 07, 2013 10:16 am

I have a splash screen, which when clicked, triggers audio on iOS. If the home button is used to click away Safari while the audio is still playing, the audio continues playing. Closing the tab, or removing Safari from being on in the background does end the sound, but it would be more user-friendly to have the audio stop when Safari is "closed" using the Home button.

Is there a way to do this?

Thanks.
Carolyn
Posts: 26
Joined: Fri Jun 07, 2013 10:16 am

Ok, so I found out about the page/hide thing that should work. The following code *does* work if I just have an HTML page with a movie or audio element and it will work on both my desktop and on Safari on my iPad -- yeah! However, I can't figure out how to make it work with my p2VR project. Can any of you whizzes at coding help out?

I want to silence the _background audio (the p2vr id) when Safari is put into the background using the Home button on the iPad. This also works to silence the audio if a new tab is opened on the desktop browser.

This is the code I need help with (the example used a video element and I just left the terminology as is to minimize typing errors while I figure this out. Here, I changed the video to audio tag. I have tried just using the p2vr id of _background):

<audio id="videoElement" controls >
<source src="gulls.m4a" type="audio/mp4" >

<p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
</audio>



<script>
// Inline code is for educational purposes. Best practice is to put your scripts in external files.
// Based on the tutorial at https://developer.mozilla.org/en-US/doc ... bility_API

function() {
'use strict';

// Set the name of the "hidden" property and the change event for visibility
var audio
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") { // Firefox up to v17
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") { // Chrome up to v32, Android up to v4.4, Blackberry up to v10
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}

var videoElement = document.getElementById("videoElement");

// If the page is hidden, pause the video;
// if the page is shown, play the video
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}

// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
alert("This demo requires a modern browser that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);

// When the video pauses and plays, change the title.
videoElement.addEventListener("pause", function(){
document.title = 'Paused';
}, false);

videoElement.addEventListener("play", function(){
document.title = 'Playing'
}, false);
}

};
</script>

Thanks,
C
Post Reply