10

Da para transmitir um efeito sonoro ao encostar o mouse em algum objeto, texto etc..?? queria que ao passar o mouse em cima de algum objeto com efeito 'hover' desse um efeito sonoro, sendo qualquer tipo de som que definir, da para aplicar isso com Css? ou só com 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>

1
  • 1
    Isso não é possível de fazer com css, precisa usar javascript Commented 25/05/2018 às 16:07

3 Respostas 3

4

Outra opção só que sem jQuery. Vc pode declarar uma variável de áudio e definir um src com o arquivo do áudio escolhido. Depois no btn vc declara a função js no mouseover para tocar o beep tipo assim: onmouseover="teste.play()" OBS: acredito não ser possível de fazer com 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>

Aqui tem mais detalhes: http://www.developphp.com/video/JavaScript/Button-Sound-Effects-Tutorial-Audible-Menu-Systems

8
  • Inseri o comando onmouseover="teste.play()" na 'div' botão-1 do meu código e o som não saiu, estou usando o chrome, o código do outro usuário logo a cima tbm não funcionou Commented 25/05/2018 às 16:32
  • Acho que tem algum problema, era para funcionar no chrome, mas só funciona daqui mesmo ao executar, copiei seu código e colei em um htm aqui e não executou Commented 25/05/2018 às 16:39
  • @ElienayJunior cara editei a pergunta e cloquei com o seu código da pergunta e está funcionando normal... Lembre-se que o script do som deve vir dentro do head da página de preferência.
    – hugocsl
    Commented 25/05/2018 às 17:04
  • Funcionou agora, mas quando carrega a página ao encostar o mouse o som não executar, só executa depois de um click em qualquer local da página e depois ao encostar o mouse o som começa, tá igual ao código do outro usuário, mas eu vou marcar sua resposta como valida Commented 25/05/2018 às 17:13
  • 1
    @gessermigueldapaixao leia aqui pt.stackoverflow.com/questions/457623/…
    – hugocsl
    Commented 16/08/2020 às 23:06
4

Acredito não ser possível reproduzir um som apenas com CSS. O som em uma página é executado como um conteúdo, utilizando o elemento <audio>. Já o CSS é utilizado apenas para estilizar esse conteúdo, portanto não sendo capaz de reproduzi-lo.

Para fazer isso você deverá utilizar javascript. Algo como abaixo:

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>

6
  • 3
    Isso mesmo! :D Só não gostei do som porque fui testar e acharam que tinha um 🐴 aqui rss
    – Sam
    Commented 25/05/2018 às 16:15
  • 1
    @dvd me desculpe por isso! Não achei outro link permanente de mp3 na net. Esse foi o mais fácil! Kkkkkk
    – bio
    Commented 25/05/2018 às 16:16
  • O áudio não executou, estou usando o chrome Commented 25/05/2018 às 16:33
  • copiei do mesmo jeito que estar aí, mas não executou, mudei até a posição da linha script e inseri dentro do html e mesmo assim não deu Commented 25/05/2018 às 16:34
  • acabou de executar, só que depois de um click em um espaço em branco e logo depois encostar o mouse em cima o som executa, mas quando abri a página e depois encosta o mouse, ele não executa, estranho.... Commented 25/05/2018 às 16:49
2

Toda pagina que reproduz musica deve ter uma alternativa de poder parar

Sei que não é o foco da pergunta, mas independente disso, também reproduz no mouseover, porém como já foi dito, com CSS parece ser impossivel, pelo menos nos dias atuais.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .