Script para interactuar con sonido

peponks · #1 (**permalink**) 04/04/2012, 03:25

Hola, la verdad es que no sé mucho de javascript y creo que me estoy metiendo en algo un poco complicado de hacer pero bueno, a ver si me podéis echar un cable.

Estoy tratando de hacer una página en la que haya un sonido de fondo y el usuario pueda cambiar el volumen en función de la posición del ratón. Es decir que elijo un punto de la página donde el sonido está al 100% y al alejarnos de ese punto el sonido baja.

Hasta ahora he creado el siguiente código:

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    function sonido1() {
        var volumenup = document.getElementById(molinillo);
        volumenup.volume = 100;
        
    }
    
    function capasAnidadas() {
        for (var i=400; i>150; i--) {
            inversa = (400-i)/2;
            document.write('<div style="position: absolute; margin:' + (inversa) + 'px; ' + 'width:' + (i) + 'px; ' + 'height:' + (i) + 'px" class="cajas">' + '</div>');
        }
    }
</script>
</head>
 
<body>
<embed id="molinillo" src="molinillo.mp3" loop="true" hidden="true" autostart="true" volume=0></embed>
 
<div id="padre" style="width:400px; height:400px; position:relative; left:200px; top:200px; background:#000" onmouseover="sonido1()">
<script type="text/javascript">
capasAnidadas();
</script>
</div>
 
</body>

A través de javascript y css he creado 250 capas cuadradas que están agrupadas unas encima de otras. Estas capas van disminuyendo progresivamente su tamaño. La idea es que utilizando el evento mouseover en todas las capas, la última (la más pequeña) el sonido esté al 100% y vaya disminuyendo poco a poco hasta la primera capa (las más grande donde el sonido estará al 0%).

El primer problema que me encuentro es que haciendo pruebas llamar al sonido con la capa padre (contenedora de las capas que crea el script), la propiedad volume de la etiqueta embed no funciona. Es decir, que estando el volumen a 0 en el html, no consigo cambiarlo a 100 con un mouseover sobre la capa id=padre.

Bueno, vaya lío. Espero que me hayáis entendido.

Un saludo y gracias a todos.

emprear · #2 (**permalink**) 04/04/2012, 06:02

El primer problema que tenés es que estás usando embed, y puede que no todos los navegadores tengan el mismo plugin asociado para la reproducción de mp3, y que a su vez el atributo volume no sea reconocido.
Lo más sencillo sería usar la etiqueta audio de html5.
Otro detalle es que no es lo mismo decir que al hacer over sobre una capa esta cambie el volumen a decir que lo que queres utilizar es la posición del mouse en las coordenadas x,y de la página, aunque presumo que es lo primero.
Para terminar me cuesta visualizar tus 250 capas anidadas.....
En fin, desarrollando un poco más lo siguiente quizás aclances tu objetivo

Código HTML:

Ver original<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Html5 audio</title>
<meta charset="utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
div{
border: solid 1px #000;
background-color: lime;
margin: 10px 0;
width: 120px;
padding: 5px;
font-family: arial, serif;
font-size: 10pt;
cursor: pointer;
}
 
/*]]>*/
</style>
<script type="text/javascript">
function volumen(vol){
var el_audio = document.getElementById("audio1");
el_audio.volume = vol;
}
</script>
</head>
<body>
<h1>Audio HTML5</h1>
<audio controls="controls" preload="auto" id="audio1" autoplay="autoplay">
<source src="pf.ogg" />
<source src="pf.mp3" />
</audio>
<div onmouseover="volumen(0);">
volumen 0
</div>
<div onmouseover="volumen(0.1);">
volumen 0.1
</div>
<div onmouseover="volumen(0.2);">
volumen 0.2
</div>
<div onmouseover="volumen(0.3);">
volumen 0.3
</div>
<div onmouseover="volumen(0.4);">
volumen 0.4
</div>
<div onmouseover="volumen(0.5);">
volumen 0.5
</div>
<div onmouseover="volumen(0.6);">
volumen 0.6
</div>
<div onmouseover="volumen(0.7);">
volumen 0.7
</div>
<div onmouseover="volumen(0.8);">
volumen 0.8
</div>
<div onmouseover="volumen(0.9);">
volumen 0.9
</div>
<div onmouseover="volumen(1);">
volumen 1
</div>
</body>
</html>

Como ves el javascript neceario para controlar la etiqueta audio es muy sencillo
Demo:
http://foros.emprear.com/html5/audio...o-html5-v.html

Ah, te recuerdo que para hacerlo compatible en todos los navegadores tenes que subir tu audio también en formato ogg (FF/Opera/Chrome ), IE9 y Safari se las arreglan con el mp3
Saludos

peponks · #3 (**permalink**) 04/04/2012, 10:00

Hola emprear. Gracias por tú respuesta. Sí, me he dado cuenta investigando por internet de que lo que estaba intentando hacer es prácticamente imposible con la etiqueta embed.
Así que desecho mi código (

me da rabia, con todo lo que me costó crearlo).

Voy a utilizar tú código (mil una gracias por él y por el link de demostración) a ver si desarrollándolo un poco llego a conseguir el efecto que quiero, el problema es que soy muy nuevo en javascript y tardo las mil y una, pero iré posteando mis progresos.

Saludos.

emprear · #4 (**permalink**) 04/04/2012, 10:13

Cita:

Iniciado por peponks

pero iré posteando mis progresos.
Saludos.

Esperamos por los mismos
Saludos

peponks · #5 (**permalink**) 12/04/2012, 07:15

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);
    }); 
})
 
</script>
 
    <style type="text/css">
#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;
}
    </style>
 
</head>
<body>
 
 
<h1>Audio HTML5</h1>
<div id="start_point">move cursor<br>away from<br>this shape<br>to change<br>volume</div>
 
<h2 id="status">
0, 0
</h2>
 
<h2 id="coordenates">
0, 0
</h2>
 
<h2 id="distance">
0, 0
</h2>
 
<h2 id="vol">
0, 0
</h2>
 
 
<audio  preload="auto" id="audio1" autoplay="autoplay" loop="loop">
<source src="sounds/ventilator.wav" />
<source src="sounds/ventilator.mp3" /><!-- para ie9 -->
</audio>

Saludos.