Mencetak notasi musik dengan CSS Grid

(cruncher.ch)

11 poin oleh GN⁺ 2024-05-01 | 2 komentar | Bagikan ke WhatsApp

Bagi musisi yang bermain sambil memperbesar PDF A4 di layar ponsel kecil, dibutuhkan rendering notasi musik yang luwes dan responsif di web

Prototipe Scribe

Sebelumnya dibuat prototipe renderer musik bernama Scribe yang menghasilkan SVG dari JSON
Tujuan awalnya adalah membuat renderer musik yang responsif, tetapi kemajuannya sulit karena harus menulis mesin layout multi-pass yang kompleks
Setelah CSS Grid diperkenalkan ke proyek, terlihat bahwa ini bisa menjadi jawaban untuk masalah layout yang ditangani Scribe

Kelas `.stave`

Paranada mirip dengan grid. Sumbu vertikal adalah tinggi nada, sumbu horizontal adalah waktu
Di kelas .stave, baris grid yang merupakan sumbu vertikal didefinisikan
Membuat baris grid berukuran tetap dengan nama tinggi nada standar dan menggunakan gambar latar untuk menggambar paranada

Contoh peta baris untuk paranada kunci treble:

.stave {  
  display: grid;  
  row-gap: 0;  
  grid-template-rows:   
    [A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em  
    [D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em  
    [G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em  
    [C4] 0.25em ;  
  background-image: url('/path/to/stave.svg');  
  background-repeat: no-repeat;  
  background-size: 100% 2.25em;  
  background-position: 0 50%;  
}

Setiap garis dan spasi paranada memiliki garis grid dengan nama tinggi nada

Menempatkan tinggi nada pada paranada

Di setiap baris paranada, beberapa tinggi nada dapat ditempatkan
Agar elemen DOM berada di baris yang benar, nama tinggi nada dimasukkan ke atribut data-pitch lalu nilai data-pitch dipetakan ke baris paranada dengan CSS
```
.stave > [data-pitch^="G"][data-pitch$="4"] { grid-row-start: G4; }  
```
Aturan ini menangkap tinggi nada yang diawali dengan 'G' dan diakhiri dengan '4', lalu menempatkan G♭4, G4, G♯4, dan sebagainya ke baris G4
Ini perlu dilakukan untuk semua baris paranada
Kini beberapa simbol dapat ditempatkan pada paranada

Kelas `.bar` dan ketukan

Menangani ritme sedikit lebih rumit
Tidak ada pembagian ritme minimum yang jelas yang mendukung semua jenis ritme
Pendekatan 24 kolom per ketukan adalah titik awal yang baik karena dapat menempatkan not seperdelapan, seperenambelas, seper tigapuluh dua, dan triol secara merata

Mendefinisikan 4 ketukan sebagai 4 × 24 = 96 kolom grid dan menambahkan kolom di awal serta akhir:

.bar {  
  column-gap: 0.03125em;  
  grid-template-columns:  
    [bar-begin]  
    max-content  
    repeat(96, minmax(max-content, auto))  
    max-content  
    [bar-end];  
}

Menambahkan garis birama dengan ::before dan ::after, lalu menempatkan tanda kunci di tengah dengan data-pitch="B4"

Menempatkan simbol pada ketukan

Kali ini atribut data-beat digunakan untuk menetapkan ketukan ke elemen, lalu aturan CSS dipakai untuk memetakan ketukan ke kolom grid
Peta CSS terdiri dari satu aturan untuk setiap 1/24 ketukan
Dengan menggunakan selektor atribut awal ^=, aturan ini menjadi toleran terhadap galat
Bila digunakan bersama kelas .stave, simbol dapat ditempatkan berdasarkan ketukan dan tinggi nada dengan mengatur data-beat ke nilai antara 1 hingga 5 dan data-pitch ke nama nada

Notasi musik yang luwes dan responsif

Dengan menaruh beberapa birama seperti ini ke dalam kontainer flexbox, kita bisa mendapatkan notasi musik responsif
Masih banyak yang belum ada, tetapi ini adalah fondasi yang baik untuk memulai
Pemenggalan barisnya sudah jauh lebih elegan dibanding renderer musik online yang ada

Jarak antar not

Kepala not yang terjadi pada waktu yang lebih berdekatan dirender sedikit lebih rapat
Ini adalah efek halus dan disengaja yang dihasilkan oleh column-gap kecil, semacam 'eter' waktu tempat elemen simbol masuk ke slot
Kolom itu sendiri akan memiliki lebar 0 jika tidak ada kepala not, tetapi antara peristiwa yang jarak ketukannya lebih jauh ada lebih banyak celah antarkolom (24 per ketukan), sehingga tercipta jarak yang lebih besar
Spasi yang konsisten dapat dikendalikan dengan menyesuaikan margin simbol

Tanda kunci dan tanda birama

Alasan memakai kelas terpisah untuk jarak vertikal dan horizontal adalah agar salah satunya bisa diganti tanpa menyentuh yang lain
Untuk menampilkan melodi yang sama dalam kunci bass, cukup ganti kelas .stave dengan kelas bass-stave yang memetakan atribut data-pitch yang sama ke baris paranada bass
Dengan memetakan data-duration="5" lewat CSS ke 120 kolom template grid milik .bar, tanda birama 5/4 dapat diberikan pada paranada yang sama

Akor dan lirik

Dengan CSS Grid, simbol lain juga dapat disejajarkan di dalam grid notasi musik
Akor, lirik, dinamika, dan lain-lain dapat disejajarkan serta diperluas mengikuti event yang memiliki penandaan waktu

Ekor not

Ekor not, akor, dan beberapa tanda diam panjang dibuat membentang melintasi kolom dengan memetakan atribut data-duration ke nilai rentang grid-column-end

Pengubahan ukuran

Seluruh sistem diberi ukuran dalam satuan em, jadi ukurannya dapat diubah hanya dengan mengganti font-size

Batasan Flex dan Grid

Ini bukan sistem yang sempurna. Batasannya:
1. CSS tidak dapat secara otomatis menempatkan tanda kunci/tanda mula baru saat terjadi pemenggalan baris
2. Tidak dapat menghubungkan garis beam ke not baru di baris berikutnya
3. Ekor not yang miring sulit disejajarkan karena posisi tepatnya baru diketahui setelah Grid menempatkannya
Untuk benar-benar menyelesaikannya, dibutuhkan sedikit JavaScript pembersih, tetapi karena CSS menangani sebagian besar pekerjaan layout, pekerjaan layout yang harus dilakukan di JavaScript menjadi jauh lebih sedikit

Elemen kustom

Sebuah interpreter ditulis di sekitar sistem CSS baru ini dan dibungkus dalam sebuah elemen
Meski belum siap produksi, sistem ini menarik dan berguna karena sudah bisa merender lead sheet responsif dan menuliskan notasi drum
Notasi musik dirender dari data konten, file yang diambil lewat atribut src, atau objek JS yang diatur pada properti .data milik elemen
Build pengembangan saat ini bisa dicoba dengan mengimpor file ke halaman web

Rencana ke depan

Selain peningkatan di Scribe 0.3, fitur yang ingin diteliti dalam jangka panjang:
- Dukungan font SMuFL - mengganti font yang digunakan untuk simbol notasi musik
- Dukungan sequence bertingkat - mengaktifkan lagu multi-part
- Rendering paranada terbelah - menempatkan beberapa part pada satu paranada
- Rendering multi-paranada - menempatkan beberapa part pada beberapa paranada yang sejajar

Pendapat GN⁺

Merender notasi musik yang luwes dan responsif di web tampaknya akan sangat berguna bagi musisi maupun penggemar musik. Ini bisa menghilangkan ketidaknyamanan melihat partitur PDF sambil zoom in/out di layar kecil
Pendekatan yang memanfaatkan layout Grid dan Flex milik CSS terasa menarik. Ini adalah contoh bagus yang menunjukkan bahwa cukup banyak hal bisa diselesaikan hanya dengan CSS tanpa mesin layout yang kompleks
Namun, karena sifat notasi musik, ada bagian-bagian yang tetap memiliki keterbatasan bila hanya mengandalkan CSS. Untuk hal-hal yang perlu memahami konteks musikal, seperti menempatkan tanda kunci/tanda mula secara otomatis saat pemenggalan baris atau menghubungkan beam secara otomatis, bantuan JavaScript tetap dibutuhkan
Karena sudah cukup banyak yang diimplementasikan, seperti rendering lead sheet dan dukungan notasi drum, tampaknya ini bisa segera ditingkatkan menjadi cukup layak pakai. Jika di-open-source-kan dan pengembangannya berlanjut, ini bisa menjadi alternatif yang baik untuk editor notasi musik yang sudah ada seperti MuseScore
Jika fitur yang direncanakan seperti dukungan font SMuFL, dukungan multi-part, dan rendering multi-paranada terwujud, kualitas representasi notasi musik akan meningkat secara signifikan. Ini proyek yang patut dinantikan

2 komentar

roxie 2024-05-06

Pasti ada alasan Anda melakukan ini, kan

GN⁺ 2024-05-01

Opini Hacker News

Ada pujian dari seorang pengembang perangkat lunak sheet music terhadap cara merender notasi musik menggunakan CSS Grid
- Ia telah mengembangkan layanan rendering notasi musik berbasis web bernama Soundslice selama lebih dari 10 tahun, dan pada 2014 menerapkan rendering notasi musik web "responsif" untuk pertama kalinya
- Untuk detail teknis terkait, lihat tautan video presentasi: https://www.youtube.com/watch?v=XH5EtQge_Bg
- Tautan contoh notasi musik responsif dari Soundslice: https://www.soundslice.com/slices/zzNlc/
- Menyediakan berbagai alat seperti editor berbasis web, fitur latihan, serta fitur pemindaian yang mengekstrak data notasi musik dari foto/PDF
- Pendekatan CSS Grid mungkin berguna untuk proyek ringan, tetapi kemungkinan akan sulit untuk sepenuhnya mengimplementasikan ekspresi penuh partitur lengkap yang kompleks dan halus
Mungkin bagus juga jika mengusulkannya ke komunitas CSS agar bisa diimplementasikan hanya dengan CSS tanpa JavaScript
- Misalnya, tampilan ulang clef saat ganti baris mirip dengan sticky table header, dan bisa berguna juga di luar notasi musik
Sintaks attribute selector CSS([...]) terasa mengesankan. Contoh: .stave > [data-pitch^="A"][data-pitch$="5"] { grid-row-start: A5; }
Dari sudut pandang pengukir notasi musik, tampaknya masih perlu banyak perbaikan secara visual. Akan sulit karena CSS saja punya keterbatasan dalam presisi
- Ada masalah dalam menampilkan stem, slur, dan tie
- Sebagian besar notasi musik di browser menggunakan rendering vektor dengan SVG atau Canvas untuk mencapai presisi yang sangat akurat
- Selain CSS, sudah ada alat lain yang mewujudkan notasi musik yang scalable di browser seperti Soundslice dan Sibelius Cloud Publishing
Awalnya terasa bahwa menampilkan notasi musik dengan CSS tidak akan terlalu berhasil, tetapi kualitas tipografinya mengesankan dengan pendekatan yang sederhana. Pujian untuk penulisnya
- Namun ada kekhawatiran apakah ini akan bekerja baik untuk kasus khusus seperti chord, jarak not seperdelapan/seperenambelas, dan penyelarasan antarpart. Lilypond sudah terbukti fleksibel dalam ekspresi kompleks seperti ini
CSS Grid menarik. Dulu pernah mengimplementasikan desainer furnitur dengan memanfaatkan CSS Grid lewat pure frontend JS: https://alnvdl.github.io/2023/01/07/designing-furniture-using-the-css-grid.html
Elemen kustom <scribe-music> juga menjanjikan
- Beberapa tahun lalu seorang intern pernah mengerjakan proyek yang membungkus VexFlow sebagai web component, tetapi tidak dirawat: https://github.com/PolymerLabs/vexflow-elements/blob/web-components/demo/index.html
- Library yang terawat baik dan mudah digunakan akan sangat membantu notasi musik di web
Bagus ada alternatif untuk Lilypond(lilypond.org), tetapi notasinya sangat kompleks sehingga keunggulan kesederhanaannya kemungkinan tidak akan bertahan lama
- Jika Anda penggemar Asciidoc, Lilypond mudah diintegrasikan ke toolchain Asciidoc. Digunakan dalam pipeline PDF DocBook, dan hasil keluarannya cukup bagus. Mirip TeX
Ini mengingatkan pada https://www.musicxml.com dan https://opensheetmusicdisplay.org. Biayanya jauh lebih besar, tetapi merupakan solusi yang lengkap
Penasaran apakah fitur notasi musik Impro-Visor(https://github.com/Impro-Visor/Impro-Visor) yang seadanya bisa digantikan dengan ini
Rasanya seperti benchmark CSS