HOME ｜ Raspberry Pi ｜ ビジネス書籍紹介 ｜ 2024-11-22 (Fri) Today's Access : 169 Total : 1098249. 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 オーディオアンプ・スピーカー
2021.10.10 音声ファイルの切貼り
2022.09.16 USB-MIDI
2023.01.16 MAX98537 & PCM5102
2023.03.15 音源サンプリング
2023.06.16 ヤマハ音源IC YMZ294
2024.01.07 内蔵DACによるWAV再生
2024.03.23 Piano Hat for MIDI
2024.08.08 シンプルな16bit DAC
2024.09.09 ESP32-S3 USB MIDI
2024.10.10 NANO ESP32 USB MIDI
2024.11.10 音声変換・参照音声編集


Arduinoで学ぶ組込みシステム入門(第2版)
●Arduinoを使って組込みシステム開発を理解する
・ハードウェアやソフトウェアなどの基礎知識/ ・設計から実装までを系統的に説明するモデルベース開発/ ・Arduinoを用いた実際の開発例
最新 使える! MATLAB 第3版
◆◆すぐに「使える!」 全ページフルカラー!◆◆
・MATLAB R2022bに対応し、解説もより詳しく!/ ・コマンド・スクリプトの例が豊富で、動かして学べる!/ ・超基本から解説。これから使いはじめる人にぴったり!/ ・全編フルカラー、スクリーンショットも豊富!
Amazon Web Services基礎からのネットワーク＆サーバー構築改訂４版
1.システム構築をインフラから始めるには/ 2.ネットワークを構築する/ 3.サーバーを構築する/ 4.Webサーバーソフトをインストールする/ 5.HTTPの動きを確認する/ 6.プライベートサブネットを構築する/ 7.NATを構築する/ 8.DBを用いたブログシステムの構築/ 9.TCP/IPによる通信の仕組みを理解する
C言語は第二の母国語: 独学学生時代から企業内IT職人時代に培った、独立のための技術とノウハウ 平田豊著
学生時代から独学でプログラミングをはじめ、企業内でデバイスドライバを開発し、そして独立後もたくさんのアプリケーション開発や技術書制作に携わってきた著者。その筆者が大事に使い続ける「C言語」の“昔と今”について、気づいたことや役立つ知識、使ってきたツールなどについて、これまで記してきたことを整理してまとめました。 本書では、現役プログラマーだけでなく、これからプログラミングを学ぶ学生などにも有益な情報やノウハウを、筆者の経験を元に紹介しています。
1冊ですべて身につくJavaScript入門講座
・最初の一歩が踏み出せる！ 初心者に寄り添うやさしい解説 ・最新の技術が身につく！ 今のJavaScriptの書き方・使い方 ・絶対に知っておきたい！ アニメーションとイベントの知識 ・プログラミングの基本から実装方法まですべて学べる
図解！　Git & GitHubのツボとコツがゼッタイにわかる本
ソフトウェア開発では欠かすことのできないGit、GitHub。 これからGit、GitHubを使いたいという入門者の方でも、実際に手を動かしながら使い方を学べます。
C自作の鉄則！2023 (日経BPパソコンベストムック)
メーカー製のパソコンはスペックが中途半端で、自分が本当に欲しい機種がない――。そう思っている人には、ぜひ自作パソコンをお薦めします。自作パソコンのパーツは進化が速く、しかも驚くほど種類が豊富。価格も性能も、幅広く用意されているため、満足度100％の“自分だけの1台”を手に入れることができます。
Interface 2023年6月号
特集：第1部 フィルタ設計 基礎の基礎/ 第2部 係数アプリや波形観測アプリで合点！FIR&IIRフィルタ作り/ 第3部 配布プリント基板で体験！マイコンで動くフィルタ作り
日経Linux 2023年5月号
【特集 1】　AI時代の最強フリーソフト ～ 25のやりたいを実現！ 【特集 2】 AWS、Azureのうまみを無料で体感！面倒なことはクラウドに任せよう 【特集 3】 新しいRaspberry Pi Cameraで遊んでみよう 【特集 4】 Linuxで旧型PCを復活！ 1kg切るモバイルPCを「ChromeOS Flex」でChromebook化
ラズパイマガジン2022年秋号
特集：5大人気ボード 電子工作超入門
「半導体不足で在庫が不足し、電子工作のボードがなかなか買えない…」。そんな今にふさわしい特集を企画しました。5種の人気ボードにすべて対応した電子工作の入門特集です。「GPIO」や「I2C」を使った電子パーツの制御方法は、どのボードでも同じです。手に入れられたボードを使って、今こそ電子工作を始めましょう。
地方で稼ぐ! ITエンジニアのすすめ
学歴、理系の知識、専門スキル……全部なくてもITエンジニアになれる! 地方でも高収入でやりがいをもって働ける!ITエンジニアの魅力を一挙大公開
Raspberry Piのはじめ方2022
本書は、ラズパイやPicoの買い方やインストール、初期設定といった基本から、サーバー、電子工作、IoT、AIといったラズパイならではの活用方法まで、1冊でお届けします。 ラズパイをこれから始める方向けに、全36ページの入門マンガ「女子高生とラズベリーパイ」も巻末に掲載。これを読むだけでラズパイがどんなものなのか、すぐに分かって触れるようになります。
ハッカーの学校 IoTハッキングの教科書
生活にとけこみ、家電機器を便利にするIoT技術。 Webカメラなど、便利の裏側に潜むセキュリティの危険性をハッキングで検証。 専門家がパケットキャプチャからハードウェアハッキングまで、その攻撃と防御を徹底解説。 本書は2018年7月に刊行された「ハッカーの学校IoTハッキングの教科書」に一部修正を加えた第2版です。
攻撃手法を学んで防御せよ! 押さえておくべきIoTハッキング
本書は、経済産業省から2021年4月にリリースされた、IoTセキュリティを対象とした『機器のサイバーセキュリティ確保のためのセキュリティ検証の手引き』の『別冊2 機器メーカに向けた脅威分析及びセキュリティ検証の解説書』をもとに、IoT機器の開発者や品質保証の担当者が、攻撃者の視点に立ってセキュリティ検証を実践するための手法を、事例とともに詳細に解説しました。
ポチらせる文章術
販売サイト・ネット広告・メルマガ・ブログ・ホームページ・SNS… 全WEB媒体で効果バツグン! カリスマコピーライターが教える「見てもらう」「買ってもらう」「共感してもらう」すべてに効くネット文章術
プログラマーは世界をどう見ているのか 西村博之著
イーロン・マスク(テスラ)、ジェフ・べゾス(Amazon)、ラリー・ペイジ(Google)…etc. 世界のトップはなぜプログラマーなのか?
ニーア オートマタ PLAY ARTS改 <ヨルハ 二号 B型 DX版> PVC製 塗装済み可動フィギュア
「NieR:Automata」より、ヨルハ二号B型こと2BがPLAY ARTS改に新たに登場! 高級感の感じられるコスチュームや髪の質感、洗練されたボディバランス、細かなデティールに至るまでこだわり抜かれた逸品。 DX版には通常版のラインナップに加え2Bの随行支援ユニット ポッド042などをはじめ“純白の美しい太刀"白の約定やエフェクトパーツ、自爆モードを再現できる換装用ボディパーツ、シーンに合わせて変えられる顔パーツ2種も付属する豪華な仕様に。 作中のあらゆるシーンを再現することが可能なファン必見の一品となっている。
Newtonライト2.0 ベイズ統計
ベイズ統計は,結果から原因を推定する統計学です。AIや医療などの幅広い分野で応用されています。その基礎となるのは18世紀に考えだされた「ベイズの定理」です。 この本では,ベイズ統計学のきほんをやさしく紹介していきます。
白光(HAKKO) ダイヤル式温度制御はんだ吸取器 ハンディタイプ FR301-81

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

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

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

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

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


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