Gracias a una petición de uno de los comentaristas en una de las entradas anteriores, he decidido hacer un pequeño tutorial básico sobre cómo grabar sonidos con el grabador de voz para después reproducirlo.

Este tutorial está hecho de la manera más básica para entender un poco el funcionamiento del elemento de grabación de sonidos y ver que es bastante sencillo de utilizar ya que no dispone de muchas opciones.

  1. El primer paso es sacar todos los elementos que vamos a utilizar en el diseñador de pantalla. En este caso los elementos son:
    1. Dos disposiciones horizontales para meter unos botones y que estén bien alineados.
    2. Tres botones que servirán para controlar el comienzo, final y la reproducción del sonido.
    3. Un elemento de grabación de sonidos.
    4. Un elemento reproductor.

      listado de componentes

      listado de componentes

  2. El siguiente paso es adecentar un poco la pantalla con los botones para que se vean bien y que el usuario sepa cómo utilizarlos. En este caso dentro de la primera disposición hemos puesto un botón para iniciar la grabación de sonidos y otro para detener la grabación. Ambos ajustados al ancho del contenedor.
  3. En la otra disposición pondremos el tercer botón que queda (también ajustado al contenedor)  y que servirá para reproducir la última grabación realizada. Esto lo he hecho así para que se vea el funcionamiento del grabador de sonidos. En la mayoría de los casos lo lógico sería utilizar un elemento de almacenamiento para poder guardar todos los sonidos y posteriormente elegir uno para reproducir.

    elementos en la pantalla de diseño

    elementos en la pantalla de diseño

  4. Ahora pasamos al apartado de los bloques. Este apartado lo he dividido en 5 pequeños bloques:
    1. El primero contiene únicamente una variable global que utilizaremos para hacer un control de errores en los botones para que no comience una grabación que ya está en curso o que no detenga una grabación que ya esta parada. En este caso la variable la he llamado “grabando” y la he puesto a “falso” utilizando una pieza del bloque de lógica.

      variable global

      variable global

    2. En el segundo bloque programamos el botón de iniciar la grabación de la siguiente manera:
      • Sacamos el bloque “cuando Boton1 .click ejecutar”.
      • Dentro introducimos el bloque de control “si entonces”.
      • En la condición “si” engancharemos un bloque de lógica para comparar que 2 elementos sean iguales: el primero será la variable global “grabando” y el segundo será una pieza del bloque de lógica que indica “falso”.
      • Dentro de la resolución “entonces” añadimos el bloque “llamar GrabadorDeSonidos1.Iniciar” para indicar que se va a iniciar y a continuación ponemos la variable “grabando” a “cierto”.

        botón grabar sonido

        botón grabar sonido

    3. Para el siguiente bloque haremos exactamente lo mismo pero con algunos pequeños cambios ya que se trata del siguiente botón que hará detener la grabación:
      • En la condición “si” el segundo elemento a comparar será una pieza del bloque de lógica que indica “cierto”.
      • Dentro de la resolución “entonces” añadimos el bloque “llamar GrabadorDeSonidos1.Detener” y a continuación ponemos la variable “grabando” a “falso”.

        botón detener grabación

        botón detener grabación

    4. El siguiente bloque lo sacaremos del apartado de GrabadorDeSonidos1 que será “cuando GrabadorDeSonidos1.DespuésDeSonidoGrabado ejecutar”. Aquí pondremos la pieza “poner Reproductor1.Origen como” y junto a esta la pieza “tomar Sonido” que se puede obtener haciendo click en el parámetro “sonido” y elegir la opción “tomar”.

      asignar grabación al reproductor

      asignar grabación al reproductor

    5. El último bloque contendrá la programación del botón restante, el de reproducir el sonido. Para ello haremos lo siguiente:
      • Sacar la pieza de “cuando Boton3.click ejecutar” y añadimos la condición “si entonces” (esto es igual que con los otros botones).
      • En la condición “si” pondremos otra pieza de comparación de elementos pero esta vez la comparación será si es distinto. El primer elemento a comparar será “reproductor1.origen” y el segundo será un elemento vacío ” “. Esto es para que solamente reproduzca un sonido si se ha grabado algo.
      • Dentro de la resolución “entonces” añadiremos la pieza “llamar Reproductor1.Iniciar”. De esta manera se iniciará la reproducción.

        botón reproducir sonido

        botón reproducir sonido

