0

I want to build an app using jQuery-Mobile which every single page contains an image and autoplay audio. when the first page is swiped to the next page, the first page's audio stops playing and the second page's starts playing. Can anyone help me how to do it or inform me a plugin.

Thanks in advance!

Omar
  • 32,302
  • 9
  • 69
  • 112
Teamir Gassese
  • 23
  • 5

1 Answers1

0

Use jQuery Mobile pagehide or pagebeforehide events to stop audio files.

$(document).on('pagebeforehide', function () {
  $(this).find('audio').each(function () {
    $(this)[0].pause();
  });
});
Omar
  • 32,302
  • 9
  • 69
  • 112
  • No idea whats going on, but on Android 4.1 i have to pause the audio *before* pagebeforehide happens or it will just continue playing. – jgillich Jul 14 '13 at 08:36
  • @jgillich what do you mean before `pagebeforehide`? Pause audio manually or programmatically? – Omar Jul 14 '13 at 10:51
  • Ya thats cool.. but when the first page is swiped, the whole page's audio stops. What I want is to stop the first page and play the next page. What shall I do? Thanks – Teamir Gassese Jul 17 '13 at 11:48
  • The code above stops audio on the current/active page. Can you post some relevant code? @TeamirGassese – Omar Jul 17 '13 at 12:40
  • ` `
    `
    Content Here
    Content Here
    `     – Teamir Gassese Jul 17 '13 at 15:50
  • @Omar Programmatically, I don't use controls. But your code works fine on any desktop browser, just not on a Android 4.1 device, probably yet another bug of the Android WebView. – jgillich Jul 18 '13 at 15:04
  • I also tried to call pause() on the element directly; the element is found and pause() caused no errors, but it just continued playing. Just wanted to note this in case someone else stumbles over this issue. – jgillich Jul 18 '13 at 15:06
  • @jgillich then maybe Android WebView doesn't support `audio` features. It should support HTML5, weird. I will look it up. – Omar Jul 18 '13 at 16:17
  • @jgillich http://stackoverflow.com/questions/10599739/does-android-webview-browsers-support-html5-features – Omar Jul 18 '13 at 16:26
  • `audio` works fine. I have tried two things to stop audio when the user navigates away: 1. Your code from above. When I click a button linking to another page, pause() executes, page changes but audio keeps playing. 2. Bind a function to a button that calls pause() *before* calling $.mobile.changePage(). This does actually work, audio pauses and page change happens. – jgillich Jul 18 '13 at 16:46
  • @jgillich so `pagehide` or `pagebeforehide` events dont stop audio? – Omar Jul 18 '13 at 16:49
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/33714/discussion-between-omar-and-jgillich) – Omar Jul 18 '13 at 17:03
  • hi @omar, if you're interested in HTML5 consulting for a mobile app for iOS devices, could you please email me at info at panabee dot com? thanks. – Crashalot Jul 19 '13 at 08:05
  • Hi @Crashalot thanks for your offer. We are actually discussing Android WebView capabilities. If you have any addition, please feel free :) – Omar Jul 19 '13 at 08:48