HOME | Raspberry Pi | ビジネス書籍紹介 | 2021-09-19 (Sun) Today's Access : 126 Total : 354120. Since 10 Sep. 2019

第1回 abcjs 楽譜作成・演奏スクリプト
2020.01.05

YouTube 動画でポイントを説明しています。上記画像をクリックすると再生できます。

ABC記譜法で記述されたテキストをHTMLページ内に楽譜として表示させるスクリプトに、abcjs があります。 今回はこのスクリプトの設定と使い方を紹介します。
なお、実行にはWEBサーバーが必要ですので、Raspberry Pi 3 Model B+ 自宅WEBサーバ構築を参考にしてください。

■楽譜の生成

まず、最初に楽譜表示用サンプルファイル 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記譜になります。
ABC表記法は関しては文末の参考文献をご覧ください。

スクリプトのリンクをみてみます。
<script src="../bin/abcjs_basic_5.12.0-min.js" ...

abcjs_basic_5.12.0-min.js をダウンロードして、下記のように配置します。
<documentRoot>
  +-- basic.html
  +-- <abcjs>
       +-- <js>
            +-- abcjs_basic_5.12.0-min.js
basic.html の以下の部分を書き換えます。
<script src="./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>

スクリプトのリンクをみてみます。
<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" ...

font-awesome.min.css をダウンロード
abcjs-midi.css をダウンロード
abcjs_midi_5.12.0-min.js をダウンロード

さらに、font-awesome.min.css ファイル最初の部分に下記の記載があるので、これらのファイルもダウンロードします。
src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/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 内のリンクを書き換えます。
<link rel="stylesheet" type="text/css" href="./abcjs/font-awesome_4.7.0/font-awesome.min.css"
<link rel="stylesheet" type="text/css" href="./abcjs/js/abcjs-midi.css"
<script src="./abcjs/js/abcjs_midi_5.12.0-min.js"

