Bueno, me ha costado pero lo he conseguido. Al final utilicé la opción de sacar las coordenadas del ratón respecto a una capa. Y en función de la distancia del ratón a esa capa, ir variando el volumen del audio.
La verdad es que ni yo mismo entiendo muy bien el código, lo he ido haciendo sacando partes de aquí y de allá, pero funciona.
Aquí está para quien lo necesite.
Código HTML:
Ver original<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function() {
// offset for starting point
var sp_pos = $('#start_point').offset();
// center point of shape is the starting point
var sp_X = (sp_pos.left + ($('#start_point').width() / 2));
var sp_Y = (sp_pos.top + ($('#start_point').height() / 2));
// track mouse movement
$(document).mousemove(function(e){
// figure out distance from mouse to div (http://www.mathopenref.com/coorddist.html)
var dx = (sp_Y >= e.pageY) ? (sp_Y - e.pageY) : (e.pageY - sp_Y);
var dy = (sp_X >= e.pageX) ? (sp_X - e.pageX) : (e.pageX - sp_X);
var distance = Math.floor(Math.sqrt(dx + dy));
var vol = (distance*(-0.05)) + 1.5;
// adjust audio volume
document.getElementById("audio1").volume = vol;
// log status
$('#status').html(e.pageX +' / '+ e.pageY);
// log status
$('#coordenates').html(dx +' / '+ dy);
// log status
$('#distance').html(distance);
// log status
$('#vol').html(vol);
});
})
#start_point {
position: absolute;
top: 200px;
left: 300px;
width: 100px;
height: 100px;
border: 1px solid #555;
color: #555;
background-color: #ddd;
padding: 5px;
text-align: center;
cursor: default;
}
<div id="start_point">move cursor
<br>away from
<br>this shape
<br>to change
<br>volume
</div>
0, 0
0, 0
0, 0
0, 0
<audio preload="auto" id="audio1" autoplay="autoplay" loop="loop"> <source src="sounds/ventilator.wav" /> <source src="sounds/ventilator.mp3" /><!-- para ie9 -->
Saludos.