Play an audio file on hover

Question

I have made this script for my forum and I was wondering if anyone could guide me how to get the browser to play an audio file if the user hovers over the class style113, but it has to give them a warning alert that says "audio is about to play" if they press ok on the alert it should play if they press cancel it should not. How can I achieve this? Here is the script I have so far:

my script has been removed

Did my answer help you? If so, make sure to accept it (by clicking the green check mark next to the answer) to show the community it helped you. If not, please request more help. — Jonathan Lam, Aug 08 '16 at 15:08

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

You can use the following code:

var elems = document.getElementsByClassName("style113");
for(i in elems) {
    elems[i].addEventListener("mouseover", function() {
        if(confirm(" %%% CONFIRMATION MESSAGE %%% ")) {
            // %%% CODE TO PLAY SOUND %%%
        }
    });
}

What it does:

Loops over elements of class style113
Adds an event listener to each element to event mouseover
In each event listener, creates a confirm() popup (has two buttons, one to confirm and one to cancel)
If the confirm() method returns true (if the positive button is clicked), then play sound

Working example on JSFiddle

UPDATE As per OP request in the comments below, you can add this code to your specific code in the for loop:

document.getElementsByClassName('style113')[x].addEventListener("mouseover", function() {
    if(confirm("audio is about to play")) {
        // %%% CODE TO PLAY SOUND %%%
    }
});

I'd also advise you to clean up your source code with better indenting practices. Also, avoid making too many DOM requests (e.g., repetitive document.getElementsByClassName()) and look instead to caching DOM requests.

edited May 23 '17 at 12:00

Community

1
1

answered Aug 08 '16 at 14:49

Jonathan Lam

16,831
17
68
94

where do i place that? what line – ThePlacid Aug 08 '16 at 14:53
@ThePlacid I'll expand my answer to include that info. Give me a sec. – Jonathan Lam Aug 08 '16 at 14:55
@ThePlacid Edited. You can place the event listener (the lower code) in both loops, just like all the other lines that begin with `document.getElementsByClassName()`. Also see my comment about DOM requests. – Jonathan Lam Aug 08 '16 at 15:00
have you got skype? i got a few more questions if thats ok – ThePlacid Aug 08 '16 at 15:37
@ThePlacid Sorry, I do not have a Skype, nor would I use it for programming questions. Instead, [ask a new question](http://stackoverflow.com/questions/ask) (or, if it is small and relevant, just request it here in the comments). I'm glad I helped though! – Jonathan Lam Aug 08 '16 at 15:39
whats the code to hot link a sound from another website? – ThePlacid Aug 08 '16 at 15:41
@ThePlacid Try using the [`Audio( SOUNDFILEURL )`](http://stackoverflow.com/a/18628124/2397327) function with the sound file URL. If that doesn't work, try downloading the sound file, upload it to your own server, and then link to it. I'm not familiar with this interface, so I'm not sure if it will work. – Jonathan Lam Aug 08 '16 at 15:43
when i press okay, the confimation dialog keeps appearing, how do i fix this? – ThePlacid Aug 08 '16 at 16:00
@ThePlacid I cannot reproduce that issue. It shouldn't happen, because the event should only be firing on `mouseover` which only happens when you enter the element. Perhaps post a link to your sample? – Jonathan Lam Aug 08 '16 at 16:10
can i private message you it somewhere – ThePlacid Aug 08 '16 at 16:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/120446/discussion-between-lambda-ninja-and-theplacid). – Jonathan Lam Aug 08 '16 at 16:38

Play an audio file on hover

1 Answers1