3D FlipBook - Adding Audio

Hi, Use JavaScript notifications:

function init(jContainer) {
  console.log(jContainer);
  console.log('init');
  return { // set of callbacks
    hide: function() {console.log('hide');},
    hidden: function() {console.log('hidden');},
    show: function() {console.log('show');},
    shown: function() {console.log('shown');},
    dispose: function() {console.log('dispose');}
  };
}; init

pause on hide, play on shown.

Hi

Thanks for replying.

Really Sorry, it is probably me but this doesn't work. The audio continues to play the first/previous one when the next page to selected.

Here is what I have:

CSS
.center-page {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
iframe {
  border: 0;
}

HTML
<audio controls autoplay>
  <source src="https://website.co.uk/audiofile.mp3" type="audio/mpeg">
</audio>

Java Script
function init(jContainer) {
  console.log(jContainer);
  console.log('init');
  return { // set of callbacks
    hide: function() {console.log('hide');},
    hidden: function() {console.log('hidden');},
    show: function() {console.log('show');},
    shown: function() {console.log('shown');},
    dispose: function() {console.log('dispose');}
  };
}; init

Hopefully you can see where I am going wrong. Thank you in advance for your help.

1 page:

html:
<span></span>
js:
function init() {
  window.fbfns = {
    playAudio: function(c,name) {
      var aud = c.find('.'+name)[0];
      aud.play().catch(function(e) {
        aud.noPlay = false;
        setTimeout(function() {if(!aud.noPlay) fbfns.playAudio(c,name);}, 200);
      });
    },
    pauseAudio: function(c,name) {
      var aud = c.find('.'+name)[0];
      aud.pause();
      aud.noPlay = true;
    }
  };
}; init

5 page or any other:

html:
<audio class="audio1" src="http://wordpress/wp-content/uploads/custom/audio1.mp3"></audio>
js:
function init(c) {
  return {
    hide: function() {fbfns.pauseAudio(c,'audio1');},
    shown: function() {fbfns.playAudio(c,'audio1');},
    dispose: function() {fbfns.pauseAudio(c,'audio1');}
  };
}; init

Thank you for all your help. Unfortunately none of this is working. The audio either doesn't play at all or it doesn't stop. Not to worry, I will look into alternatives. Thank you anyway.

Good luck!

Since 1.10.5 you need just:

html:
<audio class="play-on-shown pause-on-hide" src="http://wordpress/wp-content/uploads/custom/audio.mp3"></audio>

Excellent! I have just updated to 1.10.5 and it works well.

Thank you for coming back to me. I can now continue with the project which is great. Cheers

Hello, do you have to have the pro version to add this html code or is the free version enough?

free is enough

So I don’t understand why it doesn’t work. I’ve upload my audio on WordPress and I’ve copied it after src

Oh I found the solution, I copy the word html, I thought it was with the code. Sorry

Hi there,

I can't seem to embed audio to my pdf following the html youtube tutorial, it doesn't seem to work?

Could you write a link to the book page?

sorry could you elaborate?...on account of my dyslexia, thanks

hello?

We will help, but we need to check the book, so please write a link to it's page. You can email us author@3dflipbook.net

okay sorry i just got what you meant by 'write a link', I've emailed you, its a password protected page as my site is under construction, I've provided the password, the email will expire by tomorrow. cheers.

did you receive it?

Preciso de cada página que tiver o áudio, eu possa controlar o volume fixo para cada áudio, exemplo um áudio fica volume 10 que é o valor máximo outro posso deixar volume 7 ou 5 ou 2 que já é bem baixinho

Outra coisa por exemplo tenho um áudio rodando na página 2 quero que ele fique tocando até a página 5 aí na página 6 ele entra em pause