3

É possível que quando o usuário passar o cursor sobre determinado elemento no site, uma música tocasse? Se sim, como?

2 Respostas 2

8

Você pode combinar o onmouseover com o elemento <audio>:

var x = document.getElementById("musica"); 

function mouseOver() { 
    x.play(); 
} 
<audio id="musica">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<h1 onmouseover="mouseOver()">Iniciar musica</h1>

4
3

Com Play e Pause:

var x = document.getElementById("myAudio"); 

function playAudio() { 
    x.play(); 
} 

function pauseAudio() { 
    x.pause(); 
} 
<audio id="myAudio">
  <source src="http://musicasitalianas.com/fileMP3/innobra.mp3" type="audio/mpeg">
  <source src="" type="audio/ogg">
  Seu browser não suporta audio.
</audio>

<image src="http://kithomepage.com/images/Play-Normal-icon.png" width="64" height="64" onmouseover="playAudio()">
<image src="http://kithomepage.com/images/Pause-Normal-icon.png" width="64" height="64"onmouseover="pauseAudio()"> 

Fonte

Com controles

var x = document.getElementById("myAudio");
x.controls = false;
function reproduzir() { 
    x.controls = true;
    x.load();
    x.play();
    document.getElementById('img').style.display = 'none';
} 
<audio id="myAudio" controls>
  <source src="" type="audio/ogg">
  <source src="http://musicasitalianas.com/fileMP3/innobra.mp3" type="audio/mpeg">
  Seu browser não suporta audio.
</audio>

<image id="img" src="http://kithomepage.com/images/Play-Normal-icon.png" width="32" height="32" onmouseover="reproduzir()">

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 .