turn.js add sound when page is turned

Question

I would like to add a sound effect when a page is turned, using the turn.js jquery plugin. So the first step would be to test the function that does that according to the online documentation. So the code should be something like:

    <script type="text/javascript">
    function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            width:1000,
            height:680,
            elevation: 50,
            gradients: true,
            autoCenter: false,
    });
    $("#flipbook").bind("turned", function(event, page, view) { 
        alert("Page: "+page);
    });
    }

    yepnope({
    test : Modernizr.csstransforms,
    yep: ['../res_cod/js/turn.js'],
    nope: ['../res_cod/js/turn.html4.min.js'],
    both: ['../res_cod/css/basic.css'],
    complete: loadApp
   });
</script>

But the thing is nothing happens in the developers console. No alert, no nothing.

Perhaps your "loadApp" function is running before the DOM is built. — Pointy, Feb 20 '15 at 13:52

score 6 · Answer 1 · answered Dec 06 '16 at 16:41

6

It's just the selector you used is not the correct one - notice the difference between .flipbook and #flipbook

try this

$(".flipbook").bind("turned", function(event, page, view) { 
    console.log("Page: "+page);
});

answered Dec 06 '16 at 16:41

oriadam

7,747
2
50
48

score 3 · Answer 2 · answered Feb 20 '15 at 13:55

3

put your core in document ready section or run your function

$(document).ready(function(){
     //put your code here
   });

thanks!

answered Feb 20 '15 at 13:55

Vasia Dunaev

149
1
10

thanks for the insight, but the problem was the fact that in the online documentation the "#flipbook" was referenced as an id while in my project it was referenced as ".flipbook", a class. My bad. – Feb 20 '15 at 14:37

Himanshu Bajpai · Answer 3 · 2019-01-04T04:57:54.897

Please try this code and do not forget to download page-flip.mp3 file.You need to put the play sound code inside turning function

<audio id="audio" src="page-flip.mp3"></audio>

$('.flipbook').turn({
    width:1000,
    height:680,
    elevation: 50,
    gradients: true,
    autoCenter: false,
    when: {
        turning: function(e, page, view) {  
            var audio = document.getElementById("audio");
            audio.play();
        }
    }
});

score 0 · Answer 4 · answered Feb 15 '17 at 12:10

function loadApp() {
//$('#audio')[0].play();
// Create the flipbook

$('.flipbook').turn({

        //when:{turning:flip.playclip()},

        // Width

        width:922,

        // Height

        height:600,

        // Elevation

        elevation: 50,

        // Enable gradients

        gradients: true,

        // Auto center this flipbook

        autoCenter: true

});
}

// Load the HTML4 version if there's not CSS transform

yepnope({
test : Modernizr.csstransforms,
yep: ['../../lib/turn.js'],
nope: ['../../lib/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});








var html5_audiotypes={ //define list of audio file extensions
"mp3": "audio/mpeg",
"ogg": "audio/ogg",
"wav": "audio/wav",
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support         HTML5 audio unfortunately")}}
}
}
//Initialize sound clips with 1 fallback file each:
var flip=createsoundbite("YOURSOUND.ogg", "YOURSOUND.mp3","YOURSOUND.wav")







when:{turning:flip.playclip()}; // add this line to library of turn js on         line no
299 // when left 290// not good

1218// perfect left flip     //same 1540

1407// perfect corner on hover right

1493// perfect right flip

1511// per self closing

1555// per on opening

1575 //consider



2810 only when lft mouse


  or


you can just only add audio file and play when turning with 
var vid = document.getElementById("myVideo"); 

function playVid() { 
vid.play(); 
} 

function pauseVid() { 
vid.pause(); 
}

turn.js add sound when page is turned

4 Answers4