Ver Mensaje Individual
  #5 (permalink)  
Antiguo 12/04/2012, 07:15
peponks
 
Fecha de Ingreso: septiembre-2010
Mensajes: 22
Antigüedad: 14 años, 5 meses
Puntos: 1
Respuesta: Script para interactuar con sonido

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
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5.  
  6.     // offset for starting point
  7.     var sp_pos = $('#start_point').offset();
  8.  
  9.     // center point of shape is the starting point
  10.     var sp_X = (sp_pos.left + ($('#start_point').width() / 2));
  11.     var sp_Y = (sp_pos.top + ($('#start_point').height() / 2));
  12.  
  13.     // track mouse movement
  14.     $(document).mousemove(function(e){
  15.  
  16.         // figure out distance from mouse to div (http://www.mathopenref.com/coorddist.html)
  17.         var dx = (sp_Y >= e.pageY) ? (sp_Y - e.pageY) : (e.pageY - sp_Y);
  18.         var dy = (sp_X >= e.pageX) ? (sp_X - e.pageX) : (e.pageX - sp_X);
  19.         var distance = Math.floor(Math.sqrt(dx + dy));
  20.         var vol = (distance*(-0.05)) + 1.5;
  21.         // adjust audio volume
  22.         document.getElementById("audio1").volume = vol;
  23.  
  24.         // log status
  25.         $('#status').html(e.pageX +' / '+ e.pageY);
  26.         // log status
  27.         $('#coordenates').html(dx +' / '+ dy);
  28.         // log status
  29.         $('#distance').html(distance);
  30.         // log status
  31.         $('#vol').html(vol);
  32.     });
  33. })
  34.  
  35.  
  36.     <style type="text/css">
  37. #start_point {
  38.     position: absolute;
  39.     top: 200px;
  40.     left: 300px;
  41.     width: 100px;
  42.     height: 100px;
  43.     border: 1px solid #555;
  44.     color: #555;
  45.     background-color: #ddd;
  46.     padding: 5px;
  47.     text-align: center;
  48.     cursor: default;
  49. }
  50.     </style>
  51.  
  52. </head>
  53.  
  54.  
  55. <h1>Audio HTML5</h1>
  56. <div id="start_point">move cursor<br>away from<br>this shape<br>to change<br>volume</div>
  57.  
  58. <h2 id="status">
  59. 0, 0
  60. </h2>
  61.  
  62. <h2 id="coordenates">
  63. 0, 0
  64. </h2>
  65.  
  66. <h2 id="distance">
  67. 0, 0
  68. </h2>
  69.  
  70. <h2 id="vol">
  71. 0, 0
  72. </h2>
  73.  
  74.  
  75. <audio  preload="auto" id="audio1" autoplay="autoplay" loop="loop">
  76. <source src="sounds/ventilator.wav" />
  77. <source src="sounds/ventilator.mp3" /><!-- para ie9 -->
Saludos.