audiocontext」タグアーカイブ

speakedraw(5) – キャンバスの初期化など


進行方向が変わるタイミングで3つのオブジェクトの表示順が変わりまた100回のうちに表示内容が消去されるようになります。ランダムの機能を使用しているのでいつそうなるのかは神のみぞ知るって感じです。。。また方向転換するたびに奏でる音も変わります。どんな音が出るかもまた神のみぞ知るって感じです。。。
関数resetCountで表示状態の初期化とどのオブジェクトが前に来るとかと言う表示順を設定して、関数playSoundでどんな音を出力するのかを設定しています。

という感じでこのプログラムの解説を終わりにしようと思います。
最後に説明しきれなかった部分等も含めた全体を記載しておきます。
次回はこれを応用したものを作ってみようかと思ってます、はい。
動作するプログラムはこちらです。
続きを読む

Start in a maze (Javascriptでシンセ2)


前回の投稿したプログラムの説明です。動きは全く同じでしたがかなり作り直しました。
プログラムはこちら。(safariとかスマホでは再生できないです。。。)
機能は以下の通り。

  1. 「start!」ボタンを押すと音声が出力して、背景色が変わる。
  2. 上記の処理が繰り返し実行される。
  3. 繰り返しの処理は0から750ミリ秒の間でランダムのタイミングで実行される。
  4. 背景色はランダムに切り替わる。
  5. 「stop!」ボタンを押すと処理が停止する。

こんな感じのイメージ。

当初は全てhtml内に書き込んでいましたが、音再生部分はクラスにして外出しにしました。背景色用の処理もクラスにしていますが、こちらはどちらかと言うと実行側に近いのでhtmlにそのまま残してそのクラスから音声再生用のクラスを制御するようにしました。

まずは音再生クラスから(mysynth.js)

以下のような感じでシンプルにまとめました。この方法でかなり拡張しやすくなったと思います。

  • コンストラクタ
    インスタンス変数にAudioContexのオブジェクトを保持。
    (注) AudioContextが使えないブラウザ対応のためにコンストラクタでエラーが発生した場合は、インスタンス変数に使用不可である事を設定します。
  • setSound
    音量、音程、音色を設定
  • play
    setSoundで音の設定をして再生
  • stop
    音を停止

以下ソースコード。

続きを読む

In a maze (Javascriptでシンセ)


Javascriptでなんか音鳴らすプログラム書けないかなぁと思って、「javasccript オシレータ」で検索。
んで辿り着いたのがこの方のページ。
オシレータ(音の生成)とゲイン(音量) の設定 [Web Audio API]
AudioContextなるものをものを使ってあげれば、三角、ノコギリ、矩形、サインの波形のオシレータが使えるのですね。
という事で、まずはランダム(0 ~ 750ミリ秒)のタイミングで画面の色も同期しながらCメジャーのスケールをただただ続けると言うプログラムを作ってみました。
フィルタとかモジュレーションも掛けられるのでもっと面白くなりそうですが、まずはできる事をやると言う事で。画面の動きも含めてまた色々試していこうかと思います。
プログラムはこちら
AudioContextが使えないブラウザでは音が出ませんので悪しからず。
もしかしたら爆音が出るかもしれないので、会社のパソコンとかで試すのは厳禁です。
次回はソースの説明も描いてみます。はい。