CODEWITHSUNDEEP
javascriptjqueryturnjs
user1508332
user1508332

Reputation:

turn.js add sound when page is turned

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.

Upvotes: 6

Views: 3296

Answers (4)

Himanshu Bajpai
Himanshu Bajpai

Reputation: 21

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();
        }
    }
});

Upvotes: 1

sunil
sunil

Reputation: 872

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(); 
}

Upvotes: 0

oriadam
oriadam

Reputation: 8569

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);
});

Upvotes: 6

Vasia Dunaev
Vasia Dunaev

Reputation: 149

put your core in document ready section or run your function 

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

thanks!

Upvotes: 3

Related Questions