Is it possible to play a sound on mouseover only once?

Question

1.00/5 (1 vote)

See more:

Hi, I want to create an image that changes permenantly on mouseover to another image and plays a sound. Once the image changes I do not want the image or sound to play again. Is there a way to do this? The code I am using it based on here and here and I have managed to get the image to change and play a sound, but it still plays the sound even when the image has changed.

Thanks in advance guys! :)

Posted 25-Sep-15 11:18am

Member 12012233

Updated 25-Sep-15 11:26am

v2

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-09-25T14:50:00

In addition to Solution 2. As using global objects is arguably considered to be bad programming practice, I could advice more object-oriented approach, specific to JavaScript. You can keep the flag "soundAlreadyPlayed" in a DOM element itself used to trigger the event handled with your sound. For example:

JavaScript

var myImage = document.getElementById("image");
myImage.onmouseenter = function() {
    if (!myImage.soundAlreadyPlayed) {
        // play your sound here
        myImage.soundAlreadyPlayed = true;
    }
}

It will work because the property soundAlreadyPlayer is undefined for the elements, so the condition under "if" will return true at first. On next moves of the mouse onto the element, the handler won't do anything, because the property is defined and returns true.

Please see:
https://developer.mozilla.org/en-US/docs/Web/Events/mouseover[^],
https://en.wikipedia.org/wiki/JavaScript#Dynamic[^].

—SA

Afzaal Ahmad Zeeshan · Answer 2 · 2015-09-25T12:28:00

Yes, well I am not sure why you still didn't get the solution when you have explained it properly in your question. :-)

1) Create a global variable and name it something like, playSound etc.

JavaScript

var playSound = true;

2) Once you have changed the picture play the sound using a condition,

JavaScript

// Change the image
if(playSound) {
   // play the sound
   // Now change the variable to false
   playSound = false;
}

3) Now try again, it won't play sound because the function to play the sound is in a condition. The condition is controlled by the variable above. So once you change it to false, it won't play the sound again.

Another solution I am thinking about uses the src element of the image to determine whether to play the sound or not. But that will be a little bit complex, so use the one shown above.

23741 · Answer 3 · 2015-09-25T12:26:00

Solution 1

One easy way to do this is use as css class to indicate something has occurred before or not.

Something like:

// css
.hasPlayed{
}

// js
// assume you're using jQuery here and the id of the elem is "picture1"

if( !$("#picture1").hasClass('hasPlayed') ){

// code to play the song or whatever action here

// and then...
$("#picture1").addClass('hasPlayed');
}

Posted 25-Sep-15 12:26pm

23741

Comments

Afzaal Ahmad Zeeshan 25-Sep-15 18:29pm

Good, but you missed the main point. He needs to use JavaScript (or jQuery) to do that. CSS cannot handle client-side requests, it is just a stylesheet.

He needs to determine whether to play the music or not, even in that case (where he uses CSS classes or IDs) he needs JavaScript.

[no name] 25-Sep-15 19:22pm

Good, but you missed my main point - "One easy way to do this...."

Afzaal Ahmad Zeeshan 26-Sep-15 4:12am

But that doesn't do this. How would it play the sound in the first place? CSS cannot do that. :-)

[no name] 26-Sep-15 12:12pm

I wasn't writing the whole function for him as he already mentioned he had code based on other articles to do this. This is why I added the line:

// code to play the song or whatever action here

Your flawed assumption and inability to understand what I wrote by the very fact that I did not in any way indicate that CSS would play the sound is just that - flawed. It is important that one have the ability to understand something when they read it and comprehend simple examples and matters.

I think you missed the boat on the idea I was conveying Afzaal - but that's ok as I see you also missed the point of the commented line in the example that left it to the original person to insert whatever they wanted there to play a sound.

23741 · Answer 4 · 2015-09-25T13:24:00

Solution 3

So Afzaal, you complain that using my method he needs Javascript - and then you turn around and post a solution using Javascript :-)

By the way, my method does not require a global variable polluting the global namespace....

Posted 25-Sep-15 13:24pm

23741