第1回 abcjs 楽譜作成・演奏スクリプト
■楽譜の生成 basic.html
をダウンロードしましょう。basic.html をエディタで開いてみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<title>abcjs: Basic Demo</title>
<script src="../bin/abcjs_basic_5.12.0-min.js" type="text/javascript"></script>
<script type="text/javascript">
var abc = "T: Cooley's\n" +
"M: 4/4\n" +
"L: 1/8\n" +
"R: reel\n" +
"K: Emin\n" +
"|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" +
"EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" +
"|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" +
"eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|";
function load() {
ABCJS.renderAbc("paper", abc);
}
</script>
</head>
<body onload="load()">
<div id="paper"></div>
</body>
</html>
var abcの中身が、ABC記譜になります。abcjs_basic_5.12.0-min.js
をダウンロードして、下記のように配置します。
<documentRoot>
+-- basic.html
+-- <abcjs>
+-- <js>
+-- abcjs_basic_5.12.0-min.js
basic.html の以下の部分を書き換えます。
■楽譜の演奏 basic-midi.html
をダウンロードしましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<title>abcjs: Basic Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../abcjs-midi.css">
<script src="../bin/abcjs_midi_5.12.0-min.js" type="text/javascript"></script>
<script type="text/javascript">
var abc = "T: Cooley's\n" +
"M: 4/4\n" +
"L: 1/8\n" +
"R: reel\n" +
"K: Emin\n" +
"|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" +
"EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" +
"|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" +
"eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|";
function load() {
ABCJS.renderAbc("paper", abc);
ABCJS.renderMidi("midi", abc);
ABCJS.renderMidi("midi-download", abc, { generateDownload: true, generateInline: false });
}
</script>
</head>
<body onload="load()">
<div id="paper"></div>
<div id="midi"></div>
<div id="midi-download"></div>
</body>
font-awesome.min.css をダウンロードabcjs-midi.css をダウンロードabcjs_midi_5.12.0-min.js をダウンロードfontawesome-webfont.eot ?v=4.7.0');fontawesome-webfont.woff2 ?v=4.7.0') format('woff2'),fontawesome-webfont.woff ?v=4.7.0') format('woff'),fontawesome-webfont.ttf ?v=4.7.0') format('truetype'),fontawesome-webfont.svg ?v=4.7.0#fontawesomeregular') format('svg');
<documentRoot>
+-- basic-midi.html
+-- <abcjs>
+-- <js>
| +-- abcjs_midi_5.12.0-min.js
| +-- abcjs-midi.css
+-- <font-awesome_4.7.0>
+-- font-awesome.min.css
+-- fontawesome-webfont.eot
+-- fontawesome-webfont.svg
+-- fontawesome-webfont.ttf
+-- fontawesome-webfont.woff
+-- fontawesome-webfont.woff2
basic-midi.html 内のリンクを書き換えます。
Midiオプション ■音源を変える Soundfonts Available をみるとABCJS.midi.setSoundFont("http://gleitz.github.io/midi-js-soundfonts/MusyngKite/"); ■参考文献 https://github.com/paulrosen/abcjs http://abcnotation.com/wiki/abc:standard:v2.2 http://www.ne.jp/asahi/music/marinkyo/ml/abc-regulo.html.ja http://marinkyo.asablo.jp/blog/cat/abcjs/?offset=10 https://moepic.com/avg/sound.php http://www.webclap-dandy.com/?category=Music&id=3 http://www.asahi-net.or.jp/~mf4n-nmr/abc_notation.html
たいていのことは100日あれば、うまくいく。長田英知著
まんがで納得ナポレオン・ヒル 思考は現実化する
今日は人生最悪で最高の日 １秒で世界を変えるたったひとつの方法 ひすいこたろう著
ご飯は私を裏切らない heisoku著
【最新版Gemini 3に対応！】できるGemini (できるシリーズ)
Rustプログラミング完全ガイド 他言語との比較で違いが分かる!
ポチらせる文章術
小型で便利な Type-C アダプター USB C オス - USB3.1 オスアダプター
Divoom Ditoo Pro ワイヤレススピーカー
電源供給USBケーブル スリム 【5本セット】
Raspberry Pi（ラズベリー パイ）は、ARMプロセッサを搭載したシングルボードコンピュータ。イギリスのラズベリーパイ財団によって開発されている。
