WebGL + GLSLで作ったグラフィックス画面に、Web Audioで作成した波形メモリ風音源を加えた。 - WebGLでレトロPCグラフィックスを楽しむ(12)

公開:2016-04-17 11:56
更新:2020-02-15 04:37
カテゴリ:PCグラフィックス,web audio api,javascript,webgl,html5,glsl,WebGLでレトロPCグラフィックスを楽しむ

少し時間がかかったが、音源を加えることができた。まだとりあえずのバージョンで、ドラム音はまだ鳴らない。

mmlのパーサーはmml-iterator中にあるMMLParserを使わせていただいた。

https://github.com/mohayonao/mml-iterator

mmlの演奏データはmml-emitterのデモのものを使わせていただいた。

https://github.com/mohayonao/mml-emitter

以前私が作っていたコードは結構不具合だらけで、そこを修正するのに時間がかかってしまった。音源はAudioBufferSourceNodeを使って鳴らしている。OsscilatorのPeriodicWaveバージョンも作ってみたが、とりあえずは使っていない。フーリエ変換のコードはg200kgさんのブログのものを使わせていただいた。

http://www.g200kg.com/archives/2014/12/webaudioapiperi.html

後はドラム音部分を作ろうと思う。全然グラフィックの話じゃなくなってしまっているな。。

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/dev/graphics/devver/20160417/css/sfstyle.css

/dev/graphics/devver/20160417/index.html

/dev/graphics/devver/20160417/js/bundle.js

/dev/graphics/devver/20160417/test.html