Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
34
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@KenjiOtsuka

Web上で楽譜を扱うライブラリたち

Web上で楽譜を表示できるライブラリたちはたくさんあります。 仕事上、そういうものたちとかかわる機会がありましたので、ここで一度まとめたいと思い記事を書きました。 (全てを使ってみたというわけではないです、悪しからず。) 2018-04 時点 の情報です。

alphaTab

表示の上では最高にいいと思います。 パートが複数ある場合でも表示可能です。 進捗に合わせてバーを動かすことができます。

ただし、一般的な楽譜形式 Music XML をサポートしていないのが難点です。 GitHub では開発中みたいです。

対応している形式は次の3パターンです。

Guitar Pro 3-5 (gp3,gp4,gp5) – Those files are widely available in the internet. They are created using earlier versions of Guitar Pro (version 3 to 5).
Guitar Pro 6 (gpx) – This is the newest file format created by Arobas, the creators of Guitar Pro.
AlphaTex – AlphaTex is a text based format for writing music notation. It was created for alphaTab to allow people easy writing and storing of music notation.

Guitar Pro は有料ソフトウェアです。

これに関連したプロジェクトとして、 alphaSynth などがあります。

VexFlow

ギターのタブ符も扱えます。

バーを動かすのではなく、音符を動かすサンプルがありました。

MusicXML などの形式で読み込むというより、 音を記述すると表示してくれるというライブラリです。

OpenSheetMusicDisplay

こちらは VexFlow を用いて Music XML を表示するライブラリです。 なので、楽譜作成ソフトで作成した楽譜ファイルをそのまま表示することができます。

複数パートでも表示可能です。

Verovio

こいつはすさまじいです。 オンラインで楽譜編集までできます。

MusicXML そのものは扱えませんが、 コンバートして使うことができるみたいです。

スポンサーたくさんですね。 お金かかっています。

C++ で作られています。 ライセンスは LGPL。

abcjs

その昔私が楽譜の書ける掲示板を作ったときに使っていたものです。 ABC記法で書かれた楽譜を表示できます。

一般的に 音楽家の間でABC記法は使われていないみたいです。

abcweb

MusicXML 及び ABC記法 の楽譜を表示できるライブラリ。

scorejs

javascript で楽譜を表示できるものです。

Neon.js

ネウマ符などの楽譜編集・表示に使えるライブラリ。
これまで紹介したライブラリとは表示対象が異なります。楽譜ではあるのですが。

GUIDO

使うにはちょっと心配なところがありますが、 Javascript で楽譜の書けるライブラリです。

ngx-score (停止中)

現在停止しているプロジェクトです。
楽譜表示ができます。

さいごに

目的に応じてなにを使うかですが、一般の5線譜を使うなら alphaTab, Verovio がいいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
34
Help us understand the problem. What is going on with this article?