Audio en KumbiaPHP

Hola amigos kumbieros, en esta oportunidad me gustaría compartir con ustedes la experiencia sobre cómo insertar archivos de audio en nuestra web.

Tanto para programadores experimentados como para quienes están empezando en este mundo del desarrollo, existen esos detalles que no conocemos, esos errores que no entendemos, y es inevitable pasar largos minutos buscando la manera de plasmar en nuestro código las ideas que hay en nuestra mente. Al menos a mi como mortal me ha pasado.

En la web existe mucha información donde se explica cómo insertar audio en la web, existen ejemplos y es relativamente sencillo. Pero en el caso de hacerlo usando el framework kumbiaPHP no se encuentra mucha.  Es esa la razón por la que decidí compartir esta entrada.

Como compartí días atrás, estamos desarrollando un “Repositorio de canciones” con kumbiaPHP, y el audio es parte esencial en los requerimientos.

Kumbia posee helpers que facilitan en gran medida algunas tareas, por ejemplo el helper para insertar imagen Html::img().  Sin embargo parece no haber alguno que maneje los audios.

Buscando en la web encontré cómo insertar contenido multimedia en HTML, y para el caso del audio, algo tan sencillo como esto:

<audio controls>
      <source src="micancion.mp3" type="audio/mp3">
      </source>
</audio>


Probé en mi vista y que creen?   No funciona.
Claro…  hay que tener en cuenta la ruta. Hacer cosas como “../public/audio/micancion.mp3” quizá podría ser la solución, quizás sea lógico.
Me salgo de la carpeta donde tengo mi vista y accedo a donde tengo el audio.

Pues… no funciona.

Probamos colocando el archivo dentro de la misma carpeta de la vista; !!Debería funcionar!!

Que creen!!!

Tampoco funciona.

Y entonces!!!? Si todo está bien!!! (Bueno… eso creo)

Despues de despeinarme un par de veces, mirar el codigo, probar maneras, buscar otras formas, el “prueba y error” y un poco de desespero (jeje, era un poco “temprano”, 3 de la madrugada?), dí con el error.

El “secreto” radica en la ruta.
Debo tomar una ruta absoluta para poder acceder a mis archivos, (es una de las cosas que simplifican los helpers).
¿Desde donde partir? Desde la carpeta donde tienes el proyecto; tu framework.

Esta es la solución:

– Por fin la dices    ¬ ¬
– Jeje, calma!!! es bueno saber cómo saber. Y en gran manera, aprender de los errores.

Debes poder tu ruta así: /framework/default/public/audio/micancion.mp3
(He creado una carpeta audio, ésta no viene por defecto)
!Important. Debe iniciar con “/” para que funcione. Por si crees que no importa.
En conclusión, el codigo quedaría así.

<audio controls>
      <source src="/framework/default/public/audio/micancion.mp3" type="audio/mp3">
      </source>
</audio>


Ahora sí, a sonar!!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *