0

ユーザーがキャンバスに自由に描画できる描画アプリを作成しています。x、y 座標の特定の範囲で音が出ます。私の目標は、ユーザーが後でアクション全体を記録して再生し、ビデオのように見られるようにすることです。描画ストロークを機能させることはできますが、録音と再生の部分、特に内部オーディオの録音に関して問題があります。私は非常に長い間検索してきましたが、これが私のコンセプトに非常に似ていることがわかりました

これは私が見つけたすばらしい例の 1 つで、ロニー http://ronnieswietek.com/piano/piano_example.swf によって行われまし た 。ソース: http://ronnieswietek.com/piano/piano_example.fla

例のように、座標に基づいて音を生成し、ストロークと音を記録および再生するストロークを描くように、ピアノのキーを置き換える方法はありますか?

私は立ち往生し、それを行う方法を見つけようとして混乱しています..

4

1 に答える 1

0

コードを実行して描画ストロークを実行できる場合は、これらのストローク コマンドの実行にタイムスタンプを付けるだけです。これにアプローチする方法はいくつかあります。私は例を書きました（あなたのためだけに）。

これを新しい Flash ドキュメントに貼り付けて実行できます。

/* First we'll create some variables */

var recording:Array = new Array(); // This is where we'll store all the instances of user action.
var playStart:Number = 0; // Playback will depend on whether this variable is greater than 0.
stage.addEventListener(Event.ENTER_FRAME, tic); // This will run once every frame update.

/* Next we'll create some helper functions */

function createButton(name:String, hue:uint):MovieClip {
    // We'll use this to make some fancy buttons.
    var box:MovieClip = new MovieClip();
    var shape:Sprite = new Sprite();
    shape.graphics.beginFill(hue);
    shape.graphics.drawRect(0, 0, 100, 25);
    box.addChild(shape);

    var txt:TextField = new TextField();
    txt.text = name;
    txt.x = 10;
    txt.y = 3;
    txt.mouseEnabled = false;
    box.addChild(txt);

    return box;
}

function drawCircle(X:Number, Y:Number, Hue:uint = 0x000000):void {
    // This creates circles on stage.
    var circle:Shape = new Shape();
    circle.graphics.beginFill(Hue);
    circle.graphics.drawCircle(0, 0, 10);
    circle.graphics.endFill();
    circle.x = X;
    circle.y = Y;
    addChild(circle);
}


/* Now lets create some buttons; Record, Stop, and Play. And rig'em up to some actions. */

var recordBtn:MovieClip = createButton("Record", 0x10ab00);
addChild(recordBtn);
recordBtn.addEventListener("mouseUp", startRecording);

var stopRecordBtn:MovieClip = createButton("Stop", 0xe90000);
stopRecordBtn.x = 101;
addChild(stopRecordBtn);
stopRecordBtn.addEventListener("mouseUp", stopRecording);

var playBtn:MovieClip = createButton("Play", 0x0069ab);
playBtn.x = 202;
addChild(playBtn);
playBtn.addEventListener("mouseUp", playRecording);


/* In the same order, we'll create those functions */

function startRecording(e:Event):void {
    // Here we'll store a timestampe of when the recording started.
    recording[0] = flash.utils.getTimer();
    // Register for mouseclicks on the stage; we need some kind of input to track.
    stage.addEventListener("mouseUp", recordAction);
}

function stopRecording(e:Event):void {
    // Conversely, we stop recording by not listening anymore.
    stage.removeEventListener("mouseUp", recordAction);
}

function playRecording(e:Event):void {
    // Just like recording, we keep track of when we started.
    playStart = flash.utils.getTimer();
}


function recordAction(e:Event):void {
    if (recording.length >= 1) {
        // First, we create the timestamp, and other relavent info.
        var tick:Object = {
            "time":flash.utils.getTimer(),
            "x":e["stageX"],
            "y":e["stageY"]
        }

        // And store it in our numerical index
        recording.push(tick);
        trace("Time: " + (tick.time - recording[0]) + " Coords: " + tick.x + "," + tick.y);

        // Then we do whatever action we were supposed to do (draw line, play sound, etc.).  Here, we'll draw a circle at the mouse coordinates.
        drawCircle(tick.x, tick.y);
    }
}

function tic(e:Event):void {
    if (playStart > 0) { // Assuming we've indexed a start time...
        if (recording.length > 1) { // and we actually have actions to playback.
            // We'll first normalize those bizzare numbers to a zero starting number.
            var nextAction:Number = recording[1].time - recording[0];
            var playHead:Number = flash.utils.getTimer() - playStart;
            if (playHead > nextAction) {
                // Now that we've matched the time, we execute the same action we did before.
                drawCircle(recording[1].x, recording[1].y, 0xFFFFFF);
                // ... and in this example, I'm removing that instance since we no longer need it.
                recording.splice(1, 1);
            }
        } else {
            // If the length of the recording reaches zero, we'll automatically stop playback too.
            playStart = 0;
        }
    }

}
于 2013-01-28T22:43:48.187 に答える