ボリュームバー


ActionScript を使用して、PCのスピーカーから出る音量に応じて動くボリュームバーのようなものを作ることができます。
以下はサンプルです。

Flashを表示できません。

以下のようなダイアログが出た場合、「許可」を押すと音量を取得できるようになります。
[設定ダイアログ画像]
マイクへのアクセスを許可した状態で、PC上で音楽を流すと、ボリュームバーが動きます。
流した音楽がエコーで増幅されて物凄い音量になってしまうことがあるので、音量には十分注意してください。
マイクへアクセスする Flash をブラウザでふたつ以上開いたりすると、お互いエコーをかけあって上のような現象が起こることがあるらしいです。
マイクへのアクセスを「拒否」にすれば動作しないので安心です。

補足:
ここでは「PCのスピーカーから出る音量に応じて動く Flash」としていますが、実際に取得できる音声は「ステレオミックス」や「マイク入力」などがあります。
「ステレオミックス」が選択できる場合は、PCのスピーカーから出る音声を Flash で取得できますが、ステレオミックスが存在しないPCもあります。
その場合はマイク入力しか取得できないので、「マイクによる入力の音声レベルに応じて動く Flash」となります。
どのデバイスの音声を取得するかは、Flash画面上で右クリック⇒設定⇒「マイク」タブから設定することができます。


まずは、ボリュームを表示するためのバーの絵をつくります。ここでは50 * 200のサイズで作成しました。

[バー画像]    [マスクバー画像]

左側のグラデーションになっているほうが音量を示すためのバーで、
右側の白いバーは、左のバーの上に重ねて音量にあわせて動かすバーです。
ふたつのバーを重ねて白いバーを上に動かすと、下から色つきのバーが見えるという仕組みになっています。

ふたつのバーの画像を ParaFla! / Suzuka に取り込み、新規のスプライトをひとつ作成します。
スプライトの「ファイルのプロパティ」( Suzuka では「スプライトのプロパティ」)を開き、スプライトの大きさを50 * 200に設定して、スプライトを「イベントに追加」(「レイヤーに追加」)します。
スプライトの中に白いほうのバー画像を配置したらメインイベントに戻り、スプライトのイベントのひとつ上にグラデーションバーを深度-1の固定画面で配置( Suzuka ではグラデーションバーを「レイヤーに追加」)し、
スプライトのクリップアクションに以下のように記述します。( Suzuka では7行目のハイフンを削除してください。)

onClipEvent(load){
        this.mic = Microphone.get();                 //Microphone(マイク)オブジェクトの作成
        _root.attachAudio(this.mic);                 //オーディオソース指定
        _root.mic.setUseEchoSuppression(true);       //エコーを抑制
        _root.vl = 0;                                //変数の初期化
}
-
onClipEvent(enterFrame){
        _root.vl = this.mic.activityLevel;           //音量を取得
        this._yscale = 100 - _root.vl * 2;           //音量をバーの大きさに変換
        if(this._yscale <= 0){this._yscale = 0;}     //バーが最大値まで達したら、動きを止める
}

これで音量のレベルに応じてバーが動きます。
バーの動きの応答は FPS を変えたり、onClipEvent(enterFrame)内の処理をどれくらいの頻度で行うようにするかによって変化します。


音量レベルを取得するには、 ActionScript で用意されている「マイクオブジェクト」というものを使用します。

Microphone.get() マイクオブジェクトを作成します。
attachAudio() オーディオソースにマイクオブジェクトを割り当てます。

今回は「mic」という変数にマイクオブジェクトを作成したので、_rootのオーディオソースにマイクオブジェクトmicを割り当てました。
オブジェクトを割り当てると、マイクオブジェクトの音量レベルを「activityLevel」プロパティで取得する事ができるようになります。

activityLevel マイクが感知した音量レベルを数値で返します。(0〜100、取得できない時は-1)

今回の場合マイクオブジェクトはmicなので、プロパティを指定するときはmic.activityLevelのようにします。
上の例ではプロパティの値を変数「vl」に代入しています。
あとは、変数に代入した音量レベルの値から拡大率を計算し、以下のように白いバー画像の表示サイズを変更します。

this._yscale = 100 - _root.vl * 2;

例えば、音量レベルが 20 だとすると y 方向の拡大率_yscaleに代入される値は100 - 20 * 2 = 60となり、画像の縦方向の大きさは 60% に小さくなります。
また、例では取得した音量「vl」を2倍していますが、これを 1 倍や 3 倍に変えると動きの大きさの度合いが変化します。

以下の部分では、音量のレベルがバーの最大を超えた時にバーが上に飛び出ないようにするための処理を行っています。

if(this._yscale <= 0){this._yscale = 0;}

以下の部分は「エコー」を抑制するための設定を行っています。

_root.mic.setUseEchoSuppression(true);

setUseEchoSuppressionの引数に「true」を指定で抑制、「false」を指定で抑制を行いません。

ボリュームバーサンプルソースのダウンロード


トップページに戻る