note.x

UI Sound with SiON

SiON使って、UIにSEを付けたりしてみるテスト。

(要:FlashPlayer10)

マウスイベントなんかに連動して音を鳴らす場合、今まではmp3ファイル読み込んで再生してたけど、SiONを使うことで、PSG / FM / WaveTable / PCMなどの多彩な音源で、しかもラクしてサウンド制御ができる。個人的にはOPMが鳴るってだけで抱かれてもいいと思ったけど、トータルに音の制御ができるという側面はコンテンツ制作する上でとっても有用。

例えば、下記のようなコードで音の鳴るボタンが作れる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
package
{
    import flash.display.*;
    import flash.events.*;
 
    import org.si.sion.*;
 
    [SWF(backgroundColor=0x000000)]
    public class main extends Sprite
    {
        private var driver:SiONDriver;
        private var sinWave:SiONVoice;
 
        public function main()
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
 
        public function init(e:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
 
            stage.frameRate = 60;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.quality = StageQuality.BEST;
 
            initSiON();
        }
 
        private function initSiON():void
        {
            //SiONDriverをスタンバイ
            driver = new SiONDriver();
            driver.play();
 
            //音色定義(%5, @0 = sin波)
            sinWave = new SiONVoice(5,0);
 
            //UIを定義
            var soundButton:Sprite = new Sprite();
            soundButton.graphics.beginFill(0x0099cc);
            soundButton.graphics.drawRoundRect(0, 0, 120, 120, 4, 4);
            soundButton.graphics.endFill();
            addChild(soundButton);
            soundButton.x = 20, soundButton.y = 20;
 
            soundButton.addEventListener(MouseEvent.ROLL_OVER, onrollover);
            soundButton.useHandCursor = true;
        }
 
        public function onrollover(e:MouseEvent):void
        {
            //ノート番号90番(オクターブ7の「ファ」)の音を
            //事前に定義した音色(sinWave)で鳴らす。
            //第3引数:音長(1 = 16分音符), 第4引数:発音までのディレイ
            driver.noteOn(90, sinWave, 1, 0);
        }
    }
}

音色定義については、SiON MMLリファレンス「音色関連 – ‘%’,'@’の第1引数」の項を参照。

音色定義を

var sawWave:SiONVoice = new SiONVoice(5,1);    // ノコギリ波
var triWave:SiONVoice = new SiONVoice(5,4);    // 三角波
var squareWave:SiONVoice = new SiONVoice(5,5); // 矩形波

などと差し替えることで違う音色にできる。PSG / FM / WaveTable 音源については、使いこなせれば、別途音源データを用意せずに、コーディングだけで多彩な音を鳴らすことができる反面、音色定義自体がそれなりの知識と慣れを要求するので、UIサウンドとしてお手軽にSiONを活用することを考えた場合、swfに埋め込んだ、もしくは外部から読み込んだmp3サウンドをSiONで制御するのが良いんじゃないかと思う。例えば以下のような感じで。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
package
{
    import flash.display.*;
    import flash.events.*;
    import flash.media.*;
 
    import org.si.sion.*;
 
    [SWF(backgroundColor=0x000000)]
    public class main extends Sprite
    {
        private var driver:SiONDriver;
        private var pcmsound:SiONVoice;
 
        [Embed(source='hoge.mp3')]
        private var hogeSound:Class;
 
        public function main()
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
 
        public function init(e:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
 
            stage.frameRate = 60;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.quality = StageQuality.BEST;
 
            initSiON();
        }
 
        private function initSiON():void
        {
            //SiONDriverをスタンバイ
            driver = new SiONDriver();
            driver.play();
 
            //音色定義(PCMサウンド)
            var hoge:Sound = new hogeSound();
            driver.setSamplerSound(90, hoge);  //ノート番号90番に、Embedしたmp3サウンドを割り当て
            pcmsound = new SiONVoice(10);
 
            //UIを定義
            var soundButton:Sprite = new Sprite();
            soundButton.graphics.beginFill(0x0099cc);
            soundButton.graphics.drawRoundRect(0, 0, 120, 120, 4, 4);
            soundButton.graphics.endFill();
            addChild(soundButton);
            soundButton.x = 20, soundButton.y = 20;
 
            soundButton.addEventListener(MouseEvent.ROLL_OVER, onrollover);
            soundButton.useHandCursor = true;
        }
 
        public function onrollover(e:MouseEvent):void
        {
            //ノート番号90番(mp3サウンドを割り当てた場所)の音を鳴らす。
            driver.noteOn(90, pcmsound, 1, 0);
        }
    }
}

setSamplerSoundは、通常0-127までのノート番号に任意のSoundを割り当て可能。さらにバンク切り替えで128-255まで定義しておくことができる。

また、driver.noteOn()の代わりに driver.sequenceOn() を使うことで、事前に定義したMMLを再生することも可能。

driver = new SiONDriver();
var mml:SiONData = driver.compile("l16 o6 ffffre-rgrf2;l16 o6 c>bb-argrb-ra2;");
driver.play();

sinWave = new SiONVoice(5,0);
driver.sequenceOn(mml, sinWave, 0, 0, 1, 3);

driver.sequenceOn()は、別途演奏中のMMLシーケンスとタイミングを合わせて再生を乗せることができたりするあたりの仕様にニヤリとさせられた。

加えて、delay, reverb, chorus 等のエフェクトや、low/high pass filter等のフィルタも備えているため、かなり自由度の高い音作りをすることもできる(このエントリ冒頭のデモでは、reverbをon/offできるようにした)
SiONで使えるエフェクトについては、SiON MMLリファレンス「エフェクタ接続」の項を参照。

ということで、SiONはオッサンの懐古主義を満足させるためだけのものではなく(オレにとってはここも超重要なのだけど)、Flashによるコンテンツ制作におけるサウンド面の実装を容易に、表現力豊かにしてくれる、とても有り難いライブラリなのですな。


TRACKBACK

  1. gasubasu - 2009.06.22 20:35:00

    Example of usage SiON library

    The “SiON” is a sound library featuring …

    PSG, FM, WaveTable? and PCM sound module emulations
    MML (Music Macro Language) compiler and sequencer
    Sound effectors

    Source code of this example here

  2. UI sound SiON « Branberyheag Lab - 2009.07.01 14:11:10

    [...] 見つけたブログ note.X [...]

  3. [...] 参考サイト note.x (UI Sound with SiON) http://blog.r3c7.net/?p=406N Tags: SiON [...]

  4. [...] い。 マウスの位置とかで動的に変えたりしたら面白そう。 イベント関連のメモもしとこう。 あとで。。 参考 : note.x | UI Sound with SiON http://mmltalks.appspot.com/document/siopm_mml_ref_05.html Tweet [...]

  5. [...] UI Sound with SiON – note.xhttp://blog.r3c7.net/?p=406 [...]

Trackback URL : http://blog.r3c7.net/misc/406/trackback/

COMMENTS

  1. 匿名 - 2009.06.22 22:16:40

    windows だと結構なレイテンシがあるのがカナシイ!

  2. 匿名 - 2009.06.30 9:33:13

    良いのを見つけた。

Leave a Reply