Tema: Script para interactuar con sonido
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. </script>
  36.  
  37.     <style type="text/css">
  38. #start_point {
  39.     position: absolute;
  40.     top: 200px;
  41.     left: 300px;
  42.     width: 100px;
  43.     height: 100px;
  44.     border: 1px solid #555;
  45.     color: #555;
  46.     background-color: #ddd;
  47.     padding: 5px;
  48.     text-align: center;
  49.     cursor: default;
  50. }
  51.     </style>
  52.  
  53. </head>
  54. <body>
  55.  
  56.  
  57. <h1>Audio HTML5</h1>
  58. <div id="start_point">move cursor<br>away from<br>this shape<br>to change<br>volume</div>
  59.  
  60. <h2 id="status">
  61. 0, 0
  62. </h2>
  63.  
  64. <h2 id="coordenates">
  65. 0, 0
  66. </h2>
  67.  
  68. <h2 id="distance">
  69. 0, 0
  70. </h2>
  71.  
  72. <h2 id="vol">
  73. 0, 0
  74. </h2>
  75.  
  76.  
  77. <audio  preload="auto" id="audio1" autoplay="autoplay" loop="loop">
  78. <source src="sounds/ventilator.wav" />
  79. <source src="sounds/ventilator.mp3" /><!-- para ie9 -->
  80. </audio>
Saludos.