VaidrollTeam: CÓMO CREAR TU REPRODUCTOR DE MÚSICA CON MIT APP INVENTOR

¿Quieres tu app de música personalizada? Aprende cómo con MIT App Inventor y Google Drive.

Desarrolla un reproductor de música funcional y fácil de usar con este proyecto que combina la accesibilidad de MIT App Inventor con la potencia de Google Apps Script para interactuar con los archivos de audio almacenados en Google Drive, logrando un sistema donde la aplicación se actualiza automáticamente con las nuevas canciones añadidas a la carpeta en la nube.

Funcionamiento del Proyecto:

Gestión en Google Drive: Los archivos de música se almacenan en una carpeta específica de Google Drive.

Carga Automática: Al iniciar la aplicación, se conecta a Google Apps Script para obtener la lista de archivos de música de esa carpeta.

Visualización: Los nombres de las canciones se muestran en una lista dentro de la aplicación.

Reproducción: Al seleccionar una canción, la aplicación solicita al script la URL de descarga y comienza la reproducción utilizando el reproductor integrado.

Controles: Los botones permiten pausar, detener y reanudar la reproducción de la música seleccionada.

Google Apps Script:

Aquí pueden observar el código desarrollado en Google Apps Script. Como verán, la mayor parte del código está comentado brevemente para facilitar su comprensión.

function doGet(e) 
{
  //Verificar si se solicita la URL de descarga de un archivo
  if(e.parameter.function === "obtenerUrlDeDescarga" && e.parameter.id)
  {
    //Función para obtener la URL de descarga
    return obtenerUrlDeDescarga(e.parameter.id);
  }else
  {
    //Función para la lista
    return obtenerListaDeMusica();
  }
}

function obtenerListaDeMusica()
{
try
{
  //Nombre de la carpeta
  var nombreCarpeta = "MusicaAppInventor";

  //Obtiene la carpeta con el nombre especificado
  var carpetas = DriveApp.getFoldersByName(nombreCarpeta);

  //Obtiene la primera carpeta con ese nombre en la raiz
  var carpeta = carpetas.next();

  //Define el tipo de archivo mp3
  var mimeTypeAudioMP3 = "audio/mpeg";

  //Filtrar los archivos
  var archivos = carpeta.getFilesByType(mimeTypeAudioMP3);
  var listaDeMusica = [];

  //Mientras haya más archivos en la colección
  while (archivos.hasNext())
  {
    //Obtiene el siguiente archivo
    var archivo = archivos.next();
    //Agrega un objeto con nombre e ID del archivo al array
    listaDeMusica.push(
      {
        nombre: archivo.getName(),
        id: archivo.getId(),
      }
    )
  }

    //Devuelve la lista de archivos mp3 con nombre e ID como JSON
    return ContentService.createTextOutput(JSON.stringify(listaDeMusica))
    .setMimeType(ContentService.MimeType.JSON);
}catch(e)
{
    //En caso de error
    return ContentService.createTextOutput(JSON.stringify({error: 
    "Ocurrió un error al acceder a la carpeta o archivos" + e}))
    .setMimeType(ContentService.MimeType.JSON);
}
}

function obtenerUrlDeDescarga(fileId)
{
try
{
  var file = DriveApp.getFileById(fileId);
  var url = file.getDownloadUrl();

  // Devuelve la URL como un objeto JSON con el tipo de archivo correcto
  return ContentService.createTextOutput(JSON.stringify({url:url}))
  .setMimeType(ContentService.MimeType.JSON);
}catch(e)
{
// Devuelve un mensaje de error en formato JSON
  return ContentService.createTextOutput(JSON.stringify({ error: 
  "No se pudo obtener la URL para el archivo con ID: " + fileId + ". Error: "+e}))
  .setMimeType(ContentService.MimeType.JSON);
}
}

Si te encuentras con un mensaje de error que no entiendes en la aplicación y las canciones no se cargan, una buena estrategia para aislar el problema y tener una idea más clara de dónde podría estar el fallo es simplificar temporalmente la lógica. Prueba dejando SOLAMENTE los siguientes bloques en el evento Web1.GotText

Si, dejando únicamente estos bloques, la lista en tu visor se llena correctamente con el ID y el nombre de las canciones, entonces es muy probable que el error se encuentre en alguno de los bloques.

Si incluso con estos bloques simplificados la aplicación no carga las canciones, es muy posible que el error se encuentre directamente en el código de tu Google Apps Script. Revisa cuidadosamente la lógica de tu script, los permisos y asegúrate de que esté enviando la respuesta en el formato JSON correcto.

Te agradecería que me dejaras un me gusta en el video. 👍

¿Qué encontrarás en el archivo descargable?

Aquí encontrarás el archivo del proyecto de MIT App Inventor que desarrollamos en este tutorial.

Solo faltaría configurar la URL.

Recuerda que para usar el proyecto, necesitas:

Configurar tu propia cuenta de Google Drive.
Crear la carpeta específica donde se almacenarán los archivos de audio.
Crear y configurar el archivo de Google Apps Script siguiendo los pasos que vimos en este tutorial.
Enlazar la URL de ese script con su aplicación de MIT App Inventor.