font-awesome.min.css 内のリンクを書き換えます。
src:url('./fontawesome-webfont.eot?v=4.7.0'" ...
src:url('./fontawesome-webfont.eot?#iefix&v=4.7.0' ...
url('./fontawesome-webfont.woff2" ...
url('./fontawesome-webfont.woff" ...
url('./fontawesome-webfont.ttf" ...
url('./fontawesome-webfont.svg" ...

ブラウザから、basic-midi.html を呼び出すと下記のような結果になります。
※サンプルの楽譜データは長いので、ショパンのノクターンに変更しています。

Midiオプション
サンプルのオプション指定ですが、かなり紛らわしいです。
ABCJS.renderMidi("midi-download", abc, { generateDownload: false, generateInline: false });
generateDownload、generateInline は通常必要ありませんので、無指定がよいと思います。
ショパンのノクターンでは下記の指定をしています。
ABCJS.renderMidi("midi-download", abc, {qpm:96}, {staffwidth:"420"});
qpm(Default:180) はテンポです。ABC譜の「Q:」に指定したくない場合、このパラメタで制御できます。
staffwidth は、演奏進捗バー幅の指定です。

Ref.http://fuhton.com/react-abc/src/defaults/#midi-params
generateDownload (Default:false) Whether to generate a download MIDI link.
generateInline | (Default:true) Whether to generate the inline MIDI controls.
Ref.https://github.com/paulrosen/abcjs/blob/master/docs/visual/visual-params.md

■音源を変える

デフォルトのサウンドフォントは http://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/ です。 作者はサウンドフォントを変える必要はないといっているみたいなので、変更に関してはほとんど文献がみつかりません。
ただ、Soundfonts Availableをみると
http://gleitz.github.io/midi-js-soundfonts/MusyngKite/
への変更は可能です。変更する場合は
ABCJS.midi.setSoundFont("http://gleitz.github.io/midi-js-soundfonts/MusyngKite/");
を追記してください。サウンドフォントファイルの末尾にスラッシュが必要です。
指定しない場合、コンポーネントはhttps://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/ エンドポイントとして使用します。

soundFontUrl: "This is the public URL for the sound font files.
By default, the sound fonts are here: https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/ and you probably won't need to modify this,
but if you want to host them on your own server, or you want different sounding instruments, you can override it here.
\n\nImportant! This is only used before the first call to the audio is made, so set this before you start playing a tune!
Ref.https://github.com/paulrosen/abcjs-configurator/blob/master/pages/audio.vue

■参考文献

paulrosen/abcjs - javascript for rendering abc music notation
https://github.com/paulrosen/abcjs

The abc music standard 2.1 (Dec 2011)
http://abcnotation.com/wiki/abc:standard:v2.2

abc 記譜法
http://www.ne.jp/asahi/music/marinkyo/ml/abc-regulo.html.ja

まりんきょの音楽室
http://marinkyo.asablo.jp/blog/cat/abcjs/?offset=10

MoE-ABC
https://moepic.com/avg/sound.php

HTMLページ内に楽譜を表示させる「abcjs」の使い方研究
http://www.webclap-dandy.com/?category=Music&id=3

実用abc譜
http://www.asahi-net.or.jp/~mf4n-nmr/abc_notation.html
 Raspberry Pi(ラズベリー パイ)は、ARMプロセッサを搭載したシングルボードコンピュータ。イギリスのラズベリーパイ財団によって開発されている。
2020.01.05 第1回 abcjs 楽譜作成・演奏スクリプト
2020.01.09 I2S通信によるハイレゾ音源再生
2020.01.18 MIDI再生:FM音源YMF825+Arduino編
2020.01.24 FM音源YMF825+micro:bit編
2020.02.13 Piano Hat & Rosegarden
2020.03.18 テキスト読み上げ gTTS
2020.05.19 テキスト読み上げ AquesTalk pico LSI
2020.06.22 波形処理 第1回 音の波と三角関数
2020.07.22 波形処理 第2回 平均律と純正律
2020.08.26 波形処理 第3回 黒鍵と白鍵
2020.11.21 深層学習 第1回環境整備
2020.12.19 深層学習 第2回マルコフ連鎖・自動歌詞生成
2021.01.02 深層学習 第3回コード進行解析
2021.01.16 波形処理 第4回 コード演奏
2021.08.07 MIDI制御/Adafruit Music Maker
2021.08.23 MIDIフォーマット解析
2021.08.24 オーディオアンプ・スピーカー


ニーア オートマタ PLAY ARTS改 <ヨルハ 二号 B型 DX版> PVC製 塗装済み可動フィギュア
「NieR:Automata」より、ヨルハ二号B型こと2BがPLAY ARTS改に新たに登場! 高級感の感じられるコスチュームや髪の質感、洗練されたボディバランス、細かなデティールに至るまでこだわり抜かれた逸品。 DX版には通常版のラインナップに加え2Bの随行支援ユニット ポッド042などをはじめ“純白の美しい太刀"白の約定やエフェクトパーツ、自爆モードを再現できる換装用ボディパーツ、シーンに合わせて変えられる顔パーツ2種も付属する豪華な仕様に。 作中のあらゆるシーンを再現することが可能なファン必見の一品となっている。

DIPスイッチで動作電圧を3.3Vと5Vに切り替えられるUNO互換ボード
KEYESTUDIO Plus Board for Arduino UNO R3 with Type-C USB Cable, 3.3V 5V 1.5A Output Current, More Powerful Controller Board USB-シリアルチップ:CP2102 / 動作電圧:5Vまたは3.3V(DIPスイッチ制御)/ 外部電源:DC 6-15V(9V推奨)/ デジタルI / Oピン:14(D0〜D13)/ PWMチャネル:6(D3 D5 D6 D9 D10 D11)/ アナログ入力チャネル(ADC):8(A0-A7)/ DC出力機能の各I / Oポート:20 mA / 3.3Vポートの出力能力:50 mA / フラッシュメモリ:32 KB(うち0.5 KBはブートローダーによって使用されます)/ SRAM:2 KB(ATMEGA328P-AU)/ EEPROM:1 KB(ATMEGA328P-AU)/ クロック速度:16MHz / オンボードLEDピン:D13

エレクトロクッキー Leonardo R3 ATmega32u4 ボード DIY Arduino工作用 - ピンクエディション


Newtonライト2.0 ベイズ統計
ベイズ統計は,結果から原因を推定する統計学です。AIや医療などの幅広い分野で応用されています。その基礎となるのは18世紀に考えだされた「ベイズの定理」です。 この本では,ベイズ統計学のきほんをやさしく紹介していきます。

Interface 2021年10月号
☆特集:~ 格好良さアップ! 機能&信頼性アップ ! ~「 3Dプリンタ & メカ設計入門 」
☆特集2:Pico達人への道…「 C/C++でMicroPython拡張 」


トランジスタ技術 2021年9月号
☆特集:~ 直流・交流・非接触・センサ微小電流の測定ノウハウ ~「電流を正しく測る技術」

トランジスタ技術スペシャル 2021年7月号 宇宙ロケット開発入門
これから開発・活用が進むと期待されている宇宙空間への交通・物流インフラとして、小型・低価格ロケットが注目を集めています。本書では、基本構造から制御メカニズムまで、小型宇宙ロケット開発の基礎知識を実例を交えて解説します。

日経Linux 2021年9月号
【特集1】おうち時間をLinuxデスクトップで楽しむ! Linux環境を作るワザ
【特集2】徹底図解で丸わかり! 「WSL2」入門   Windows 11の新機能を速報!
【特集3】IT自動化ツール AnsibleでWeb導入を自動化
【特集4】ラズパイで楽しむLinuxライフ 「今、会議中」と家族に伝えるプレートをPythonで作ろう


ラズパイマガジン2021年秋号
特集1 サクッと動くパーツ&ライブラリ総覧
特集2 ArduinoライブラリでラズパイPicoを動かす
特集3 古いラズパイをフル活用! Node-REDで 楽しい電子工作
特集4 空気の汚れをラズパイで検知しよう
特集5 ラズパイで楽しむLinuxライフ
特集6 NVIDIAのAIボードが6000円台に!
特集7 M5StickCで始める電子工作 iPhoneからサーボモーターを制御しよう


トランジスタ技術スペシャル 2021年 4月号 No.154「達人への道 電子回路のツボ」
初学者が実用的な電子回路を設計できるようになるためのポイントをまとめました。学校の教科書だけではつかめない基本電子回路やOPアンプ/トランジスタの使い方の実際を、いろいろな視点から解説しています。


Raspberry Pi 3 Model B V1.2 (日本製) 国内正規代理店品
【仕様概要】CPU:ARM 1.2GHz 4コア、GPU:2コア 3D・動画支援、RAM:1GB、ネットワーク:LAN/Wi-Fi/Bluetooth、インターフェース:USB/HDMI/オーディオ/GPIO(UART/I2C/I2S/SPI...)。

ELEGOO Arduino用 Nanoボード V3.0 CH340/ATmega328P、Nano V3.0互換 (3)


ESPr Developer 32
スイッチサイエンス(Switch Science)

協和ハーモネット UL1007 AWG24 耐熱ビニル絶縁電線 リール巻 100m 黒


白光(HAKKO) ダイヤル式温度制御はんだ吸取器 ハンディタイプ FR301-81


サンハヤト TTW-203 テストワイヤ
ブレッドボードとスルーホール間の接続に便利なワイヤですブレッドボード用のオスピンと基板のスルーホール用のバネ性のある端子を組み合わせたテストワイヤです

無水エタノールP 500mlx2個パック(掃除)


ケイバ(KEIBA) マイクロニッパー MN-A04


熱収縮チューブφ1.5
印字無しで綺麗☆ シュリンクチューブ 絶縁チューブ 防水 高難燃性 収縮チューブ (2m, ブラック(黒))


サンハヤト SAD-101 ニューブレッドボード


白光(HAKKO) HEXSOL 巻はんだ 精密プリント基板用 150g FS402-02


【Amazon.co.jp限定】エーモン 電工ペンチ 全長約255mm (1452)


[Amazon限定ブランド]【指定第2類医薬品】PHARMA CHOICE 解熱鎮痛薬 解熱鎮痛錠IP 100錠


Copyright © 2011-2022 Sarako Tsukiyono All rights reserved®.