contral volumen de mp3 con una variable php en html5

[d_mlaura]

Hola a todos, y gracias de antemano por su ayuda ya que soy novata en esto.
La cuestión es la siguiente: Estoy utilizando la etiqueta audio de html5, hasta ahí todo va bien, pero lo que necesito es poder controlar el volumen del audio por medio de una variable php. Segun lo que estuve viendo en tutoriales el volumen se controla utilizando javascript y lo cierto es que hasta ahora no consigo armar ese código y que funcione.
Basicamente tengo un sitio que carga texto de una base de datos, el tamaño de la fuente depende de un valor ramdómico. Cada texto que se muestra, carga al mismo tiempo un mp3 automaticamente. Hasta acá todo funciona. Ahora lo que quiero hacer es que cuando se carguen los textos y se empiecen a escuchar los mp3 el volumen de cada uno de ellos esté determinado por el tamaño de letra del texto que se muestra.
Les copio el codigo que tengo hasta ahora, y muchas gracias por la ayuda.
lo que está comentado es lo que no funciona

<?php
$obj = new tejiendo();
$listado = $obj->listar();

foreach($listado->items AS $v){
$size = rand(10, 30);
//$volumen = size;
echo '<p style="font-size:' . $size . 'px; margin:0px; ">' . $v->texto . '</p>';
echo '<audio id="sonido" src="' . 'mp3/' . $v->id .'.mp3" autoplay></audio>';
//echo '<script type="text/javascript">var audioElement = audio.createElement("sonido"); audioElement.volume='$volumen';</script>';
}
?>

[emprear]

El primer problema que tenés es que los valores para el volumen del audio/html5 van de 0 (silencio) a 1(máximo), así que tendrías que crear la escala correspondiente entre tu tamaño máximo y minimo de la fuente. Supongo que dicha escala no tendría que ser necesariamente proporcional. Por supuesto si tu fuente minima es de 10px y la máxima de 100, sería más sencillo.
Este es un ejemplo en javascript con mouseover para cambiar el volumen que hice para otro post
http://foros.emprear.com/html5/audio...o-html5-v.html

Saludos

[d_mlaura]

Hola, gracias por contestar, estuve miranrdo tu post desde hace un rato ya que lo encontré buscando y buscando info. Entiendo el tema del valor del volumen. Pero lo que me ocurre en principio es que no puedo controlar el volumen, aunque por ahora estoy haciendo las pruebas sin que ese valor esté asociado al tamaño de la fuente, para ir por partes. Es decir no lo logro escuchar los mp3 que se cargan a 1.0, 0.5 etc.
Te copio lo que hice siguiendo tu ejemplo y gracias de nuevo, creer o reventar yo también soy de castelar

Código HTML:

<script type="text/javascript">
fuction volumen(vol){
var el_audio=document.getElementById ("sonido");
el_audio.volumen = vol;
}
</script>
        <div style="width: 350px; height: <?php echo $height; ?>px; position: absolute; left: <?php echo $left; ?>px; top: <?php echo $top; ?>px;"  onclick="recargar()">
 
<?php
$obj = new tejiendo();
$listado = $obj->listar();
 
foreach($listado->items AS $v){
    $size = rand(10, 30);
    //$volumen = size;
    echo '<p style="font-size:' . $size . 'px; margin:0px; ">' . $v->texto . '</p>'; //$v (variable que creamos para listar) style, para armar el estilo sin llamar css
    echo '<audio id="sonido" src="' . 'mp3/' . $v->id .'.mp3.volumen(0.5)" autoplay></audio>';
    
    }
?>
    </div>
 

[emprear]

Bueno vecina, te cuento, tu php no me dice mucho, tengo que ver el html generado, por otra parte, sería bueno saber con que navegador lo estas viendo, recordá que el formato .mp3 en <audio> no sirve para todos los navegadores (solo IE, Chrome y Safari), Firefox y Opera usan .ogg

SAludos

[d_mlaura]

