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
330
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
450
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
210
Retour d'expérience sur le bootstrapping de WiseCash (produit SaaS)
thbar
0
780
Bootstrapping your SaaS product (with freelancing)
thbar
3
520
Prestations agiles avec Acunote et Freckle
thbar
3
550
Other Decks in Programming
See All in Programming
Full stack testing :: basic to basic
up1
1
930
第5回日本眼科AI学会総会_AIコンテスト_3位解法
neilsaw
0
170
talk-with-local-llm-with-web-streams-api
kbaba1001
0
180
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
300
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
450
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
270
暇に任せてProxmoxコンソール 作ってみました
karugamo
1
720
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
270
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
250
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
What's in a price? How to price your products and services
michaelherold
243
12k
Code Reviewing Like a Champion
maltzj
520
39k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Optimising Largest Contentful Paint
csswizardry
33
3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
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