É possível que quando o usuário passar o cursor sobre determinado elemento no site, uma música tocasse? Se sim, como?
2 Respostas
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>
-
-
-
-
É que minha professora me proibiu de usar javaScript kk Commented 7/10/2017 às 22:32
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()">
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()">