Adding audio in flipbook

Question

Hello,

I'm doing a flipbook catalog for my company and I would like to add a music in background so when you flip the pages you have the music playing all along.

I tried but the music is reseted every time you turn a page.

I know there is a way to do this by modified the HTML5 code lines but I don't know it.

Thank you.

Answer 1

You can add music to your flipbook to play in the background by doing the following:

1. Place the sound on the Master page that is applied to the flipbook
2. Select the audio and go to in5 > Interactive Widgets > Audio
3. In the Audio Settings dialog, select Play in Background
4. If you have other audio or video, you may want to select Pause Other Media During Playback
5. If the clip is short and you want it repeat, select Loop
6. If you don't want the controllers to show, under Controller Display select Hide
7. Add a button to the first page (It can be an invisible button, a rectangle with no stroke and no fill. You would add the button because without user interaction, some browsers will limit auto play.)
8. Set the button Event to On Release or Tap, the Action to Sound, the Sound to the name of the sound file, and Options to Play

Here's more information on audio

• Adding Audio & Video

Comments

Thank you, I'm gonna check that :) and I will let you know if I succed

---

I would like the music to play automatically without clicking on a button. I did check the "autoplay" option but when I'm on my flipbook, the music only start when I flip the next page and come back ... Any idea ?

---

As noted, some browsers restrict autoplay without some sort of interaction. The solution is to either add a button or start the sound after the first page (navigating to the next page is the interaction in this case). If selecting "Play in Background" doesn't work to play across pages, try this .js which you'll attach as a resource:
 

stopAllMedia = function (targ) {
 if(!targ) targ = document;
 $(targ).find('audio,video').each(function() {
  var media = $(this)[0], player = media.player || media;
  if($(this).parents('.page').index() == 0) return false;
  try{player.pause(); media.currentTime = 0;}catch(e){}
 });
}