hola estoy haciendo una pagina en html5 y tengo unos botones q al pasar por encima de ellos suena un pedazo de canción pero tengo un problema paso por encima de otro botón y no para el sonido de otro botón entonces se sobrepone como puedo hacer q el sonido se pare cuando paso por otro botón?
este es el codigo q tengo
$(document).ready(function() {
$('.bt1').mouseover(function(){
$('audio')[5].play();
});
$('.bt2').mouseover(function(){
$('audio')[0].play();
});
$('.bt3').mouseover(function(){
$('audio')[4].play();
});
$('.bt4').mouseover(function(){
$('audio')[1].play();
});
$('.bt5').mouseover(function(){
$('audio')[2].play();
});
$('.bt6').mouseover(function(){
$('audio')[3].play();
});
$('.bt7').mouseover(function(){
$('audio')[6].play();
});
});
<audio preload="auto">
<source src="audio/son_1.mp3" type="audio/mp3">
<source src="audio/son_1.ogg" type="audio/ogg">
</audio>
<audio preload="auto">
<source src="audio/son_2.mp3" type="audio/mp3">
<source src="audio/son_2.ogg" type="audio/ogg">
</audio>
<audio preload="auto">
<source src="audio/son_3.mp3" type="audio/mp3">
<source src="audio/son_3.ogg" type="audio/ogg">
</audio>
<audio preload="auto">
<source src="audio/son_4.mp3" type="audio/mp3">
<source src="audio/son_4.ogg" type="audio/ogg">
</audio>
<audio preload="auto">
<source src="audio/son_5.mp3" type="audio/mp3">
<source src="audio/son_5.ogg" type="audio/ogg">
</audio>
<audio preload="auto">
<source src="audio/son_7.mp3" type="audio/mp3">
<source src="audio/son_7.ogg" type="audio/ogg">
</audio>
<audio preload="auto">
<source src="audio/son_8.mp3" type="audio/mp3">
<source src="audio/son_8.ogg" type="audio/ogg">
</audio>
y me pueden aconsejar si el codigo esta bien o esta muy largo para una pagina
gracias