WebGL + GLSLで作ったレトロPCグラフィックス画面に、Web Audioで音源を加えることにする。 - WebGLでレトロPCグラフィックスを楽しむ(11)

公開:2016-04-13 20:21
更新:2017-11-15 21:58
カテゴリ:PCグラフィックス,javascript,webgl,html5,web audio api,glsl,WebGLでレトロPCグラフィックスを楽しむ

ちっともプリミティブの描画に移らないところが私らしいというか。 MZ-700フォントを表示してキャラグラ的なものに少し目覚め、ちょっとしたデモを行き当たりばったりに作ってみようとしている。 下は作りかけ。

これにちょっと音をつけてみたくなって、過去に作った音源コードを引っ張り出してきた。とりあえずはこれで音を鳴らせなくはないけど、もうちょっと汎用性を持たせたいなぁと前から思っていて、特にMMLもどきのような変なデータフォーマットは何とかしたいなと考えていた。やっぱりちゃんとしたMMLで書きたいなぁと。でもパーサーを書くのが面倒だなぁと思っていたところ、ちょうどよいライブラリを発見。

https://github.com/mohayonao/mml-emitter/blob/master/README.md

これをそのまま使おうかなと思ったけど、音色定義とか波形の切り替えとかをMMLから行いたいし、ちょっと機能的に私が作ったコードと重複する部分がある。たとえゴミであっても自分の書いたコードに愛着のある私はパーサー部分だけを使わせていただいて、シーケンサー部分は自作のものを改造して使うことにした。早速作業に取り掛かっている。

音源は波形メモリ音源で、デフォルトのデータは4ビットPCM波形をベースにしている。SCCとかナムコSSGとかそのあたりの雰囲気を漂わすことにする。ドラムとかは4ビットPCMのサンプリング音源でやろうかなとか思っている。16ポリで8トラックマルチティンバーくらいにしようかなぁと思っている。

でもこのmml-emitter、よくできているんだよねぇ。これを合う音源もいずれ作ってみたいなぁ。。

デモページへのリンク:

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/dev/graphics/devver/20160413/css/sfstyle.css

/dev/graphics/devver/20160413/index.html

/dev/graphics/devver/20160413/js/bundle.js

/dev/graphics/devver/20160413/test.html