当記事のキービジュアル


近況とサイトとY-clockの話

しばらく当サイトの更新を休止していましたが、開発中の独自CMSがサイト運用できる状態になったのでリニューアルと同時に再開の運びとなりました。

サイトにはBootstrap4を導入し、スマホ対応をユーザーエージェント判別からレスポンシブデザインに変更しました。

画像はWEBアプリ「Y-clock」のスクリーンショットです。Javascriptによる時計は既にありますが、スマホで表示し実用性のある物がこれまで無かった為現在のスキル証明を兼ねて作りました。

Web audio API✕Web Workersでシンセサイザー:実装編

先日作成した効果音生成シンセが実装されたミニゲームが公開されています。

ゲームサイトへ

先日のデモ版はフェイルセーフ&クロスブラウザ対応が実装されていなかった為、追加開発を行いました。

過去に制作に携わったゲームF-lashでは、Web audio APIをMP3ロード&再生のために使いました。そのため「iOSで回線状況が悪くなるとゲームそのものが起動しない」という欠点がありました。直近のライブラリでは直接波形生成することにより、この問題を克服することができました。

とはいえ生成そのものに時間がかかっているので、 WEBアプリに組み込む場合はいかに短く効果的な音を用意するかが課題になります。

またこのライブラリは、ポルタメントなど未実装の機能がいくつかあるので、 引き続き開発を進めていきます。

Web audio API✕Web Workersでシンセサイザー裏話

HTML5のシンセライブラリは6月中旬から作りはじめデモコンテンツを完成させるまでに約3週間かかったのですが、 その間様々な壁に当たりました。

Javascriptクラスで2重参照できない?

this.is = function(chu) { alart(chu); }
this.arai = function() { this.is('a pen'); }

例えば、こういうスクリプトで「this.isは未定義です」というエラーが出るやつです。対処法は以下になります。

Worker側でWeb Audio APIが使えない!?

Web Audio APIはバックグラウンドでは使えません。 その為、バックグラウンドでは波形レンダリングのみを行う必要があります。

Worker内のFroat32Arrayを、フロント側に参照渡ししたい

postMessageでは、ArrayBufferを参照渡し送信することができます。 大容量の波形データは値渡しだと遅いので、ぜひ参照渡ししたいところです。 ただし、第1パラメータと第2パラメータのオブジェクトは同一でなければなりません。

object.L = new Float32Array(length);
object.R = new Float32Array(length);
:
object.L[n] = -1~1;
object.R[n] = -1~1;
:
postMessage(object, [object.L.buffer, object.R.buffer])

第2パラメータに別のArrayBufferを指定しても送信されないのでご注意ください。

Workerから送られてきたArrayBufferを受け取りたい

ArrayBufferのset()で受け渡しします。 AudioContextの場合、事前にcreateBufferとgetChannelData(n)を行っておく必要があります。

audio.context = new webkitAudioContext();
audio.context.buffer = audio.context.createBuffer(2, samples, 44100);
audio.L = audio.context.buffer.getChannelData(0);
:
worker.onmessage = function (e) {
:
audio.L.set(e.data.L);

番外編・Ajax取得したソースのスクリプトを実行したい

今回のデモコンテンツとは直接関係ないのですが、 当サイトのようにjQuery Ajaxで部分ロードする場合、 scriptタグ実行は

という方法で行います。