Gracias por la buena voluntad vecino, uno no se siente tan solo en este ciber espacio. Estoy usando Chrome y el código lo tengo hecho en un index.php. Te lo copio abajo completo, tal vez te es más esclarecedor. Gracias por la mano que me puedas dar.
Te cuento que hasta ahora los textos asociados a los mp3 se cargan sin problemas, pero todos suenan al mismo nivel, yo quiero poder controlar el volumen de los mp3. Si esto me termina saliendo, después veré de controlar el volumen con el tamaño dela fuente. Pero intento ir de apoco, saludossss!!!!

Código PHP:

<?php
include_once('clases/init.php');
include_once('clases/tejiendo.php');
 
if(!isset($cant)){
    $cant = 7;
}
if(!isset($maxleft)){
    $maxleft = 1224; 
    $maxtop = 700;
    }
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Tramas Discursivas</title>
        <meta name="description" content="" />
        <meta name="author" content="Laura" />
        <script type="text/javascript">
            function recargar(){
                window.location = "index.php";
            }
        </script>
        
    </head>
    <body>
    
    <body style="font-family: sans-serif; color:#3e3d38">
 
<?php
for($i=0; $i<$cant; $i++){
    $left=rand(0, $maxleft);
    $top=rand(0, $maxtop);
    $height=rand(10,800);
?>
<script type="text/javascript">
fuction volumen(vol){
var el_audio=document.getElementById ("sonido");
el_audio.volume = vol;
}
</script>
        <div style="width: 350px; height: <?php echo $height; ?>px; position: absolute; left: <?php echo $left; ?>px; top: <?php echo $top; ?>px;"  onclick="recargar()">
 
<?php
$obj = new tejiendo();
$listado = $obj->listar();
 
foreach($listado->items AS $v){
    $size = rand(10, 30);
 
    echo '<p style="font-size:' . $size . 'px; margin:0px; ">' . $v->texto . '</p>'; 
    echo '<audio id="sonido" src="' . 'mp3/' . $v->id .'.mp3'.'"volumen(0);"" autoplay></audio>';
    
    }
?>
    </div>
 
    <?php
}
?>
    </body>
</html>
 

[emprear]

@d_mlaura
Seguimos en la misma, me estás pasando un php que a mi me es imposible reproducir, lo que tenés que hacer es ejecutar tu php en el navegador, ver el código fuente, es decir el html generado, y pasar ese código en un highlite html en el foro.
a lo sumo tendré que renombrar un par de .mp3 y ver como funciona, y si no lo hace , ver el por que.
Saludos

[d_mlaura]

jajaj perdón, que boluda! ya estoy limada y bronceandome en invierno con el monitor. Te copio:

Código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Tramas Discursivas</title>
        <meta name="description" content="" />
        <meta name="author" content="Laura" />
        <script type="text/javascript">
            function recargar(){
                window.location = "index.php";
            }
        </script>
        
    </head>
    <body>
    
    <body style="font-family: sans-serif; color:#3e3d38">
 
<script type="text/javascript">
fuction volumen(vol){
var el_audio=document.getElementById ("sonido");
el_audio.volume = vol;
}
</script>
        <div style="width: 350px; height: 641px; position: absolute; left: 1218px; top: 290px;"  onclick="recargar()">
 
