Mouseover sounds

[dani]

Hello,

here is the page in question : http://143.95.234.103/~dianasoh/do-re-mi

I'm trying to have mouseover sounds on the notes.

Here is the codepen : https://codepen.io/cestdani/pen/EwevqV

I placed this script in the 'HTML at top' section, but it's not working, and there are no errors. Help please!

<script>

window.laytheme.on("newpage", function(layoutObj, type, obj){

var s1 = new Audio("http://143.95.234.103/~dianasoh/wp-content/uploads/2017/10/1.mp3");
var s2 = new Audio("http://143.95.234.103/~dianasoh/wp-content/uploads/2017/10/2.mp3");
var s3 = new Audio("http://143.95.234.103/~dianasoh/wp-content/uploads/2017/10/3.mp3");
var s4 = new Audio("http://143.95.234.103/~dianasoh/wp-content/uploads/2017/10/4.mp3");
var s5 = new Audio("http://143.95.234.103/~dianasoh/wp-content/uploads/2017/10/5.mp3");
var s6 = new Audio("http://143.95.234.103/~dianasoh/wp-content/uploads/2017/10/6.mp3");
var s7 = new Audio("http://143.95.234.103/~dianasoh/wp-content/uploads/2017/10/7.mp3");
var s8 = new Audio("http://143.95.234.103/~dianasoh/wp-content/uploads/2017/10/8.mp3");

jQuery("#note1").mouseover(function() { playme(s1); });
jQuery("#note2").mouseover(function() { playme(s2); });
jQuery("#note3").mouseover(function() { playme(s3); });
jQuery("#note4").mouseover(function() { playme(s4); });
jQuery("#note5").mouseover(function() { playme(s5); });
jQuery("#note6").mouseover(function() { playme(s6); });
jQuery("#note7").mouseover(function() { playme(s7); });
jQuery("#note8").mouseover(function() { playme(s8); });

function playme(n) {
n.play();
}

});

</script>

[dani]

ah!

it works when i change 'newpage' to 'newpageshown'

window.laytheme.on("newpageshown", function(layoutObj, type, obj)

[dani]

but now this isn't working

jQuery('.fade').on("mouseover", function () {
    jQuery(this).fadeOut(1).delay(500).fadeIn();
}); 

any idea what is wrong?
(the same code works fine on another site here : http://duoxamp.com/ - the post-it note that fades in, then onclick it fades out)

[gdk]

@dani hi, did you make this work? I'm looking for the same. Which plugin / js script did you use? thank you!

[dani]

yeah i got it to work. put this in the 'Custom HTML at bottom'

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    var s1 = new Audio("http://kiti.ca/wp-content/uploads/2019/10/mew.mp3"); 
        jQuery(".mew").mouseover(function() { playme(s1); 
    });
});
    function playme(n) {
    n.play();
    };
</script>

attach the class .mew to whatever object you want to produce the sound on mouseover.

[mariusjopen]

Dear @dani
Thank you for helping!
We appreciate the time people take to make the LayTheme community stronger.
Best!
Marius