Diseño de un botón reproductor de sonido tipo Html5 para poner en práctica el principio de modalidad de Mayer

Introducción

En mi rol como estudiante de la Maestría en Docencia Mediada con las TIC de la Universidad de San Buenaventura en Colombia, en la modalidad virtual (no tiene nada que envidiarle a una maestría presencial), y por recomendación de la profesora María Buelvas, leí el documento titulado Teoría de la carga cognitiva, diseño multimedia y aprendizaje: un estado del arte (Andrade-Lotero, 2012). Este documento describe los 10 principios de aplicación de la teoría de la carga cognitiva de Sweller (1994) y de la teoría cognitiva del aprendizaje multimedia de Mayer (2005).

Uno de esos principios, el principio modalidad, recomienda reemplazar las descripciones escritas por descripciones habladas a la hora de dar explicaciones sobre la elaboración de una tarea o un trabajo en una plataforma o aula virtual. Plantea este principio que como la información auditiva o visual es procesada de manera independiente, entonces la memoria de trabajo del estudiante no se sobrecarga. Yo le agrego a este principio que a veces por desatención y a veces por problemas de comprensión lectora, los estudiantes no entienden bien las instrucciones escritas. Creo que entienden mejor las descripciones orales debido a que el razonamiento básico en la comunicación es con base en la oralidad. Además, el discurso oral contiene rasgos suprasegmentales como el tono de la voz que incluyen un componente emocional y motivante que no lo tiene el discurso escrito.

Por todo lo anterior, quise aplicar por primera vez el principio de modalidad en el contexto del diseño de una secuencia didáctica que había que realizar como trabajo final del curso Multimedia para el diseño de material de aprendizaje. Teníamos que aplicar el modelo ADDIE en la producción de contenidos para esa secuencia didáctica. El producto final, en mi caso, fue una unidad de un curso de inglés formada por tres lecciones. Todas enriquecidas con contenidos multimedia. Este producto debía presentarse utilizando la herramienta de autor conocida como Exelearning.

En mi diseño, las instrucciones del profesor en forma de audio debían ubicarse siempre arriba del bloque de texto con instrucciones escritas. Se debía acceder a las instrucciones en audio a través de un icono o pequeño botón reproductor de sonido. De esta forma, se lograría diferenciar el reproductor de instrucciones del profesor respecto del reproductor de los archivos de audio de las lecciones de inglés, el cual es el clásico reproductor de audio de HTML5 que aparece cuando usamos las etiquetas <audio></audio>.

Para que la implementación del principio de modalidad no se quedara solamente en la tarea del curso Multimedia para el diseño de material de aprendizaje decidí entonces aplicarlo posteriormente en el contexto de mis lecciones publicadas en mi aula virtual, elearning.orlandocarcamo.com, la cual es una instalación personalizada de la plataforma Moodle desde la cual, bajo la modalidad de blended learning, oriento cursos de inglés en la Universidad de La Guajira.

El problema

Después de tomar la decisión de incluir un reproductor para las explicaciones del profesor, surgió el problema de cómo lograrlo. Debía ser diferente del normal reproductor de HTML5 que es muy grande para el propósito planteado:

El reproductor debía ser pequeño y discreto. Busqué en la “Referencia DOM de audio/vídeo de HTML”. Pero no encontré ningún método, propiedad, o evento que me permitiera modificar el elemento <audio> para presentar visualmente el reproductor solo con el icono de reproducción y dejar por fuera los demás controles.

La solución. Debido a este inconveniente, debía buscar un reproductor de libre uso, open source, elaborado en HTM5. En Flash existen muchos reproductores ideales para el propósito aquí planteado, pero ya Flash no funcionan en ningún explorador. Lo descontinuaron por supuestamente problemas de seguridad para las computadoras.
Encontré algunos reproductores en HTML5 muy innovadores en su aspecto, muy dinámicos, muy bonitos, entre ellos:

1. Reproductores de codificación compleja

1.1 Single Button Audio Player In jQuery

1.2 Jquery MB mini audio player

1.3 Sonic Uno

Sin embargo, decidí no utilizarlos dado que tienen una codificación muy compleja y requieren instalación en el servidor y el uso de librerías JavaScript ubicadas en otros servidores. Lo que yo estaba buscando era algo sencillo de fácil codificación sin necesidad de instalar nada en el servidor. Un código sencillo que funcionara con JavaScript y HTML dentro de las capacidades por defecto de los exploradores de Internet.

Encontré varios reproductores de sencilla codificación, entre ellos:

2. Reproductores de codificación sencilla

2.1 html5 audio player only play button

2.2 AudioPlay 2 - one button HTML 5 music player

2.3 HTML Audio play and Pause using Single Button

2.4 Reproductor de un solo botón de JsFiddle

Entre estos reproductores de un solo botón, me parecieron muy interesantes por lo sencillo del código y la facilidad de personalización los siguientes:

1. El HTML Audio play and Pause using Single Button de tutorialbrain.com
2. El AudioPlay2 de strangecube.com

 Finalmente, me decidí trabajar con reproductor de Tutorialbrain porque es el que menos exigencia a nivel de codificación exige y esto lo hace muy compatible con Exelearning y también con el sistema de seguridad de Moodle ya que no es necesario enlazar con librerías JavaScript ubicadas en un servidor diferente:

Como muestra la imagen, el reproductor de audio se activa y desactiva dando clic sobre el botón, “Play|Pause”. En mi diseño no debía aparecer visualmente el reproductor para evitar ruido visual ya que las actividades de listening y conversation utilizan el mismo reproductor de HTML5 el cual tiene el mismo aspecto gráfico. Es decir, el reproductor debía estar oculto y reproducir el archivo de audio de las instrucciones del profesor.

