Is it possible to apply sound effects to Hover or click css?

Asked

Viewed 2,563 times

9

Can you transmit a sound effect by touching the mouse to an object, text, etc.? wanted that when you hover over some object with effect 'Hover' that a sound effect, being any type of sound that define, da para aplicar isso com Css? or just with JS?

.menu{ display:flex; 
flex-wrap: wrap; 
}
.menu > div{ background-color:#09F; 
padding:20px; 
cursor:pointer;
margin-left:10px;
border-radius:30%;
font-weight:bold;
box-shadow:0 3px 3px rgba(0,0,0,.4);
}
.menu > div:hover{ background-color:#0CC;
transform:scale(1.1); 
box-sizing:border-box; 
box-shadow: 1px 1px 1px 2px #333333;}
<div class="menu">
  <div>Botão-1</div>
  <div>Botão-2</div>
  <div>Botão-3</div>
</div>

html css3
  • 1

    This is not possible to do with css, need to use javascript

3 answers

4

I believe it is not possible to play a sound with CSS only. Sound on a page runs as content, using the element <audio>. CSS is only used for stylize this content, therefore not being able to reproduce it.

To do this you must use javascript. Something like below:

var som = document.getElementById("som");

$(".menu div").mouseover(function(){
  som.pause();
  som.currentTime = 0;
  som.play();
});
.menu { 
    display: flex; 
    flex-wrap: wrap; 
}

.menu > div { 
    background-color:#09F; 
    padding: 20px; 
    cursor: pointer;
    margin-left: 10px;
    border-radius: 30%;
    font-weight: bold;
    box-shadow: 0 3px 3px rgba(0,0,0,.4);
}

.menu > div:hover {
    background-color: #0CC;
    transform: scale(1.1); 
    box-sizing: border-box; 
    box-shadow: 1px 1px 1px 2px #333333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div>Botão-1</div>
  <div>Botão-2</div>
  <div>Botão-3</div>
</div>
<audio id="som" src="https://www.w3schools.com/html/horse.mp3" hidden></audio>

  • 3

    That’s right! : D I just didn’t like the sound because I was testing and they thought there was an rss

  • 1

    @dvd I’m sorry about that! I couldn’t find another mp3 permanent link on the net. That was the easiest one! Kkkkkk

  • The audio didn’t run, I’m using Chrome

  • I copied it the same way I was there, but it didn’t execute, I changed it to the position of the line script and I inserted it into html and still didn’t give it

  • just run, only after a click on a blank space and soon after touch the mouse on top the sound runs, but when I opened the page and then touch the mouse, it does not run, strange....

  • Sorry for the delay, it was not on my computer. Managed to solve?

Show 1 more comment

4


Another option only that without jQuery. Vc can declare an audio variable and set a src with the audio file chosen. Then in btn vc declares the js function in mouseover to play the beep like this: onmouseover="teste.play()" NOTE: I believe it is not possible to do with CSS

.menu{ display:flex; 
flex-wrap: wrap; 
}
.menu > div{ background-color:#09F; 
padding:20px; 
cursor:pointer;
margin-left:10px;
border-radius:30%;
font-weight:bold;
box-shadow:0 3px 3px rgba(0,0,0,.4);
}
.menu > div:hover{ background-color:#0CC;
transform:scale(1.1); 
box-sizing:border-box; 
box-shadow: 1px 1px 1px 2px #333333;}
<script>
var teste = new Audio();
teste.src = 'https://www.soundjay.com/button/sounds/beep-01a.mp3';
</script>

<div class="menu">
  <div onmouseover="teste.play()">SOM</div>
  <div>Botão-2</div>
  <div>Botão-3</div>
</div>

Here are more details: http://www.developphp.com/video/JavaScript/Button-Sound-Effects-Tutorial-Audible-Menu-Systems

  • I inserted the command onmouseover="test.play()" in the 'div' button-1 of my code and the sound did not come out, I am using Chrome, the other user’s code soon the top tbm did not work

  • I think there’s something wrong, it was supposed to work on Chrome, but it only works from here when running, I copied your code and pasted it to an htm here and it didn’t run

  • @Elienayjunior guy edited the question and cloned with your question code and it’s working normal... Remember that the sound script should come inside the head of the preferred page.

  • It worked now, but when you load the page when you touch the mouse the sound does not perform, it only runs after a click on any location of the page and then when you touch the mouse the sound starts, it’s the same as the other user’s code, but I will mark your answer as valid

  • @Elienayjunior gives a look at the link I posted along with my answer. There’s a simple tutorial, and more details on how to do it this way. Here is working normal in Chrome 66, without needing to click anything before etc... Sometimes some other user also test and comments here. If you are going to use this solution thank you for marking :)

  • @Elienayjunior on the sound take a little while to play is pq it is only downloaded when vc hovers the mouse on the element the first time. You may have a way to "Preload" this audio via JS before the page finishes loading. Unfortunately JS is not my specialty rss

  • Aguem found the solution? mine only works after clicking on the page. also.

  • 1

    @gessermigueldapaixa read here https://answall.com/questions/457623/mp3-n%C3%a3o-funciona-no-javasccript

Show 3 more comments

1

Every page that plays music should have an alternative to be able to stop

I know it’s not the focus of the question, but regardless of that, it also plays in mouseover, but as already said, with CSS seems to be impossible, at least in the present day.

            $(document).ready(function(){

                //Plays the file when the mouse is over the element
                $("#song12").mouseover (function (){

                    $("#song1")[0].play();
                    $("#song12").html('MouseClick para Pausa');

                });

                //Pause the file when the mouse leaves the element
                 $("#song12").click(function (){

                    $("#song1")[0].pause();
                    $("#song12").html('MouseOver-me para Play');

                });

            });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <audio id="song1" controls style="display:none">
          <source src="http://kithomepage.com/sos/to_nem_ai.mp3" type="audio/mpeg">
        </audio>
        <button id="song12">MouseOver para Play</button>

Browser other questions tagged html css3

You are not signed in. Login or sign up in order to post.