Help us understand the problem. What is going on with this article?

PCMシンセの音源部分のブラックボックス化

More than 3 years have passed since last update.

この記事は WebAudio Web MIDI API Advent Calendar 2016 の3日目です。

目的はズバリこれ。

「音源のプログラムはさほど気にせずに楽器アプリを作れるようにしたい」

Web Audio APIは12月2日にmohayonaoさんがおっしゃている通りで「少しばかりは音楽プログラミングの知識が必要」なのです。でも、そこを何とかチャチャッと仕上げたいですよね。そこでシンセサイザーの音源部分をブラックボックス化しました。

音源部分をブラックボックス化?

シンセサイザーの音源部分とは、指定された音階を鳴らす部分を指しています。今回はアナログ音源ではなくて、一般的に販売されているシンセサイザーが採用している方式であるPCM(Pulse-code Modurationの略、簡単に具体的に言うならば、例えばWaveデータ)を使う部分をブラックボックス化しました。
よって、音源部分の内部で何が行われているか理解せずともシンセサイザーの音源を作れるようになっています。

Web的に使った技術やライブラリ

デモアプリ

では、早速デモアプリです。
Screen Shot 2016-12-01 at 5.41.49 PM.png

鍵盤をクリックすると音の出るアプリです。ピアノの音が鳴ります。とても基本的なアプリケーションです。MIDI鍵盤を接続することでリアル鍵盤からも演奏可能になっています。
ではソースを見てみてみましょう。60行程度と超短いです。これなら楽ちんです。
そしてよく見ると以下のような見慣れないタグが・・・。

html
<x-webmidirequestaccess id="x-webmidi" input output></x-webmidirequestaccess>
<x-tonegenerator id="tg" config="./voiceconfig.json"></x-tonegenerator>
<x-keys id="xkeys"></x-keys>
<x-webmidiinput id="input-port"></x-webmidiinput>

これらはPolymerのエレメントで、エレメントの中にゴニョゴニョいろいろな処理が書いてあります。が、今回は心配無用です。気にしないでください。
もし、それでもPolymerが気になる方はHTML5 Expert.JPの連載記事「基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜」を御覧ください。

ブラックボックスした音源の本体はどれ?

x-tonegenerator.html です。
大抵のPCMシンセサイザーは88鍵盤の全てを録音して再生している訳ではなく、幾つかの音(サンプル)を録音し変調させることで88鍵盤を鳴らしています。x-tonegeneratorではこの動作を提供してくれます。

音源は変えることできるの?

もちろん可能です。
簡単にご説明いたします。まずはコードはこちらからダウンロードして、解凍後にindex.htmlを御覧ください。

音源の設定

設定ファイルは以下のようにx-tonegeneratorタグ内に属性としてconfigに指定しています。

html
<x-tonegenerator id="tg" config="./voiceconfig.json"></x-tonegenerator>
  • config:設定データを書き込んだJSONのあるURLを指定

設定ファイル( voiceconfig.json

指定したほうがよい変数は以下の通り。
- path: サンプルの実ファイルを格納するディレクトリ名
- name: 音源名
- noteno: 指定した音源のノート番号 (対応表
- file: ファイル名を指定します(対応ファイルはWave[hoge.wav]のみ)
- mode: N(非ループ音源)かL(ループ音源)で指定(例えばオルガンはループ音源なのでLを指定)

サンプルの実ファイルのコピー

voiceconfig.jsonpathで指定したディレクトリにコピーしてください。

以上で出来上がりです。Webサーバに全てを配置して(ファイル取得にFetch APIを使っていますので file:// へのアクセスはクロスオリジンの制約に引っかかり正常に動作しません)、そのURLにアクセスしたら独自の音源を再生できるようになります。

ピアノっぽくない部分がある!

1音のみのサンプルを88鍵盤に変調したからそんなことが起こります。
そこで、複数のサンプルを使い音程によって使うファイルを適切に変えることでこうなります
Screen Shot 2016-12-01 at 10.34.09 PM.png

この「1つのみのサンプル利用したデモ」「5つのサンプル利用したデモ」の低い音、高い音を聞くと認識できるはずです。上図の赤丸の「+」「-」でオクターブを変えて聴き比べてみてください。

5つのサンプル利用したデモの内部

5つのサンプルを1〜5chに割当て、それぞれの音程において、適切な音量、適切なチャンネルを鳴らす、つまり高い音は高い音程のサンプルで、低い音は低い音程のサンプルで鳴らすことでよりピアノっぽく聞こえるようになります。実際の処理はこのファイルで行っています。
ご興味あればのぞいてみてください!

おまけ:利用したPolymerのエレメントの役割り

x-webmidixxx

Web MIDI APIを使い、MIDIデバイスの管理、メッセージのハンドリングを担当するエレメントです。GitHub、またBowerにx-webmidiとして登録しています。以下の一行でスクリプトのImportしています。

html
<link rel="import" href="bower_components/x-webmidi/x-webmidirequestaccess.html">

x-keys

画面のキーボードに関する動作を担当するエレメントです。クリック/タップでどの鍵盤が押下された/開放されたかを検出してメッセージとして伝えています。GitHubにx-tonegeneratorの中に、またBowerにもx-tonegeneratorとして登録しています。以下の一行でスクリプトの本体をImportしています。

html
<link rel="import" href="bower_components/x-tonegenerator/x-keys.html">

x-tonegenerator

押下された鍵盤によって音程によって作り出し発音を担当するエレメントです。GitHub、またBowerにもx-tonegeneratorとして登録しています。以下の一行でスクリプトの本体をImportしています。

html
<link rel="import" href="bower_components/x-tonegenerator/x-tonegenerator.html">

謝辞

音源部分であるx-tonegeneratorは@g200kgさんに許可を得てGMPlayerのコードを改造して作成しています。g200kgさんありがとうございました 🙂

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした