Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Elixir, MIDI and LiveView
Search
Thibaut Barrère
June 18, 2019
Programming
0
350
Elixir, MIDI and LiveView
(Paris.Ex meetup)
Thibaut Barrère
June 18, 2019
Tweet
Share
More Decks by Thibaut Barrère
See All by Thibaut Barrère
Kiba ETL: feedback on OSS / open-core sustainability for a Ruby gem
thbar
0
110
Elixir, MIDI & LiveView (CodeElixir London 2019)
thbar
0
1.1k
Kiba ETL v2 - RubyKaigi 2018
thbar
4
1.7k
Elixir hot-reloading & MIDI events generation
thbar
1
490
De Rails à Phoenix - retour d'expérience sur une réécriture d'application SaaS
thbar
3
2.3k
Processing data with Ruby and Kiba ETL
thbar
0
230
Retour d'expérience sur le bootstrapping de WiseCash (produit SaaS)
thbar
0
840
Bootstrapping your SaaS product (with freelancing)
thbar
3
560
Prestations agiles avec Acunote et Freckle
thbar
3
560
Other Decks in Programming
See All in Programming
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
39
14k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
630
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
640
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
780
slogパッケージの深掘り
integral0515
0
120
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
240
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
11
6.9k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
290
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
Building an army of robots
kneath
306
45k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Navigating Team Friction
lara
187
15k
Transcript
Elixir, MIDI & LiveView
@thibaut_barrere Consultant Ruby / Elixir / Ansible Kiba ETL /
Kiba Pro Remote 100% (Charente Maritime)
Elixir => Code-Centric Digital Audio Workstation? infiniwip (tm)
Previous episode https://github.com/thbar/demo-elixir-reloading-music Code.eval_file("music.exs")
MIDI
Note On {0x90 + channel, note, velocity} Note Off {0x80
+ channel, note, release_velocity}
Keyboard / Piano / Synthetizers photo by Clavia
MIDI controllers photo by Novation
Virtual Instruments (on computer)
Virtual Instruments (on iOS) photo by Korg
Lightning = Inter-Device Audio & MIDI (IDAM) photo by Apple
Elixir Code / DRY Refactoring Music Augmented Human (theory, scales)
Soft realtime
brew install portmidi
None
# 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})
None
Computer: Note 60 Human: WTF????
Translation def note_number_to_latin_name(midi_note, middle_c \\ @default_middle_c) do remap_note(midi_note, @latin_names, middle_c)
end defp remap_note(midi_note, names, middle_c) do offset = get_base_offset(middle_c) octave = div(midi_note + offset, 12) octave_note = rem(midi_note + offset, 12) octave_note = names |> Enum.at(octave_note) "#{octave_note}#{octave}" end defp get_base_offset("C4"), do: -12
DocTests ❤ ## Examples iex> MusicRef.note_number_to_latin_name(60) "Do4" iex> MusicRef.note_number_to_latin_name(78) "Fa#5"
Phoenix LiveView <div> <p> Time is <%= @time %> </p>
</div> HTML? ✔
Phoenix LiveView <svg> <%= for note <- notes do %>
<rect x="..." y="0" width="10" height="20" fill="<%= note.color %>"> <% end %> </svg> SVG? ✔
Phoenix LiveView <svg> <g> # white notes </g> <g> #
black notes </g> </svg>
None
None
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
None
Code & Demo