Se consigue ocultar el reproductor quitando el parámetro “controls” dentro del elemento <audio>.

Como la etiqueta <button> produce un botón que visualmente no se relaciona con los propósitos de mi proyecto, decidí crear una imagen icónica propia para utilizarla como botón o activador del fichero de audio que contiene la explicación del profesor. Un primer clic reproduce el sonido y un segundo clic lo desactiva. Esta es la imagen:

Esta imagen icónica la elaboré con ayuda de un editor de imágenes a partir de dos íconos tomados de Flaticon.es. El primero es el icono de sonido y el otro es el icono de instrucciones.

Icono de sonido

Icono de instrucciones

La siguiente imagen presenta cómo quedó nuestro ícono personalizado con la función de botón reproductor del audio de las explicaciones del profesor en nuestras lecciones en ExeLearning:

Pon a prueba nuestro reproductor de instrucciones del profesor

Da clic sobre el ícono de instrucciones para poner a prueba su funcionamiento:

A time to remember (un tiempo para recordar) es la primera unidad de nuestro curso de inglés cinco. Esta unidad corresponde al libro Interchange 2 Fourth Edition cuyo autor es Jack C. Richards, publicado por la editorial Cambridge University Press en el año 2012. Las capturas de imagen mostradas en cada lección y los archivos de audio corresponden a este libro.

El código JavaScript que hace la magia

La siguiente es mi personalización y adaptación del código JavaScript del botón de reproducción publicado en un post de Tutorialbrain.com. Para que funcione, todo el código siguiente debe ir entre las etiquetas <script type="text/javascript"></script> en el <head></head> de la pagina web:

function Play() {
 var profExplanations = document.getElementById("profInstructions");
 if (profExplanations.paused) { 
 profExplanations.play();
 } else { 
 profExplanations.pause(); 
 } 
 }

El código JavaScript comentado

    function Play() { <!-- Esta es la funcion que se activa cuando le damos clic al icono reproductor -->
        var profExplanations = document.getElementById("profInstructions");<!-- Dentro del parentesis del método de documento getElementById("") se debe colocar el mismo elemento o nombre que colocamos como Id de la etiqueta <audio> del reproductor oculto -->
        if (profExplanations.paused) { <!-- Al dar clic, si el reproductor profExplanations está pausado-->
            profExplanations.play();   <!-- entonces debe reproducirse -->
        } else {                       <!-- de otra manera, si se está reproduciendo --> 
            profExplanations.pause();  <!-- entonces debe pausarse -->
        }
    }

El código del reproductor

Para que el reproductor permanezca oculto, quitamos el parámetro “controls” dentro del elemento <audio>:

<audio id="profInstructions">  
<source src="/prof-instr-01.mp3" type="audio/mp3">
</audio>

La conexión con el código JavaScript se da a través del id="profInstructions".

Código del botón activador de la reproducción de sonido

En siguiente trozo de código html hace que al darle clic a la imagen icon-voice_instructions_white_background.png se reproduzca el archivo de audio que contiene las instrucciones del profesor:

<a href="javascript:void(0);" onclick="Play();">
<img src="/icon-voice_instructions_white_background.png" height="25" width="50">
</a>

Al darle clic a la imagen que usamos como botón, se activa la función play() contenida dentro del código JavaScript presentado anteriormente la cual recibe el nombre del archivo con las instrucciones, en este caso el archivo prof-instr-01.mp3. Con un clic podemos escuchar y con otro clic detener la reproducción de las instrucciones.

Conclusión

He compartido con ustedes mi puesta en práctica del principio de modalidad propuesto por la teoría de la carga cognitiva de Sweller (1994) y de la teoría cognitiva del aprendizaje multimedia de Mayer (2005).

En síntesis, se trata de acceder a las instrucciones del profesor en audio a través de un pequeño botón reproductor de sonido. El reproductor lo coloqué encima de las instrucciones escritas para que el estudiante note que tiene la opción de escuchar las instrucciones o de leerlas.

Usted como lector puede experimentar con el código que le he compartido. Siempre se puede intentar mejorar, sin embargo, he querido mantener la sencillez del código JavaScript para evitar complicaciones y facilitar su rápida personalización.

Le invito a dejar su comentario en la parte de debajo de este artículo.

Referencias

Andrade-Lotero, Luis Alejandro (2012). Teoría de la carga cognitiva, diseño multimedia y aprendizaje: un estado del arte. Magis. Revista Internacional de Investigación en Educación, 5(10),75-92.[fecha de Consulta 2 de Octubre de 2022]. ISSN: 2027-1174. Disponible en:   https://www.redalyc.org/articulo.oa?id=281024896005

Poudel, S. (2022). Insertar imagen en un botón en HTML. Delft Stack. Retrieved 2 October 2022, from https://www.delftstack.com/es/howto/html/html-button-with-image/.

Flaticon. (2022, 2 octubre). Sonido Icon - 608417. Recuperado 2 de octubre de 2022, de https://www.flaticon.es/iconos-gratis/sonido

Flaticon. (2022a, octubre 2). instrucciones Icon - 2618595. Recuperado 2 de octubre de 2022, de https://www.flaticon.es/iconos-gratis/instrucciones

Tutorialbrain.com(2019). HTML Audio play and Pause using Single Button. Recuperado 2 de octubre de 2022, de https://www.tutorialbrain.com/editor_html/html_audio_play_pause_button.html