CODEWITHSUNDEEP
javascriptturn.js
Massimo Manca
Massimo Manca

Reputation: 471

How to play an audio file after turning a page in turn.js?

I am trying to play an audio file turning a page using turn.js; it is not a flip sound, it is the audio of the text printed in that couple of pages or a music if on the pages there is the text of a song. Seems that I am able to play it but I am not able to stop the sound if the user turns the page prematurely. In that case I want to stop the already playing sound and then start to play the sound of the page he just turned.

I put my little experimental code on the event linked to page turned and I attached here my little test code (I modified slider.hml in the magazine example folder):

var gAudio = null

function loadApp() {
  // I omitted the non relevant code part
  turned: function(event, page, view) {

    disableControls(page);

    $(this).turn('center');

    $('#slider').slider('value', getViewNumber($(this), page));

    if (page == 1) {
      $(this).turn('peel', 'br');
    }
    if (gAudio) {
      gAudio.stop();
    }
    // [MM] it is just a test, I will have a sound file every 2 pages
    gAudio = new Audio('paudio/' + page.toString() + '.mp3');
    gAudio.play();
  },

Upvotes: -1

Views: 158

Answers (1)

Massimo Manca
Massimo Manca

Reputation: 471

I found a solution that simply works, this is the relevant part of code:

function loadApp() {
  $('#canvas').fadeIn(1000);
  var flipbook = $('.magazine');
  var audio = null;

  // Check if the CSS was already loaded
  if (flipbook.width()==0 || flipbook.height()==0) {
    setTimeout(loadApp, 10);
    return;
  }
    
  // Create the flipbook
  flipbook.turn({
  // Magazine width
  width: 922,
  // Magazine height
  height: 600,
  // Duration in millisecond
  duration: 1000,
  // Enables gradients
  gradients: true,
  // Auto center this flipbook
  autoCenter: true,
  // Elevation from the edge of the flipbook when turning a page
  elevation: 50,
  // The number of pages
  pages: 12,
  // Events
  when: {
    turning: function(event, page, view) {  
    var book = $(this),
    currentPage = book.turn('page'),
    pages = book.turn('pages');
    // Update the current URI
    Hash.go('page/' + page).update();
    // Show and hide navigation buttons
    disableControls(page);
    if (audio != null) {
        audio.pause();
    }
  },
  turned: function(event, page, view) {
    disableControls(page);
    $(this).turn('center');
    $('#slider').slider('value', getViewNumber($(this), page));
    if (page==1) { 
        $(this).turn('peel', 'br');
    }
    audio = new Audio('paudio/'+page.toString()+'.mp3');
    audio.play();
  },
  missing: function (event, pages) {
      // Add pages that aren't in the magazine
      for (var i = 0; i < pages.length; i++)
            addPage(pages[i], $(this));
    }
  }
});

Upvotes: 0

Related Questions