Con estas pocas piezas de puzzle podemos hacer que el móvil grabe un sonido y reproducirlo. A partir de aquí ya es usar la imaginación y adaptar estos elementos a los distintos casos que se quieran programar.

51 Thoughts on “Grabar sonidos en App Inventor

  1. Daniel on 27 marzo, 2015 at 3:22 said:

    Excelente explicación, espero poder aplicarlo en mi idea :-) !!! Saludoss !!!

    • Iker on 27 marzo, 2015 at 14:21 said:

      Ánimo, si tienes cualquier duda me comentas que igual puedo echarte una mano.

      Saludos!

      • ya se que hace tiempo del post, pero me podrias resolver una duda?
        como puedo hacer que mi aplcacion guarde como archivo .mp3 lo grabado?

      • Hola, hice todo el procedimiento y no me funciona. me ayudarias? te lo agradezco

        • Iker on 1 octubre, 2016 at 10:31 said:

          Hola Andy,

          ¿Te sale algún error en el programa o algo? Necesitaría más datos para saber por qué no te funciona. Si quieres puedes enviarme un pantallazo de los bloques cómo los tienes hechos y te ayudaré en lo que pueda.

          Saludos!

  2. Gabriela on 2 abril, 2015 at 6:42 said:

    Hola, estaba buscando info de este tipo y no encontraba, mi consulta es cómo haría para grabar voz y luego de grabarse que se reproduzca automaticamente usando solo 1 botón que sea el de grabar y parar. Espero que me puedas ayudar, gracias !!

    • Iker on 7 abril, 2015 at 10:26 said:

      Hola Gabriela,

      En tu caso como sólo quieres usar un botón, habría que mezclar el contenido de los bloques de los botones en un mismo botón y el del reproductor también. Quedaría de la siguiente manera:

      http://bit.ly/1y0azah

      Espero haberte ayudado. Saludos!

  3. alys on 12 junio, 2015 at 8:36 said:

    realice todos los pasos pero no funciona que pudo aver pasado

  4. Minkoswky on 24 julio, 2015 at 23:56 said:

    Hola
    Me sirvió mucho tu información, gracias. Tengo una duda, después de todo esto, ¿cómo puedo hacer para almacenar el archivo de sonido en mi celular?, por ejemplo que se creara una lista de mis grabaciones en una carpeta.

    Gracias nuevamente

    • Iker on 29 agosto, 2015 at 20:19 said:

      Hola Minkoswky,

      Desde el editor de bloques el grabador de sonidos tiene una opción que se llama “poner GrabadorDeSonidos1.SavedRecording como”. Utilizando esa opción le puedes añadir una pieza de texto donde escribes la ruta de una carpeta de tu celular. Si este bloque lo incluyes dentro de “cuando. GrabadorDeSonidos1.DespuésDeSonidoGrabado” lo que hará será guardar cada sonido en la carpeta que indicas.

      Espero haberte ayudado. Gracias!

      • ariel on 12 abril, 2017 at 4:49 said:

        Como creo una carpeta para guardar los archivos que creo sin abrir una que ya tenga ?

        • Iker on 17 abril, 2017 at 10:46 said:

          Hola ariel,

          No puedes crear carpetas nuevas desde este punto. A la hora de guardar solamente puedes indicar una ruta existente por lo que el usuario ya tendría que tener esa ruta. Por eso todos los dispositivos móviles android tienen la misma estructura de carpetas. Algo que muchos programas usan para eso mismo.

          Saludos!

  5. milton on 4 agosto, 2015 at 17:53 said:

    Hola excelente publicación , tengo en mente un proyecto , habría forma de que el sonido se almacene en la internet y que cualquiera que cuente con la app pueda acceder al sonido grabado?

    • Iker on 29 agosto, 2015 at 20:40 said:

      Hola milton,

      Depende mucho de a dónde quieres subir los sonidos. Con appInventor2 puedes hacer que tras grabar el sonido automáticamente acceda a una dirección web específica que esté preparada para recibir archivos. En ese caso si deseas puedo explicar cómo acceder a una web.

      Saludos!

      • Hola Iker,

        puedes explicar cómo hacer que el sonido grabado se guarde directamente en una web y no se grabe en la tablet? Muchas gracias por las explicaciones

        • Hola Gerard,

          Si quieres mándame un email con tu caso concreto y me explicas un poco la idea que tienes y a qué web quieres subir los archivos de sonido y haré todo lo que pueda para ayudarte porque cada sitio web puede funcionar de manera diferente.

          Gracias!

  6. Excelente idea… ayudame a adaptarla. ok necesito tener cinco a mas audios almacenados luego de grabarlos y llamarlos mostrando a la vez texto y imagen. esto se puede enviar por sms?

  7. Pingback: Compartir archivos en App Inventor - Aprender a programar apps

  8. Luis asprilla on 25 septiembre, 2015 at 7:06 said:

    Hola a todos. Soy nuevo en el manejo de app inventor, de pronto alguien sabe cómo crear carpetas para luego almacenar fotos en ellas. En pocas palabras quiero hacer una aplicación que me pida el nombre de la carpeta y luego tomar 10 fotos y almacenarlas en esa carpeta, pero que cada vez lo haga en carpetas diferentes. Hago trabajos de obra civil y quiero crear una carpeta por cada sitios que quede la carpeta con sus respectivas fotos y no estar bajandolas y ordenándolas. Muchas gracias si alguien puede ayudarme

  9. Hola muy bueno el articulo, ahora te pregunto, como hago para grabar el archivo de Sonido y enviar ese mismo archivo ya sea por email o por wathsapp?

    • Hola Manlio,

      Para enviar el archivo utilizando otra app como por ejemplo Whatsapp, puedes utilizar una opción que explico en esta otra entrada: http://aprenderaprogramarapps.es/2015/09/12/compartir-archivos-en-app-inventor/

      En esta ocasión el usuario podrá elegir con qué app compartir el archivo. Esto es así porque no tenemos control sobre otros programas, eso dependerá de lo que el usuario tenga instalado en su dispositivo. No obstante, mandar un email es otro tema. Pronto subiré una entrada explicando cómo mandar un email.

      Espero haberte ayudado, saludos!

  10. Jorge on 2 mayo, 2016 at 20:39 said:

    Buenas,
    excelente aplicación
    la pondré en práctica esta semana con mis alumnos

  11. herlin barrios on 5 mayo, 2016 at 6:29 said:

    Buenas noches,

    gracias por tu aporte, voy a probarlo y te cuento, aunque estoy seguro que funcionará.

    Tengo otra duda, en las app de appinventor se pueden colocar imagines .gif que tengan movimiento?

    • Iker on 5 mayo, 2016 at 22:26 said:

      Hola Herlin,

      Por el momento app inventor no admite gifs animados. Una solución que siguen algunos es utilizar un reloj temporizador para que cada X milisegundos cambie una imagen a otra para que parezca que se mueve.

      Saludos!

  12. álfonso gallego sané on 8 mayo, 2016 at 16:02 said:

    Buenas. Buen post.
    Segui las instrucciones tal como las pusiste. pero al probar el resultado me aparece error 702:Unable to prepare package sonido,

    • Iker on 8 mayo, 2016 at 16:07 said:

      Hola,

      Debería funcionarte, ¿podrías enviarme un pantallazo de los bloques que has usado y cómo están colocados? Si puedo te echaré una mano.

      Saludos!

      • álfonso gallego sané on 12 mayo, 2016 at 1:43 said:

        Ya lo arreglé. El fallo estaba en que el sonido que intentaba grabar era muy bajo y no lo captaba. Muchas gracias.

  13. Jessica on 9 mayo, 2016 at 3:11 said:

    Hola excelente explicacion :) i yo lo que quiero lograr es que mediante el grabador de sonidos se graben notas de voz que se guarden en la tinyDB, para luego escuchar la grabacion, se me guardan efectivamente y las escucho
    pero cuando vuelvo a entrar en la app la grabacion no me sale nada se me borra completamente de la tinyDB
    .. podrias ayudarme? la idea es que el sonido se quede guardado para poder consultarlo mas tarde no que se borre cada vez que se entre en la app

    • Iker on 10 mayo, 2016 at 20:16 said:

      Hola Jessica,

      Para esos casos lo mejor es que se guarde en un fichero en el propio dispositivo. TinyDB funciona muy bien y está pensada más que nada para cuando necesitas guardar datos temporales. Depende del dispositivo portátil que tengas te puede mantener los datos de TinyDB o no.

      Inténtalo indicando la ruta donde quieres guardar el sonido y si te resulta muy complicado me dices e intentaré ayudarte.

      Gracias y saludos!

  14. Jessica on 10 mayo, 2016 at 23:24 said:

    Hola gracias por responder :), he buscado diferentes metodos pero no me guarda el sonido en la TinyDB, solo cuando la app se ejecuta pero cuando vuelvo a entrar se borra completamente del list picker, como indico la ruta ?
    de verdad no lo he podido hacer…

  15. Jessica on 12 mayo, 2016 at 20:14 said:

    Hola como estas ? soy yo de nuevo, he intentado hacerlo pero no me funciona podrias ayudarme en esa parte ???

    • Iker on 12 mayo, 2016 at 20:30 said:

      Hola Jessica,

      ¿Podrías enviarme por email unos pantallazos de cómo lo tienes montado? Les echo un vistazo y te ayudo en lo que pueda.

      Saludos!

  16. Jessica on 13 mayo, 2016 at 0:09 said:

    Ok gracias ya te envie el correo con las captures :)

  17. Ivan Erazo on 13 mayo, 2016 at 6:45 said:

    Hola que tal… te hago una consulta… yo estoy intentando hacer hacer parecido pero trato de compartir un audio que ya esta incluida en la app, es decir, la app que intento hacer tiene varios audios pregrabados que se pueden escuchar pero intento colocar un boton de Share para que el usuario si desea pueda compartir ese audio… Es posible realizar esto?
    Por cierto gran aporte el que has hecho. Saludos

    • Iker on 15 mayo, 2016 at 11:00 said:

      Hola Ivan,

      Sí que es posible compartir archivos. Como tu dices, puedes utilizar el componente Sharing que está en el apartado “Social” y desde los bloques puedes utilizar la función “llamar Sharing.CompartirArchivo” donde le indicas la ruta donde está el archivo (que ya lo tendrás puesto que puedes reproducirlo). Este componente hace que al usuario le aparezca una ventana donde puede elegir con qué programa compartir (whatsapp, facebook, twitter, etc) y enviar el archivo.

      Espero haberte ayudado.

      Saludos!

  18. Antonio David on 18 mayo, 2016 at 17:09 said:

    hola, me gustaria saber como podria poner para que los audios se guardaran en internet y otra persona los pudiera ver, si me pudieras dar tu correo para preguntarte mejor, gracias!!.

    • Iker on 18 mayo, 2016 at 22:10 said:

      Hola Antonio David,

      Para conseguir lo que buscas ya es necesario una programación más compleja. Actualmente App Inventor no dispone de un método sencillo de hacer eso. Lo que otras personas están haciendo es programar un servidor web que pueda recibir archivos y desde App Inventor utilizando la opción de compartir es posible enviarlos a una dirección concreta.

      Saludos!

  19. Pol on 27 mayo, 2016 at 12:41 said:

    Hola, me gustaría saber como hacer para poner un botón que grabe la voz, otro botón para dejar de grabar. Y como puedo hacer que con un botón se abra una página nueva con la lista de grabaciones que ha echo.

    Espero tu respuesta, Gracias.

    • Iker on 28 mayo, 2016 at 14:41 said:

      Hola Pol,

      Para grabar el sonido y dejar de grabar es sencillo, lo tienes en esta misma entrada paso por paso. Para la opción de abrir una página nueva con la lista de grabaciones, las tendrías que utilizar el elemento “archivo” para ir guardando la ruta a cada sonido que se vaya guardando. Luego simplemente accedes a ese archivo y muestras la lista en la nueva pantalla.

      Espero haberte ayudado.

      Saludos!

  20. Hola!! mi consulta es la siguiente necesito generar un botón, que me abra la carpeta de música que tengo en mi dispositivo, por favor ayuda!!

    • Iker on 9 julio, 2016 at 11:08 said:

      Hola Nicolas,

      Por el momento appInventor no dispone de ningún elemento capaz de manipular carpetas ni navegar entre ellas. Si lo que buscas es poder reproducir música tendrías que saber de antemano el nombre del archivo que quieres reproducir e indicarle la ruta exacta en la carpeta donde lo tengas. Sino lo que puedes hacer es tener una lista de nombres de los archivos de música que tengas en tu carpeta y cada vez que añadas uno nuevo actualizar esa lista. De este modo podrías abrir esa lista, elegir la canción que quieres escuchar y reproducirla. Pero claro, todo depende del trabajo de tener esa lista al día.

      Espero haberte ayudado.

      Saludos!

  21. Marcos on 8 agosto, 2016 at 17:57 said:

    Hola y dime si lo que necesito es que detecte por ejemplo si se sopla sobre el micrófono, es decir que este sea el evento que desencadene las acciones? Qué sensor debo usar?

    • Iker on 14 agosto, 2016 at 18:28 said:

      Hola Marcos,

      De momento App Inventor no incluye ningún detector de soplar en el micro. Como ya hay aplicaciones que tienen sí que es posible hacerlo pero no es algo muy sencillo y por ello de momento App Inventor no dispone de ello, al menos que yo sepa.

      Saludos y gracias!

  22. JAIR FERNANDO on 29 septiembre, 2016 at 3:37 said:

    hola brother buenaS noches mira, yo intente hacer eso, pero con un xilofono que reproduce los sonidos en arduino, quiero grabar y reproducir las notas que yo ya toque, pero al momento de aplastarle el boton de grabar, me dice q un mensaje “lamentablemente, MIT AI2 se detuvo” y me saca de la aplicacion, porque crees que sea?

    • Iker on 1 octubre, 2016 at 10:35 said:

      Hola JAIR FERNANDO,

      No se si sigues teniendo este problema pero bueno te respondo de todas formas.

      Puede ser por varios motivos. Podría ser que no capta ningún sonido por ejemplo que suele ser el más común, o que ya hay una grabación en marcha por ejemplo.

      Revisa todos los pasos por si acaso y prueba otra vez a ver si te has dejado algo. Si no puedes enviarme pantallazos si quieres y le echaré un vistazo a ver si por casualidad encuentro algo raro.

      Gracias y saludos!

  23. JAIR FERNANDO on 30 septiembre, 2016 at 16:53 said:

    BUENAS AQUI YO DE NUEVO, COMO PUEDO HACER PARA REPETIR LAS ACCIONES (OPRIMIR BOTONES), SIN QUE YO LOS PRESIONE, QUE LA APP SOLA HAGA ESA ACCION.

    CLARO UNA VEZ QUE YO YA ALLA PRESIONADO ANTES, OSEA QUE LA APP GUARDE LA ACCION ANTERIOR YA HECHA POR MI Y LAS REPITA AUTOMATICAMENTE.

    • Iker on 1 octubre, 2016 at 10:41 said:

      Hola JAIR FERNANDO

      Para eso deberás tener una variable que se sirva para saber si se ha presionado el botón o no. Incializas la variable “botonPresionado” a “false” por ejemplo y al pulsar el botón pones esa variable a “true”. Desde ese momento ya sabes que el botón ha sido presionado así que en el momento que necesites puedes volver a utilizar los bloques que estén dentro del bloque de “cuando boton1. click” que es como si hubieras hecho click en el botón.

      No se si me explico bien, si necesitas más detalles mándame un email y te ayudaré en lo que pueda.

      Gracias y saludos!

  24. ciro on 18 marzo, 2017 at 5:02 said:

    hola como estas?? tienes algun facebook o algo donde pueda comunicarme contigo? tengo un proyecto en mente y necesito ayuda saludos!

  25. Ramon on 19 abril, 2017 at 21:28 said:

    Hola, me da un error EROFS (Read Only File System)
    Error 802: can not start recording

    • Iker on 22 abril, 2017 at 12:21 said:

      Hola Ramon,

      Ese error te da porque la ruta donde quieres guardar el archivo de grabación no permite escribir. Asegúrate de que esa ruta tiene permisos para escribir. Lo habitual es guardar este tipo de cosas en la carpeta de Descargas del dispositivo porque siempre tiene permisos de escritura.

      Espero haberte ayudado. Saludos!

Deja un comentario

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

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies