DEV Community: Bitquark Software

Separar una canción en diferentes pistas con Spleeter

Bitquark Software — Wed, 26 Aug 2020 01:06:12 +0000

Como buenos músicos, nos hemos encontrado con la necesidad de practicar nuestra canción favorita con nuestro instrumento favorito.

Este post va dedicado a todos los bajistas, guitarristas, baterístas y cantantes que desean realizar covers de canciones profesionales.

Nivel de dificultad: Intermedio

Con esta herramienta podremos separar hasta 5 pistas:

Vocales
Batería
Bajo
Guitarra
Extras

Temario

Dependencias necesarias
Instalación
Separación de una pista
Unión de las pistas (Opcional)

⚠️⚠️ Esta herramienta no fue escrita por nosotros, el autor es Deezer y le damos los créditos a ellos ⚠️⚠️

Dependencias necesarias

Spleeter es un programa que aplica redes neuronales para entrenar a una IA con la finalidad de separar las pistas de audio a partir de las frecuencias de cada instrumento de la canción original.

Spleeter está escrito en #python, por lo que, deberemos de tener una versión de python 3.6 ó 3.7

⚠️⚠️ Spleeter no funciona en python 3.8 por el momento ⚠️⚠️

Como primer dependencia vamos a instalar ffmpeg:

Windows: Descarga FFmpeg aquí
MacOS: Lo instalaremos mediante brew:

brew install ffmpeg

Linux: sudo apt install ffmpeg (Dependerá de la distribución)

La segunda dependencia es pip, (Si tienes Python instalado ya tienes pip 😉)

Instalación

Para poder instalar spleeter debemos ejecutar el siguiente comando:

pip install spleeter

Será una instalación larga, ten paciencia.

🚫 Me salió un error ☹️ 🚫

Si te encuentras con un error como este:

ERROR: Could not find a version that satisfies the requirement spleeter (from versions: none)
ERROR: No matching distribution found for spleeter

Quiere decir que la versión de Python que tienes instalada no es compatible, como te mencioné anteriormente, solo funciona con python 3.6 ó python 3.7

Eso es todo 😳

Separación de una pista

Abrimos una terminal (desgraciadamente spleeter todavía no incluye una GUI o aplicación ejecutable) y ejecutamos el siguiente comando:

spleeter separate -i cancion.mp3 -o pistas -p spleeter:4stems

Explicación de cada argumento:

splitter separate: Instrucción para separar una pista
-i cancion.mp3: Seleccionaremos nuestro archivo .mp3 original
-o pistas: Carpeta donde se guardarán las pistas generadas.
-p spleeter:4stems: Modelo entrenado de la red para separar las pistas.

El último argumento indica la cantidad de pistas que obtendrá.

Si deseas separar las vocales de la canción, el último argumento será -p spleeter:2stems.
Si deseas separar las vocales, bajo, batería y guitarras de la canción, el último argumento será -p spleeter:4stems.
Si eres más exigente o quieres experimentar con cinco pistas, el último argumento será -p spleeter:5stems.

Ejecución (con imágenes):

Después, descargará una copia del modelo entrenado:

Posteriormente, hará una verificación de la copia del modelo:

Y nos mostrará los mensajes de pistas generadas exitosamente.

Si revisamos nuestro directorio, veremos lo siguiente:

Dentro de pistas/cancion/ obtendremos las pistas separadas en formato .wav

Unión de las pistas (Opcional)

Para este paso utilizaremos Audacity

Una vez abierta la aplicación, arrastraremos una de las pistas generadas:

Ahora, vamos a agregar la pista de la batería:

Finalmente, daremos clic en el botón de play y reproduciremos ambas pistas.

¡Si te gustó síguenos en nuestra redes sociales y aquí para más contenido!

Synthwave + CSS + HTML

Bitquark Software — Sun, 23 Aug 2020 23:34:34 +0000

El día de hoy vamos a aprender a crear esta animación del género Synthwave

Temario

Creación del cuerpo (HTML)
Agregar estilos 😎
Enlace al repositorio 🚀

Empecemos creando el cuerpo de nuestra vista (HTML)

index.html:

<body class="synthwave-background">
</body>

Nunca, pero nunca apliques estilos sobre la etiqueta body del documento si planeas usar estos estilos en producción o en proyectos más grandes ! 🚫

Nuestra página necesita un texto a mostrar, ¡manos a la obra!

<body class="synthwave-background">
    <div class="_80s-text">
        <h1>Synthwave</h1>
    </div>
</body>

Agregar el sol con las líneas características del synthwave fue algo complicado, especialmente si eres nuevo en css, la primera opción sería utilizar una imagen, pero no se veía tan bien como se esperaba, sin embargo, se pueden crear con puros elementos HTML! 😳

<body class="synthwave-background">
    <div class="_80s-text">
        <h1>Synthwave</h1>
    </div>
    <div class="sun">
        <div class="lines">
            <div class="line" style="--pos:1;"></div>
            <div class="line" style="--pos:2;"></div>
            <div class="line" style="--pos:3;"></div>
            <div class="line" style="--pos:4;"></div>
            <div class="line" style="--pos:5;"></div>
            <div class="line" style="--pos:6;"></div>
            <div class="line" style="--pos:7;"></div>
        </div>
    </div>
