是否可以仅在鼠标悬停时播放一次声音？ [英] Is it possible to play a sound on mouseover only once?

问题描述

我想创建一个在鼠标悬停到另一个图像并播放声音时永久性更改的图像。一旦图像改变，我不希望图像或声音再次播放。有没有办法做到这一点？我使用的代码基于此处和这里我已经设法让图像改变并播放声音，但它仍然播放声音，即使图像已经改变了。



先谢谢你们！ ：）

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! :)

推荐答案

除了解决方案2.由于使用全局对象可以说是糟糕的编程实践，我可以建议更多面向对象的方法，特定于JavaScript 。您可以将标志soundAlreadyPlayed保留在DOM元素本身中，用于触发使用声音处理的事件。例如：

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:

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

它会起作用，因为属性 soundAlreadyPlayer 未定义元素，所以if下的条件最初会返回true。在鼠标下一步移动到元素上时，处理程序将不会执行任何操作，因为属性已定义并返回true。



请参阅：

https://developer.mozilla.org/en-US/docs/Web/事件/鼠标悬停 [ ^ ]，

https://en.wikipedia.org/wiki/JavaScript#Dynamic [ ^ ]。

-SA

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

是的，我不确定为什么在解释之后仍然没有得到解决方案它正确地在你的问题。 :-)



1）创建一个全局变量，并将其命名为playSound等。

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.

var playSound = true;

2）一旦你改变了图片，就用条件播放声音，

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

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

3）现在再试一次，它不会播放声音，因为播放声音的功能是条件。条件由上面的变量控制。因此，一旦将其更改为false，它将无法再次播放声音。



我正在考虑的另一个解决方案是使用图像的 src 元素来确定是播放声音还是不。但是这有点复杂，所以使用上面显示的那个。

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.

一个简单的方法是使用css类来表示之前发生过的事情。



类似于：



// css

.hasPlayed {< br $>
}



// js

//假设你在这里使用jQuery和elem的id是picture1





if（！

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( !

这篇关于是否可以仅在鼠标悬停时播放一次声音？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！