Elixir, MIDI & LiveView (CodeElixir London 2019)

In this talk, I demonstrate the use of Elixir, Phoenix LiveView with SVG and hot-code reloading to achieve live music coding.

Live demo at https://twitter.com/unnawut/status/1151939962855677952

Transcript

1. Elixir, MIDI & LiveView @thibaut_barrere - I create data pipelines with Ruby & Elixir
2. Code-based music production? infiniWIP (TM)
3. Previous episode https://github.com/thbar/demo-elixir-reloading-music
4. Detect when I save a code file def init(args) do {:ok, watcher_pid} = FileSystem.start_link(args) FileSystem.subscribe(watcher_pid) def handle_info({:file_event, watcher_pid, {path, events}}, state) do do IO.puts "The file at #{path} has changed!" {:noreply, state} end
5. Re-evaluate it at runtime (hot reloading) def handle_info({:file_event, watcher_pid, {path, events}}, state) do do Code.eval_file(path) {:noreply, state} end
6. AHA MOMENT GenServer reloading keeps the state across reloads. => We can keep the "current music position/tick" between reloads. defmodule Artist do use GenServer def handle_info(:tick, state) do Process.send_after(self(), :tick, @tick_period)
7. MIDI
8. Note On {0x90 + channel, note, velocity} Note Off {0x80 + channel, note, release_velocity}
9. Keyboard / Piano / Synthetizers photo by Clavia
10. MIDI controllers photo by Novation
11. Virtual Instruments (on computer)
12. Virtual Instruments (on iOS) photo by Korg
13. Lightning = Inter-Device Audio & MIDI (IDAM) photo by Apple
14. Elixir Code / DRY Refactoring Music Augmented Human (theory, scales) Soft realtime
15. brew install portmidi
17. # Start a process for MIDI event queue {:ok, pid} = PortMidi.open(:output, "Kontakt Virtual Input") note = 48 # C-4 velocity = 127 # Send "NOTE ON" PortMidi.write(pid, {0x90, note, velocity}) # Send "NOTE OFF" PortMidi.write(pid, {0x80, note})
19. Phoenix LiveView <div> <p> Time is <%= @time %> </p> </div> HTML? ✔
20. Phoenix LiveView <svg> <%= for note <- notes do %> <rect x="..." y="0" width="10" height="20" fill="<%= note.color %>"> <% end %> </svg> SVG? ✔
21. Phoenix LiveView <svg> <g> # white notes </g> <g> # black notes </g> </svg>
24. def note_on({channel, note, velocity}, device, portmidi \\ PortMidi) do Phoenix.PubSub.broadcast(Widgets.PubSub, "notes", {:note_on, note}) :ok = portmidi.write(device, {0x90 + channel, note, velocity}) end
26. Live Demo https://twitter.com/unnawut/status/1151939962855677952