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
340
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
470
De Rails à Phoenix - retour d'expérience sur une réécriture d'application SaaS
thbar
3
2.2k
Processing data with Ruby and Kiba ETL
thbar
0
220
Retour d'expérience sur le bootstrapping de WiseCash (produit SaaS)
thbar
0
810
Bootstrapping your SaaS product (with freelancing)
thbar
3
530
Prestations agiles avec Acunote et Freckle
thbar
3
560
Other Decks in Programming
See All in Programming
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
350
[JAWS DAYS 2025] 最近の DB の競合解決の仕組みが分かった気になってみた
maroon1st
0
160
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
130
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
420
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
color-scheme: light dark; を完全に理解する
uhyo
7
500
Datadog Workflow Automation で圧倒的価値提供
showwin
1
300
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
41
2.5k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Side Projects
sachag
452
42k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Why Our Code Smells
bkeepers
PRO
336
57k
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