Tune

  • E4
  • B3
  • G3
  • D3
  • A2
  • E2

1 | | | 2 | | | 3 | | | 4 | | | 1 | | | 2 | | | 3 | | | 4 | | |

xxxxx0xxxxxxxxxxx7xxxxxxxxxx5xxxxxxxxxxx7xxxxxxxxxx5xxxxxxxxxxxxxxxxxx7xxxxxxxxxxxxxxxxx5xxxxx6xxxxx7xxxxxxxxxx5xxxxx6xxxxxx7xxxxxxxxxx5xxxxx6xxxxxx7xxxxxxxxxxxxxxxxxx7xxxxxxxxxxxxxxxxx5xxxxx3

MyTab.js

このページって何?

MyTab.jsはWeb上でタブ譜を書いて音を出すためのサイトです。

また、それを実現するためのJavascriptファイルもmytab.jsという名前です。

タブ譜って何?

タブ譜はギター、ベースなどの楽譜に使われることのある表記法です。

特徴的なのは縦の軸で、例えば6行目に「3」とあった場合、6弦の3フレットを押さえて音を出すことを表します。

横の軸は通常の楽譜と同様、時間にそって配置されます。

どうやって音を出すの?

Web表示ではタブ譜(数字が並んでいるところ)の上、モバイル表示では画面最上部に「Start」と書かれたボタンがあると思います。

そのボタンをクリックすると、タブ譜部分の文字列に応じた音が出ます。

編集の仕方は?

タブ譜が表示されている部分をクリックするとテキストとして編集できます。

「縦書き」であり「左から右」への文字の流れであることにご注意ください。

(iPhone等では横書き・右から左)

特殊な記法として、「a」が「10フレット」、「b」が「11フレット」…というふうにf(15フレット)まで対応しています。

(16フレット以降には対応していません。すいません。)

音を出したくないところには任意の一文字(「x」がいいと思います)を入れてください。

現状、2小節ぶんのスペースを用意しており、3小節目を書こうとしてもできなくなっています。

上部にある「BPM」の数値を入力することで、テンポを変えることができます。

また、「Tune」と書かれた下の文字列(「E2」など)をクリックすることでチューニングを変えることができます。

音名+数字という表記法で、対応していない文字列を入れられた場合はレギュラーチューニングの値が入ります。

mytab.jsの仕様を知りたい

ファイルはこちらにあります。

「#editer」というID(Editorのタイポ)がついたエレメントのテキスト(value、値ではないです)を参照してTone.jsに渡します。

その際、「#tuner」というIDがついたエレメントの中にある「li」タグのテキストを見て、チューニングを反映します。

テンポは「#BPM」というIDがついたエレメントのを参照します。

それらすべての処理を、「#startBtn」というIDがついたエレメントがクリックされた時点で行います。

使用したライブラリは?

  • まず、Tone.jsです。ブラウザ上で音声を操作するWeb Audio APIを使いやすくしたライブラリです。
  • そしてjQuery。ボタンの処理やテキスト抜き出しの処理などに使用しました。
  • CSSを書く際、YUIでCSSをリセットしました。
  • タブ譜部分のフォントにRobotoのMonospaceバージョンを使用しました。
  • 本文のフォントにNoto Sans Japaneseを使用しました。
  • 背景グラデーションの作成にUltimate CSS Gradient Generatorを使用しました。

例をください

下のボタンをクリックするとエディタの中身が書き換わります。その後、スタートボタンを押してください。

なぜ作った?

たてよこWebアワードに参加するために作りました。

縦書きでできることってなんだろう? タブ譜書けばいいんじゃね?(ピン! って感じです。

利点として、テキストが時系列に並ぶので直感的だと思います。

連絡先等を教えて

mi.ki.ri.hassha.p@gmail.com