[SOLUCIONADO] Reproducir un audio con una imagen

[miriamgomez]

Hola:

mi problema viene porque intento reproducir un audio con una imagen que hace de boton.

Lo mas cerca que he espado es esto:

<a href='../../audio/animales/$row[id].mp3' class='sm2_button' title='Listen - Audio'>Play</a>

Pero esto me redirige una pagina distinta, y yo quiero que se reproduzca el audio en la misma pagina.

Un saludo

[pateketrueke]

A ver, ¿estás tratando de hacer las cosas sólo porque se te ocurren o estás revisando un referencia al respecto?

La etiqueta de HTML5 que permite reproducir audio es.... <audio> y <a> es para crear enlaces.

¿Sabes lo que es un enlace o no?

Por favor, consulta una referencia de HTML, tu problema es de HTML y por lo tanto debes aprender más de HTML.

[miriamgomez]

Hola:

Lo he intentado con este código:

<audio id="audioTestElem" src="../../audio/animales/1.mp3" autobuffer >
</audio>
<div onclick="audioTestElem.play()">play</div>

Con el HTML funciona, pero no se como acoplarlo en php, ya que no me funciona.

Un saludo

[pateketrueke]

Con el HTML funciona, pero no se como acoplarlo en php, ya que no me funciona.

Un archivo .php puede tener código PHP y HTML combinado:

Código PHP:

<div>algo de html aquí</div>
<?php echo 'algo de php acá'; ?>
 

El detalle, es que no es tu obligación imprimir código HTML con PHP, sería ridículo:

Código PHP:

// MAL
echo '<div>algo de html</div>';
 

Si lo único que quieres imprimir es HTML estático, ¿para qué hacerlo con PHP?

Ahora la pregunta que te hago es: ¿cómo lo estás "acoplando" con PHP?

¿O tenemos que adivinar el código que llevas hecho?

[miriamgomez]

Algo asi es lo que quiero hacer:

<tr>
<td rowspan='2'><audio id="audioTestElem" src="../../audio/animales/$row[solucion]</.mp3" autobuffer >
</audio>
<div onclick="audioTestElem.play()"><img src='$SrcImg' $ScaleImg</div> </td>

<td style='color:#CC3300' >$row[solucion]</td>
</tr>

Pero no me funciona

[pateketrueke]

¿Ese es el código completo? ¿O qué tanto más tenemos que ir adivinando?

Porque las variables de PHP no se imprimen así:

Código PHP:

// MAL
<tag>$variable</tag>
 
// BIEN
<tag><?php echo $variable; ?></tag>
 

Por favor muestra el código completo porque lo que muestras no se entiende: ¿estás escribiendo código HTML, PHP, híbrido, combinado, cómo?

[miriamgomez]

Código PHP:

<?php
 
$registros = 15;
$SrcImg = ''; //agregue esta variable que es donde asignaremos la ruta de la imagen =D
$ScaleImg = ''; //esta variable obtendra el nuevo ancho y alto de tu imagen...
if(!$_GET['pagina']){
    $inicio = 0;
    $_GET['pagina'] = 1;
}else{
    $inicio = ($_GET['pagina'] - 1) * $registros;
} 
 
function imageResize($width, $height, $_MaxWidth, $_MaxHeight, $OtherPass) {
    if ($width > $height) {
      $percentage = ($_MaxWidth / $width);
    } else {
      $percentage = ($_MaxHeight / $height);
    }
      $width = round($width * $percentage);
      $height = round(($height * $percentage));
      if($width > $_MaxWidth){
        $TempWidth = ($width - $_MaxWidth);
        $width = ($width - $TempWidth);
        $height = ($height - $TempWidth);
      }
      if($height > $_MaxHeight){
        $TempHeight = ($height - $_MaxHeight);
        $height = ($height - $TempHeight);
        $width = ($width - $TempHeight);
      }
      if($OtherPass){
        imageResize($width, $height, $_MaxWidth, $_MaxHeight, false);
      }
      return "width=\"$width\" height=\"$height\"";
}
 
 
$resultados = mysql_query("SELECT * FROM animales order by id asc") or die(mysql_error());
$total_registros = mysql_num_rows($resultados); 
$resultados = mysql_query("SELECT * FROM animales order by id asc LIMIT $inicio, $registros") or die(mysql_error());
$total_paginas = ceil($total_registros / $registros);
 
$qry=$resultados;
 
 
//aqui leer resultados y guardarlos en $resultados
$qry=$resultados;
echo "
 
