this repo has no description
:memo: WebMIDI section done
+106
-1
+42
paper/bibliography.yaml
+42
paper/bibliography.yaml
···
1
1
# See https://github.com/typst/hayagriva/pull/192
2
2
# yaml-language-server: $schema=https://raw.githubusercontent.com/typst/hayagriva/0c640417cfb35067c13f1ee0ce0ee35f57a897fb/hayagriva.schema.json
3
3
4
+
# TODO raise an issue , anchors are not interpreted
5
+
# today: &retrieved
6
+
# type: web
7
+
# date: 2025-03-22
8
+
4
9
webmidi:
5
10
type: reference
11
+
title: Web MIDI API
6
12
url: https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API
13
+
date: 2025-03-22
14
+
organization: Mozilla Developer Network
15
+
author: MDN Authors
16
+
17
+
pianowasmdemo:
18
+
type: video
19
+
title: Démo de piano avec shapemaker
20
+
url: https://www.instagram.com/p/C6byymcou5k/
21
+
date: 2024-05-01
22
+
author: Gwenn Le Bihan
23
+
24
+
wasmbindgen:
25
+
type: book
26
+
title: The `wasm-bindgen` Guide
27
+
url: https://rustwasm.github.io/wasm-bindgen/introduction.html
28
+
date: 2025-03-22
29
+
author: Rust and WebAssembly Working Group
30
+
31
+
wasm:
32
+
title: WebAssembly
33
+
type: web
34
+
url: https://webassembly.org/
35
+
date: 2025-03-22
36
+
author: WebAssembly Community Group
7
37
38
+
svginhtml:
39
+
title: Scalable Vector Graphics (SVG) 2 § 1.1 About SVG
40
+
type: reference
41
+
url: https://svgwg.org/svg2-draft/intro.html#AboutSVG
42
+
date: 2023-03-08
43
+
author:
44
+
- Amelia Bellamy-Royds
45
+
- Chris Lilley
46
+
- Tavmjong Bah
47
+
- Dirk Schulze
48
+
- Eric Willigers
49
+
publisher: W3C Editor's Draft
paper/main.pdf
paper/main.pdf
This is a binary file and will not be displayed.
+63
paper/main.typ
+63
paper/main.typ
···
66
66
67
67
== Temps réel: WASM et WebMIDI
68
68
69
+
Il est possible de réagir en temps réel à des pressions de touches sur des appareils conçus pour la production musicale assistée par ordinateur (MAO): des claviers, des potentiomères pour ajuster des réglages affectant le timbre d'un son, des pads pour déclencher des sons et, par exemple, jouer des percussions, etc.
70
+
71
+
Ces appareils sont appelés "contrôleurs MIDI", du protocole standard qui régit leur communication avec l'ordinateur.
72
+
73
+
S'il est évidemment possible d'interagit avec ces contrôleurs depuis un programme natif (c'est après tout ce que font les logiciels de production musicale), j'ai préféré tenté l'approche Web, pour en faciliter l'accessibilité et en réduire le temps nécéssaire à la mise en place #footnote[
74
+
Imaginez, votre ordinateur a un problème 5 minutes avant le début d'une installation live, et vous aviez prévu d'utiliser Shapemaker pour des visuels. En faisant du dispostif un site web, il suffit de brancher son contrôleur à l'ordinateur d'un·e ami·e, et c'est tout bon.
75
+
].
76
+
77
+
Comme pour de nombreuses autres technologies existant à la frontière entre le matériel et le logiciel, les navigateurs mettent à disposition des sites web une technologie permettant de communiquer avec les périphériques MIDI connectés à la machine: c'est l'API WebMIDI @webmidi.
78
+
79
+
Mais bien évidemment, tout le code de Shapemaker, tout ses capacités de génération de formes, sont implémentées en Rust.
80
+
81
+
Il existe cependant un moyen de "faire tourner du code Rust" dans un navigateur Web: la compilation vers WebAssembly (WASM) @wasm.
82
+
83
+
En exportant la _crate_ shapemaker en bibliothèque Javascript via wasm-bindgen @wasmbindgen, il est donc possible d'exoser à une balise #raw("<script>", lang: "html") les fonctions de la bibliothèque, et brancher donc celles-ci à des _callbacks_ donnés par l'API WebMIDI:
84
+
85
+
#figure(caption: "Exposition de fonctions à WASM depuis Rust", [
86
+
```rust
87
+
#[wasm_bindgen]
88
+
pub fn render_image(opacity: f32, color: Color) -> Result<(), JsValue> {
89
+
let mut canvas = /* ... */
90
+
91
+
*WEB_CANVAS.lock().unwrap() = canvas;
92
+
render_canvas_at(String::from("body"));
93
+
94
+
Ok(())
95
+
}
96
+
```
97
+
])
98
+
99
+
#figure(caption: "Utilisation des fonctions exposées dans un script Javascript", [
100
+
```js
101
+
import init, { render_image } from "./shapemaker.js"
102
+
103
+
void init()
104
+
105
+
navigator.requestMIDIAccess().then((midiAccess) => {
106
+
Array.from(midiAccess.inputs).forEach((input) => {
107
+
input[1].onmidimessage = (msg) => {
108
+
const [cmd, ...args] = [...msg.data]
109
+
if (cmd !== 144) return
110
+
111
+
// Touche enfoncée
112
+
const [pitch, velocity] = args
113
+
114
+
// get octave from pitch
115
+
const octave = Math.floor(pitch / 12) - 1
116
+
117
+
if (velocity === 0) {
118
+
fadeOutElement(frameElement(color))
119
+
} else {
120
+
render_image(velocity / 128, octave)
121
+
}
122
+
}
123
+
})
124
+
})
125
+
```
126
+
])
127
+
128
+
Au final, on peut arriver à une performance live interactive @pianowasmdemo intéréssante, et assez réactive pour ne pas avoir de latence (et donc de désynchronisation audio/vidéo) perceptible.
129
+
130
+
Les navigateurs Web supportant nativement le format SVG, qui se décrit notamment comme incluable directement dans le code HTML d'une page web @svginhtml, il est possible de simplement générer le code SVG, et de laisser le navigateur faire le rendu, ce qui s'avère être une solution très performante.
131
+
69
132
== Amplitudes de _stems_
70
133
71
134
== Export MIDI
+1
-1
paper/template.typ
+1
-1
paper/template.typ
···
22
22
show math.equation: set block(spacing: 0.65em)
23
23
set math.equation(numbering: "(1)")
24
24
set heading(numbering: "1.1 ")
25
-
show heading: set text(font: "Martian Mono")
25
+
// show heading: set text(font: "Martian Mono")
26
26
27
27
// Set run-in subheadings, starting at level 4.
28
28
show heading: it => {