<p style="font-size:12px; margin:0px; ">Me enseñó mi abuela, siete, ocho añitos,</p><audio id="sonido" src="mp3/1.mp3"volumen(0);"" autoplay></audio><p style="font-size:22px; margin:0px; ">he probado estar sin tejer, y es raro, es muy raro </p><audio id="sonido" src="mp3/304.mp3"volumen(0);"" autoplay></audio><p style="font-size:14px; margin:0px; ">Les estoy enseñando crochet a mis sobrinos nietos</p><audio id="sonido" src="mp3/234.mp3"volumen(0);"" autoplay></audio><p style="font-size:18px; margin:0px; ">Después le tejí a los chicos, cuando eran chiquitos, al más grande le tejí uno verde, me acuerdo, un verde oscuro con patitos.</p><audio id="sonido" src="mp3/202.mp3"volumen(0);"" autoplay></audio><p style="font-size:12px; margin:0px; ">Sin un dibujo previo y no era nada básico y lo firmé, dos mil ocho creo que es, dos mil ocho y al revés porque como yo hago grabado, al revés, escribo al revés, hablo al revés, escribo al revés. </p><audio id="sonido" src="mp3/48.mp3"volumen(0);"" autoplay></audio><p style="font-size:18px; margin:0px; ">por mas que se lo haga con toda la bola, el no se lo va a poner porque él tiene otras prioridades.</p><audio id="sonido" src="mp3/148.mp3"volumen(0);"" autoplay></audio><p style="font-size:20px; margin:0px; ">modifico la ropa y también si tiene alguna mancha o algo le pongo una flor, una mariposa en macramé</p><audio id="sonido" src="mp3/329.mp3"volumen(0);"" autoplay></audio><p style="font-size:21px; margin:0px; ">con las guardas en marrón oscuro, de esto hace añares, después lo destejí.</p><audio id="sonido" src="mp3/112.mp3"volumen(0);"" autoplay></audio><p style="font-size:27px; margin:0px; ">pero momentáneamente los tengo.</p><audio id="sonido" src="mp3/73.mp3"volumen(0);"" autoplay></audio><p style="font-size:20px; margin:0px; ">No sé cobrar, entonces por eso ahora empecé a decir que no, empecé a decir que no</p><audio id="sonido" src="mp3/340.mp3"volumen(0);"" autoplay></audio><p style="font-size:19px; margin:0px; ">Y el telar mapuche es hermoso, me encanta pero hay que tener mucha paciencia</p><audio id="sonido" src="mp3/264.mp3"volumen(0);"" autoplay></audio><p style="font-size:13px; margin:0px; ">Mi abuela, tu bisabuela me cargaba, porque me decía: ay vas tan rápido que no se te ven los dedos. </p><audio id="sonido" src="mp3/15.mp3"volumen(0);"" autoplay></audio><p style="font-size:13px; margin:0px; ">Polo se lo ponía para atender las mesas, el chaleco todo azul que atrás tenía bordado el castillo de diferentes colores, </p><audio id="sonido" src="mp3/108.mp3"volumen(0);"" autoplay></audio><p style="font-size:21px; margin:0px; ">Y encima yo siempre le caigo con algo, no me tejes tal cosita.  </p><audio id="sonido" src="mp3/168.mp3"volumen(0);"" autoplay></audio><p style="font-size:28px; margin:0px; ">yo no puedo estar tomando mate sentada así o hablando con vos, yo estoy tejiendo</p><audio id="sonido" src="mp3/302.mp3"volumen(0);"" autoplay></audio><p style="font-size:21px; margin:0px; ">y mi otra abuela fue la inventora de la nitaj porque ella tejía con la lana acá y hacía esto, ríanse, no agarraba la lana así, hacía así,</p><audio id="sonido" src="mp3/87.mp3"volumen(0);"" autoplay></audio><p style="font-size:21px; margin:0px; ">pero nunca fui buena tejedora, dando la forma.</p><audio id="sonido" src="mp3/20.mp3"volumen(0);"" autoplay></audio><p style="font-size:22px; margin:0px; ">Entonces había que hacer la muestra, dejarla descansar veinticuatro horas y al día siguiente tenías el tamaño exacto de cómo iba a quedar la lana.</p><audio id="sonido" src="mp3/80.mp3"volumen(0);"" autoplay></audio><p style="font-size:28px; margin:0px; ">Acá hay parte de mi vida y de mi alma</p><audio id="sonido" src="mp3/358.mp3"volumen(0);"" autoplay></audio><p style="font-size:20px; margin:0px; ">a las polleras le hago los bordes de macramé</p><audio id="sonido" src="mp3/326.mp3"volumen(0);"" autoplay></audio><p style="font-size:10px; margin:0px; ">la dejo descansar veinticuatro horas, hago una muestra de diez por diez o de quince por quince, </p><audio id="sonido" src="mp3/83.mp3"volumen(0);"" autoplay></audio><p style="font-size:14px; margin:0px; ">Me encanta para mi es una terapia</p><audio id="sonido" src="mp3/189.mp3"volumen(0);"" autoplay></audio><p style="font-size:16px; margin:0px; ">tengo muchas frazadas así con cuadrados  hechos de lana.</p><audio id="sonido" src="mp3/62.mp3"volumen(0);"" autoplay></audio><p style="font-size:19px; margin:0px; ">me parece que era gris oscura y bueno sería para abrigarse, ella se vestía como campesina, este, </p><audio id="sonido" src="mp3/17.mp3"volumen(0);"" autoplay></audio><p style="font-size:10px; margin:0px; ">Bordados de mi madre y tejidos míos</p><audio id="sonido" src="mp3/359.mp3"volumen(0);"" autoplay></audio> </div>
 
        </body>
