chrome music labのsong makerについて

https://musiclab.chromeexperiments.com/Song-Maker/

ブラウザ上で簡単に作曲ができて、midi ,wav にダウンロードできるサイト。
面白そうなのでどんな動きをしているか調べてみる。

ブラウザ上の動作
* マス目をなぞるのはchrome music lab のmelody makerを少し拡張したもの。
* 再生したり音を鳴らしたりするのはtone.jsを使っている。

midi,wavのダウンロード機能
* saveボタンを押したときに、midiファイルと楽譜データをsave
* ダウンロードするファイルを選択するときには、サーバ上のファイルをダウンロードするだけ
ｰ>つまりクラウド上でwav変換を行っているように見える。


https://serverlessrepo.aws.amazon.com/applications/arn:aws:serverlessrepo:us-east-1:375983427419:applications~s3-lambda-ffmpeg-aac-wav-to-mp3-s3
このような仕組みがあるので、S3にmidiと楽譜データをアップしてしまえば勝手にlambdaが変換してくれる仕組みを作れるらしい。

https://github.com/simalexan/s3-lambda-ffmpeg-aac-wav-to-mp3-s3
ソースコードを見た限りspawnしているだけですね。
簡単簡単。

tone.jsの環境構築(chrome-music-lab/melodymaker)

chrome-music-labというところで、WebAudioAPIのサンプルがたくさんあるので
動かしてみました。
https://github.com/googlecreativelab/chrome-music-lab

まずは、melodymakerを動かすまで。

■準備
nvmのインストール
> curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
> nvm install --lts
> nvm use --lts

LTSにすると、node-saasでビルドエラーが発生するため、バージョンを下げる。

> nvm install v10.18.1
> nvm use v10.18.1
> git clone  https://github.com/googlecreativelab/chrome-music-lab
> cd chrome-music-lab/melodymaker
> npm init
> npm install
> npx webpack
> npm install webpack-dev-server webpack-cli --save-dev
> npx webpack-dev-server

validateSchema is not a function

上記エラーが出力され起動できなかった。
webpackとwebpack-dev-serverのバージョンの不一致かなと。
##後ほど要調査

> python3 -m http.server 3000
とりあえず起動確認のため、上記コマンドで確認。

ブラウザで http://localhost:3000  を開くと動作確認できる。
ちなみに、スマホでは表示されなかった。