<table width='500' border='1' align='center' bordercolor='#000066'>
";
$columnas = 3;
while ( $row=mysql_fetch_assoc($qry) ) {
    if ( $columnas == 3 ) {
        echo "<tr>";
    }
    
    echo "<td >";
 
    $SrcImg = '../../objetos/animales/'.$row['id'].'.jpg';
    $ImgSize = getimagesize($SrcImg);
    $ScaleImg = imageResize($ImgSize[0], $ImgSize[1], 76, 100, true);
    echo "
    <table  align='center'>
  <tr>
      <td rowspan='2'><audio id='audioTestElem' src='../../audio/animales/$row[solucion].mp3' autobuffer >
 </audio>
 <div onclick='audioTestElem.play()'><img src='$SrcImg' $ScaleImg</div> </td> 
    <td rowspan='2'><img src='$SrcImg' $ScaleImg></td>
    <td style='color:#CC3300' >$row[solucion]</td>
  </tr>
  <tr>
    <td >$row[espanol]</td>
  </tr>
</table>
 ";
 
    echo "</div>
<div id='3inf'>
</div><br></td>";
    
    
    $columnas--;
    if ( $columnas == 0 ) {
        echo "</tr>";
        $columnas = 3;
    }
}
echo "</table>";
 
 
if($_GET['pagina'] > 1) {
echo "<a href='http://aprendiendoinglesejercicios.com/ingles/vocabulario/".$pagina.".php?pagina=1'><< Primera</a> ";
}
if($_GET['pagina'] > 2) {
echo "<a href='http://aprendiendoinglesejercicios.com/ingles/vocabulario/".$pagina.".php?pagina=".($_GET['pagina']-1)."'>< Anterior</a> ";
}
 
for($i=($_GET['pagina']-2); $i <= ($_GET['pagina']+2); $i++){
    if(($i > 0) && ($i <= $total_paginas)){
        if($_GET['pagina'] == $i){
            echo "<b>".$i."</b> "; 
        }else{
            echo "<a href='http://aprendiendoinglesejercicios.com/ingles/vocabulario/". $pagina.".php?pagina=$i'>$i</a> ";
        }
    }
}
 
if($_GET['pagina'] < ($total_paginas-1)){
echo " <a href='http://aprendiendoinglesejercicios.com/ingles/vocabulario/".$pagina.".php?pagina=".($_GET['pagina']+1)."'>Siguiente ></a>";
}
if($_GET['pagina'] < $total_paginas){
echo " <a href='http://aprendiendoinglesejercicios.com/ingles/vocabulario/".$pagina.".php?pagina=".$total_paginas."'>Última >></a>";
}
?>
 

[pateketrueke]

Perfecto, ahora sí se entiende a totalidad la raíz del problema.

La razón es que estás construyendo mal el HTML:

Código PHP:

// MAL
    echo "
    <table  align='center'>
 <tr>
     <td rowspan='2'><audio id='audioTestElem' src='../../audio/animales/$row[solucion].mp3' autobuffer >
</audio>
<div onclick='audioTestElem.play()'><img src='$SrcImg' $ScaleImg</div> </td>
   <td rowspan='2'><img src='$SrcImg' $ScaleImg></td>
   <td style='color:#CC3300' >$row[solucion]</td>
 </tr>
 <tr>
   <td >$row[espanol]</td>
 </tr>
</table>
";
 
// BIEN
    echo "
    <table  align='center'>
 <tr>
     <td rowspan='2'><audio id='audioTestElem' src='../../audio/animales/$row[solucion].mp3' autobuffer></audio>
<div onclick='audioTestElem.play()'><img src='$SrcImg' $ScaleImg></div> </td>
   <td rowspan='2'><img src='$SrcImg' $ScaleImg></td>
   <td style='color:#CC3300' >$row[solucion]</td>
 </tr>
 <tr>
   <td >$row[espanol]</td>
 </tr>
</table>
";
 

Nota bien las diferencias, estabas cerrando mal las etiquetas.

Ahora que corrijas el HTML revisa en tu navegador si está bien formado.

[miriamgomez]

Con tu ayuda, ya lo hice funcionar:

Código PHP:

<td rowspan='2'><audio id='audioTestElem$row[id]' src='../../audio/animales/$row[id].mp3' autobuffer >
 </audio>
<div onclick='audioTestElem$row[id].play()'><img src='$SrcImg' $ScaleImg</div> </td>
 

gracias