</html>
 

[emprear]

Vamos mejorando, porque ya veo que esta mal
Los valores de los atributos id deben ser únicos (y no comenzar por un numero, no es el caso pero te lo voy advirtiendo)

Despues de limpiar tu html (tratá de mejorar la salida del html porque es un caos, inserta saltos de linea al menos entre etiquetas), quitar un doble <body> y todos los parrafos de texto nos queda

Código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Tramas Discursivas</title>
        <meta name="description" content="" />
        <meta name="author" content="Laura" />
        <script type="text/javascript">
            function recargar(){
                window.location = "index.php";
            }
        </script>
        
    </head>
    <body>
 
<script type="text/javascript">
fuction volumen(vol){
var el_audio=document.getElementById ("sonido");
el_audio.volume = vol;
}
</script>
<div style="width: 350px; height: 641px; position: absolute; left: 1218px; top: 290px;"  onclick="recargar()">
<audio id="sonido" src="mp3/1.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/304.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/234.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/202.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/48.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/148.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/329.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/112.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/73.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/340.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/264.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/108.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/168.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/302.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/87.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/20.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/80.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/358.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/326.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/83.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/189.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/62.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/17.mp3"volumen(0);"" autoplay></audio>
<audio id="sonido" src="mp3/359.mp3"volumen(0);"" autoplay></audio>
</div>
 </body>
</html>
 

es decir, todos los tags audio con el mismo id, con lo cual tu script enloquece porque no sabe para donde agarrar, deberían ser sonido1, sonido2 .etc

Una vez corregido eso, esto otro es un invento
<audio id="sonido" src="mp3/359.mp3"volumen(0);"" autoplay></audio>
Eso no es ningun evento de javascript, es más el atributo volume ni siquiera existe.
A tu etiqueta audio le falta el <source>
Tendrias que generar algo así

Código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Tramas Discursivas</title>
        <meta name="description" content="" />
        <meta name="author" content="Laura" />
<script type="text/javascript">
function volumen(vol,sonidonum){
var el_audio=document.getElementById (sonidonum);
el_audio.volume = vol;
}
</script>        
    </head>
<body>
<audio controls="controls" preload="auto" id="sonido1" autoplay="autoplay">
<source src="you_dont_bring_me_flowers.mp3" />
</audio>
<audio controls="controls" preload="auto" id="sonido2">
<source src="you_dont_bring_me_flowers.mp3" />
</audio>
<button onclick="volumen(0,'sonido1');">poner en 0 sonido 1</button>
<button onclick="volumen(0.5,'sonido1');">poner en 0.5 sonido 1</button>
<button onclick="volumen(1,'sonido1');">poner en 1 sonido 1</button>
 
</body>
</html>
 

Otra cosa, la declaración de una función en js comienza con function no con fuction

como ves , muchas cosas para ir arreglando

Empezá por hacer más presentable el html y generar id's únicos

Saludos

[d_mlaura]

joya!!!!! graciassssss, te mantengo al tanto de lo que va saliendo

[d_mlaura]

Hola, aquí estoy de nuevo. Ya pude generar ids únicos y usé la función de volumen que me pasaste. Hasta ahora todo funciona menos controlar el volumen. Sigo escuchando todo al mismo nivel. Evidentemente no logro llamar la función js volumen desde mi linea de código. Ya que no la quiero llamar desde un botón, sino que ya quede determinado el volumen desde el código. Te lo copio para ver si le podes dar un vistazo y decirme que está fallando. Muchas graciassss