</body>

Aquí dibujamos línea por línea, y la estilizamos con CSS, además, le indicamos la variable --pos:N para realizar un cálculo que más adelante veremos.

Finalmente, nos queda representar el suelo que se animará, de la misma manera, crear este elemento es un poco complicado, y aunque una imagen parezca la mejor solución, encontramos una forma más eficiente y continuamos con #PURECSS.

<body class="synthwave-background">
    <div class="_80s-text">
        <h1>Synthwave</h1>
    </div>
    <div class="sun">
        <div class="lines">
            <div class="line" style="--pos:1;"></div>
            <div class="line" style="--pos:2;"></div>
            <div class="line" style="--pos:3;"></div>
            <div class="line" style="--pos:4;"></div>
            <div class="line" style="--pos:5;"></div>
            <div class="line" style="--pos:6;"></div>
            <div class="line" style="--pos:7;"></div>
        </div>
    </div>
   <div class="road"></div><!-- Sí, eso es todo 😳 -->
</body>

¡Vamos a estilizar!

app.css:

* {
  box-sizing: border-box;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Helvetica Neue", Arial, sans-serif;
}

Empecemos especificando unas reglas para una mejor visualización.

A continuación, agregaremos una fuente para que se vea mucho más S Y N T H W A V E


@font-face {
  src: url("./assets/Neon.ttf");
  font-family: "Neon";
}

Esa fuente la encontrarás en el repositorio 😉

Ahora sí, vamos a crear el fondo:

.synthwave-background {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgb(20, 39, 79) 0px,
    rgb(242, 21, 119) 500px,
    rgb(20, 39, 79) 500px
  );
}

Eso dejará un degradado de fondo, continuamos con la creación del suelo:

.road {
  width: 100%;
  height: 40em;
  overflow: hidden;
}

Lo anterior solo especifica su tamaño, con las siguientes reglas crearemos las líneas del suelo

/*.road*/
...
background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(62, 250, 240, 0.5) 0%,
      rgba(62, 250, 240, 0.5) 3px,
      rgba(0, 0, 0, 0) 0px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(62, 250, 240, 0.5) 0%,
      rgba(62, 250, 240, 0.5) 3px,
      rgba(0, 0, 0, 0) 0px
    );

Eso creará una malla con cubos trazados como gradientes, genial no?

Para terminar con el suelo, agregamos las siguientes reglas:

  /*.road*/
  ...
  background-size: 2em 1em, 2em 1em;
  background-color: rgb(20, 39, 79);
  perspective: 1000px;
  margin-top: 20em;
  transform: perspective(200px) rotateX(45deg) scale(2);
  animation: road 10s linear infinite;

Le especificamos el tamaño del fondo, la perspectiva inclinada con su respectiva transformación y por último, una animación que le dará vida a nuestra página.

Vamos a continuar creando el sol

.sun {
  width: 400px;
  height: 400px;
  background: linear-gradient(180deg, #faf09d 0%, #fc9093 52.08%, #e92077 100%);
  border-radius: 50%;
  z-index: 1;
  margin: 0 auto;
  position: absolute;
  top: 100px;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

Ahí crearemos un div circular con el degradado del sol.

Continuamos estilizando el div que contendrá las líneas:

.sun > .lines {
  width: 100%;
  height: 50%;
  position: relative;
  bottom: -60%;
  border-radius: 0 0 50% 50%;
  overflow: hidden;
}

Esas reglas nos bastarán para situar las líneas al fondo del sol.

Por último, vamos a estilizar cada línea del sol, como sabrás, cada línea tiene un tamaño mayor a la línea anterior, esto lo logramos con este bloque:

.lines > .line {
  width: 100%;
  height: calc(5px * var(--pos));
  background-color: rgba(0, 0, 0, 0.3);
  mix-blend-mode: overlay;
  margin-bottom: 1rem;
}

La variable --pos nos servirá para aumentar el tamaño del div siguiente.

Vamos a animar nuestro suelo:

@keyframes road {
  from {
    transform: perspective(200px) rotateX(45deg) scale(1.5);
  }
  to {
    transform: perspective(200px) rotateX(45deg) scale(2.1);
  }
}

Por último, estilizaremos los textos en nuestro sitio:

._80s-text {
  font-size: 6em;
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 4;
}
._80s-text > h1 {
  font-family: "Neon", Arial, Helvetica, sans-serif;
  width: 100%;
  text-align: center;
  color: rgb(252, 121, 218);
  text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px rgb(234, 38, 171),
    0 0 10px rgb(234, 38, 171), 0 0 15px rgb(234, 38, 171),
    0 0 20px rgb(234, 38, 171), 0 0 25px rgb(234, 38, 171);
}

Resultado

Enlace al repositorio

Podrás descargar y probar este efecto en tu equipo aquí.

¡Si te gustó síguenos en nuestra redes sociales y aquí para más contenido!