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
1k
Kiba ETL v2 - RubyKaigi 2018
thbar
4
1.6k
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
800
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
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
12
4.1k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
140
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
170
SpringBoot3.4の構造化ログ #kanjava
irof
2
1k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
330
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
2
480
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
210
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
140
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Thoughts on Productivity
jonyablonski
69
4.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
330
How to Ace a Technical Interview
jacobian
276
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Documentation Writing (for coders)
carmenintech
67
4.6k
Faster Mobile Websites
deanohume
306
31k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
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