Hover and Click Sounds for UI Elements of Twine (Sugarcube) using Javascript

Question

I am using the latest version of Twine, 2.5.1 and Sugarcube for the story format (https://twinery.org). My question revolves around HTML and Javascript coding. Every Twine forum I've tried to join is not currently joinable for different reasons; either they haven't enabled captcha, or currently new members are not permitted by them.

I am currently using:

/* Play Sound on "a" Hover */
$(document).on("mouseenter", "a", "Dialog.addClickHandler()", function () {
$("<audio></audio>").attr({
    src      : "Assets/Audio/Menu/button_hover.ogg",
    autoplay : "autoplay"
});
});


/* Play Sound on "a" Click */
$(document).on("mousedown", "a", "Dialog.addClickHandler()", function () {
$("<audio></audio>").attr({
    src      : "Assets/Audio/Menu/button_click.ogg",
    autoplay : "autoplay"
});
});

This works well for most places. I have had to add a wrapper in some areas:

<a href="#"> (Around a Button, for example)</a> 

And that fixes that area. I'm not experienced enough to know a true solution, so I use work-arounds when I can discover they work.

I am trying to get sounds for hover and click for all UI elements, especially the popup windows that have an X at the top right to close, and any buttons that are contained within them.

An example of one area I want to add sounds to is the Save Box that pops up. There are a total of 14 buttons in that box. (Button 1) the X at the top right (Buttons 2-11 are the five save and five delete save buttons) Save...... Delete (Buttons 12-14) Export to disk, Load from Disk, Delete all saves.

X TOP RIGHT TO CLOSE
<button id= "ui-dialog-close" class="ui-close">

SAVES
<button id= "saves save-0" class="save ui-close">
<button id= "saves save-1" class="save ui-close">
<button id= "saves save-2" class="save ui-close">
<button id= "saves save-3" class="save ui-close">
<button id= "saves save-4" class="save ui-close">

DELETE SAVES DIRECTLY ACROSS
<button id= "saves delete-0" class="delete">
<button id= "saves delete-1" class="delete">
<button id= "saves delete-2" class="delete">
<button id= "saves delete-3" class="delete">
<button id= "saves delete-4" class="delete">

SAVE TO DISK
<button id= "saves-export" class="ui-close">

LOAD FROM DISK
<button id= "saves-import">

DELETE ALL SAVES
<button id= "saves-clear">

I would also like the sounds to play on hover and click for the corresponding buttons that are made when the save is created, the Load Buttons for each save

LOAD BUTTONS MADE AFTER SAVES
<button id= "saves load-0" class="load ui-close">
<button id= "saves load-1" class="load ui-close">
<button id= "saves load-2" class="load ui-close">
<button id= "saves load-3" class="load ui-close">
<button id= "saves load-4" class="load ui-close">

My first thought was to look at Direct Assignment per the Element ID's but I also want it to work for any Button and clickable element.

Does anyone have a suggestion or solution that will work for this?

I have been trying direct assignment by ID within Javascript but I haven't found a solution that works.

EDIT I was able to sort out part of the issue:

/* Play Sound on "button" Hover */
$(document).on("mouseenter", "button", "Dialog.addClickHandler()", function () {
$("<audio></audio>").attr({
    src      : "Assets/Audio/Menu/button_hover.ogg",
    autoplay : "autoplay"
});
});


/* Play Sound on "button" Click */
$(document).on("mousedown", "button", "Dialog.addClickHandler()", function () {
$("<audio></audio>").attr({
    src      : "Assets/Audio/Menu/button_click.ogg",
    autoplay : "autoplay"
});
});

I'll test more and see if everything is working.

ISSUE RESOLVED USING ALL FOUR CODE SECTIONS FOR "a" and "button"

After a lot of struggling before coming here, that seems to have solved the issue! I'll leave this posted for anyone else struggling with Twine Sugarcube and adding Hover and Click sounds. This also let me remove the wrappers I mentioned earlier.

Answer 1

see this post on reddit about it, it's well mai easy to use https://www.reddit.com/r/twinegames/comments/hcb93m/beep_sound_effect_on_hover_sugarcube_2311/

basically you add this to your javacript and add the element in your passage

window.playSound = (function beep() {
    var snd = new Audio("audiourl");
    return function() {
        snd.play();
    }
})();

in your passage

<span onmouseover="playSound()">"Beep"</span>

Now the most up-to-date code I've done

in your js

window.beep = new Audio("audiourl")

in passage

<span onmouseover="beep.play()">"Beep"</span>

to do this with all elements of a type or a one specific , put that code in a passage named StoryInit

<<script>>
$(document).on("mouseover", "a",()=> {
beep.play()
});
<</script>>

as the variable js is global, you can check before if the audio is playing, this prevents the audio from playing several times

<<script>>
$(document).on("mouseover", "a",()=> {
if(!beep.currentAudio) beep.play()
});
<</script>>