pulse」タグアーカイブ

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
    音を停止

以下ソースコード。

続きを読む