Código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Tramas Discursivas</title>
        <meta name="description" content="" />
        <meta name="author" content="Laura" />
        <script type="text/javascript">
            function recargar(){
                window.location = "index.php";
            }
            
        </script>
        
    </head>
    <body>
    
    <body style="font-family: sans-serif; color:#3e3d38">
 
    <div style="width: 350px; height: 781px; position: absolute; left: 17px; top: 58px;"  onclick="recargar()">
 
<script type="text/javascript"> function volumen(vol){
var sonido124= document.getElementById ("vol,sonido124");
sonido124.volume = vol;
}</script>
<p style="font-size:12px; margin:0px; ">pero, bueno, esta boina se la regaló una tía a mi hijo, y mi hijo es de acá, nunca se va a poner una boina,</p>
<audio id="sonido124" src="mp3/124.mp3" volumen(0.5,"sonido124");" autoplay></audio>
<script type="text/javascript"> function volumen(vol){
var sonido148= document.getElementById ("vol,sonido148");
sonido148.volume = vol;
}</script>
<p style="font-size:26px; margin:0px; ">por mas que se lo haga con toda la bola, el no se lo va a poner porque él tiene otras prioridades.</p>
<audio id="sonido148" src="mp3/148.mp3" volumen(0.5,"sonido148");" autoplay></audio>
 
</div>
 
        </body>
</html>
 

[d_mlaura]

Hola, aquí estoy de nuevo. Ya pude generar ids únicos y usé la función de volumen que me pasaste. Hasta ahora todo funciona menos controlar el volumen. Sigo escuchando todo al mismo nivel. Evidentemente no logro llamar la función js volumen desde mi linea de código. Ya que no la quiero llamar desde un botón, sino que ya quede determinado el volumen desde el código. Te lo copio para ver si le podes dar un vistazo y decirme que está fallando. Muchas graciassss

Código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Tramas Discursivas</title>
        <meta name="description" content="" />
        <meta name="author" content="Laura" />
        <script type="text/javascript">
            function recargar(){
                window.location = "index.php";
            }
            
        </script>
        
    </head>
    <body>
    
    <body style="font-family: sans-serif; color:#3e3d38">
 
    <div style="width: 350px; height: 781px; position: absolute; left: 17px; top: 58px;"  onclick="recargar()">
 
<script type="text/javascript"> function volumen(vol){
var sonido124= document.getElementById ("vol,sonido124");
sonido124.volume = vol;
}</script>
<p style="font-size:12px; margin:0px; ">pero, bueno, esta boina se la regaló una tía a mi hijo, y mi hijo es de acá, nunca se va a poner una boina,</p>
<audio id="sonido124" src="mp3/124.mp3" volumen(0.5,"sonido124");" autoplay></audio>
<script type="text/javascript"> function volumen(vol){
var sonido148= document.getElementById ("vol,sonido148");
sonido148.volume = vol;
}</script>
<p style="font-size:26px; margin:0px; ">por mas que se lo haga con toda la bola, el no se lo va a poner porque él tiene otras prioridades.</p>
<audio id="sonido148" src="mp3/148.mp3" volumen(0.5,"sonido148");" autoplay></audio>
 
</div>
 
        </body>
</html>
 

[d_mlaura]

Perdon envie el msm mensaje dos veces

[emprear]

@d_mlaura

A leer los manuales URGENTE !!!!
no te voy a decir que hiciste mal, te voy a mostrar como se hace bien, a ver si mejorás la situación

Ejemplo 1:
http://foros.emprear.com/html5/audio...o-html5-v.html

Ejemplo 2 (este no es para el volumen, pero sirve igual para el propósito)
http://www.forosdelweb.com/f175/sonido-1002852/


Saludos

[d_mlaura]

Bueno ya logre llamar la funcion. Poque estaba haciendo cualquier cosa en el php el llamado de funcion qudo asi:

Código PHP:

echo '<script type="text/javascript"> volumen("sonido' . $v->id . '")
</script>';
 

[d_mlaura]

Gracias por todo!!!! Ya tengo mi código como quería, no se si se ajusta a las leyes de la programación, pero funciona.