MIDI 💜 Redux

Cómo reproducir un archivo MIDI usando Redux

  • MIDI 📝

    Un poquito de teoría

  • Mensajes MIDI 💬

    Bits, bytes, notas musicales...

  • Redux ⚛️

    Reproducir un archivo MIDI

Elena Torro

Elena Torró

Developer

  • Front End myABCKit
  • Twitter @eletorro
  • GitHub @elenatorro

🤔 🎼 + ⚛️

¿Qué es MIDI? ✋

❌ Qué NO es MIDI ❌

  • 🔇 No es un formato de audio

  • 🎼 No es un lenguaje musical

  • 🎮 No es la "música de los videojuegos antiguos"

✅ Qué SÍ es MIDI ✅

  • 📞 Un protocolo digital de comunicación

  • 📝 Un estándar tecnológico

  • 👤 Una interfaz digital

El estándar MIDI hace referencia a

  • Los cables que unen los dispositivos

  • Los conectores de estos cables

  • La manera de transmitir los mensajes por los cables

  • El tipo de mensaje que pueden intercambiar

  • La codificación de los mensajes

Separar la parte física

Cualquier dispositivo puede ser controlado si "habla" MIDI.

Controladores

Cualquier cosa puede ser un controlador

👌😀

🙃

Mensajes MIDI

  • Órdenes de control

  • Binario

  • 10 en 10

0 E n n n n n n n 1

Mensajes de canal

  • Voz

  • Modo

Mensajes de sistema

  • Comunes

  • Tiempo Real

  • Exclusivos

1 e e e c c c c

Byte de Estado

0 n n n n n n

Byte de Datos

0 n n n n n n

Byte de Datos (opcional)

Mensajes de canal

Mensajes de canal

Reproducción de una nota 🎵

  • Nota


    DO4

  • Número de nota


    60

  • Cálculo

    f = 440·2(h - 69) / 12


    (h = 60)

  • Frecuencia 🔊

    261,63Hz

WebAudio API 🤓

function getFrequency(note) {
  const
    LA_HZ  = 440,
    LA_DEC = 69,
    OCTAVE = 12
  ;

  return LA_HZ * Math.pow(2, (note - LA_DEC) / OCTAVE);
}

function generateOscillator(note) {
  let
    audioContext = new AudioContext,
    oscillator   = audioContext.createOscillator(),
    frequency    = getFrequency(note)
  ;

  oscillator.connect(audioContext.destination);
  oscillator.frequency.value = frequency;
  return oscillator;
}

Ficheros MIDI

  • Cabecera

  • Pistas

Estructura Fichero MIDI

Cabecera

"header": {
  "formatType": 1,
  "trackCount": 10,
  "ticksPerBeat": 96
}

Note ON

{
  "deltaTime": 1660,
  "channel": 0,
  "type": "channel",
  "noteNumber": 35,
  "velocity": 115,
  "subtype": "noteOn"
}

Note OFF

{
  "deltaTime": 13,
  "channel": 0,
  "type": "channel",
  "noteNumber": 35,
  "velocity": 0,
  "subtype": "noteOff"
}

Cálculo Delta Time ⏰

  • TicksPerBeat = 52 (Cabecera)
  • Microseconds Per Beat = 689655 (Set Tempo)
  • Microseconds Per Minute = 60000000 (Constante)

¿Redux? ✋

Redux library itself is only a set of helpers to “mount” reducers to a single global store object. You can use as little, or as much of Redux, as you like.

@danabramov

Redux

  • 2kb (incluyendo dependencias)

  • Flux + Elm

  • Puede utilizarse para cualquier framework

Principios Básicos

  • STORE: Única fuente de datos

    En la STORE se almacena el estado de la aplicación.

  • ACTIONS: para cambiar el estado

    La vista no cambia el estado.

  • REDUCERS: Funciones puras

    Actualizar el estado

midi-redux schema

API

  • createStore

  • combineReducers

  • applyMiddleware

👩‍💻CODE👀

💜 Gracias 💜