Synchronität von Audiodatei und Bewegung

[KorbenDallas]

Ich möchte eine Timeline bauen, die den zeitlichen Fortschritt einer Audiodatei visualisiert. Dazu habe ich mir folgendes Skript gebaut:

loadMp3Sound(obj_audio);
startTimeline();

function loadMp3Sound(obj_audio) {
		_root.AudioObj = new Sound();
		_root.AudioObj.loadSound("http://IP-Adresse/Ordner" + obj_audio, true);
		trace("Lade Mp3: " + obj_audio);
		_root.AudioObj.start(0,0);
		trace ("Dauer des Audioclips: " + AudioObj.duration);
	}			

function startTimeline() {
		// Fortschrittsanzeige starten
		_root.timeline.timeline_btn_mc._x = 0;
		_root.timeline.gotoAndStop(2);
	}

Funktioniert alles gut.

Auf dem zweiten Frame des Movieclips timeline liegt dann folgendes Skript, dass den Button auf der Timeline in Abhängigkeit von der Länge des Audiostückes einen Pixel nach rechts verschieben soll.

var x_move = 1;

/* 	Vor der Berechnung der Intervallzeit muss der Audioclip vollständig 
	 geladen sein 
*/

var intervalltime;
onEnterFrame = function () {
				var geladen = _root.AudioObj.getBytesLoaded();
				var gesamt = _root.AudioObj.getBytesTotal();
				trace("Audio geladen:" + geladen);
				trace("Audio gesamt:" + gesamt);
			if (geladen >= gesamt && gesamt>4) {
				intervalltime = Math.round((_root.AudioObj.duration/(_root.timeline._width - _root.timeline_btn_mc._width)));
				trace ("Intervallzeit: " + intervalltime);
				intervallID = setInterval( function() {
							if (timeline_btn_mc._x < (_root.timeline._width - timeline_btn_mc._width)) {
							timeline_btn_mc._x = timeline_btn_mc._x + x_move;
							}
						},intervalltime);
				delete this.onEnterFrame;
				}
			}

Dazu nutze ich die Funktion setInterval(), die sich nach einer bestimmten Zeit intervalltime (in Millisekunden) immer wieder neu aufruft. Die Zeit intervalltime ergibt sich bei mir aus der Länge des Audiostückes in Millisekunden / (Länge der Timeline - Breite des Timeline-Buttons).

Beispiel: 10000 Millisekunden / 550 px (Timeline) - 50 px (Timeline-Button) = 20 Millisekunden

Das bedeutet, dass die Funktion setInterval nach jeweils 20 Millsekunden aufgerufen wird und den Timeline-Button um 1 Pixel nach rechts verschiebt. Das geschieht so lange bis der Button eine bestimmte Position erreicht hat.

Und jetzt das Problem:
Timeline-Button und Audiodatei laufen nicht synchron. In meinem Fall erreicht der Button erst nach dem Ende der Audiodatei das Ende der Timeline.

Hat jemand einen guten Tip?
Wo ist der Denk- bzw. Programmierfehler?
Oder gibt es eine elegantere Möglichkeit, das Ganze zu lösen?

[Fuery3302]

wieso machst dass nicht mit prozenten und onEnterFrame? wäre finde ich einfacher.

so wie bei einem preloader der ladebalken.

lg

[KorbenDallas]

Aus grafischen Gründen ist es wichtig, dass der Button auf der Timeline immer nur ganze Pixel-Werte (z.B. 1) nach rechts rutscht. Bei einer prozentualen Verschiebung ergäbe sich ja auch ungerade Pixelwerte (z.B. 1,28). Idee?

[Fuery3302]

probier das.

_global.laenge; //ms
_global.abgelaufen; //ms

_global.pixelLaenge; //Px
_global.pixelAbgelaufen = 0;//Px


_global.wievielePX = function()
{
	var prozent = (_global.abgelaufen / _global.laenge)*100
	var pixel = Math.floor(((_global.pixelLaenge * prozent) /100) -  _global.pixelAbgelaufen);
	var neuPixelAbegelaufen = _global.pixelAbgelaufen + pixel;
	_global.pixelAbgelaufen = neuPixelAbegelaufen;
	trace (pixel);
}

du musst nur _global.abgelaufen und _global.laenge mit den werten von deinem Sound-Obj. "stopfen".
und _global.pixelLaenge mit dem wert wie lang deine leiste is.

zum testen hab ich's so gemacht.

_global.laenge = 500; //ms
_global.abgelaufen = 0; //ms

_global.pixelLaenge = 550; //Px
_global.pixelAbgelaufen = 0;//Px

_global.simuliereSong = function()
{
	if (_global.abgelaufen < _global.laenge)
	{
		_global.abgelaufen ++;
	}else{
		clearInterval(_global.simu);
		trace ( 'SoundComplete' );
	}
}

_global.wievielePX = function()
{
	var prozent = (_global.abgelaufen / _global.laenge)*100
	var pixel = Math.floor(((_global.pixelLaenge * prozent) /100) -  _global.pixelAbgelaufen);
	var neuPixelAbegelaufen = _global.pixelAbgelaufen + pixel;
	_global.pixelAbgelaufen = neuPixelAbegelaufen;
	trace (pixel);
}

this.onEnterframe = function() { wievielePX(); };
_global.simu = setInterval(simuliereSong, 1);

müsste eigentlich hinhaun.

[KorbenDallas]

Vielen Dank erstmal für Deine Mühen. Ich habe das Ganze noch ein bißchen umbauen müssen, damit es mit meinem Audio-Preloader funktioniert, aber es läuft jetzt. Einzige Einschränkung ist, dass die Synchronität nur bei einer Bildrate von 10 fps sichergestellt ist, da onEnterFrame eine Ereignisprozedur ist, die mit der Bildrate (FPS) der SWF-Datei aufgerufen wird.

Hier nochmal mein Skript (ich bevorzuge irgendwie die englischsprachige Variablenbezeichnung !!!):

_global.audio_loaded; // Bytes, die bereits geladen wurden
_global.audio_total; // Bytes total
_global.audio_length; // Länge der Audiodatei
_global.timeline_pxlength; // Länge der Timeline
_global.timeline_pxpassed = 0; // Pixel, die bereits auf der Timeline zurückgelegt wurden

// onEnterFrame wird kontinuierlich mit der Bildrate der SWF-Datei aufgerufen
onEnterFrame = function () {
				_global.audio_loaded = _root.AudioObj.getBytesLoaded();
				_global.audio_total = _root.AudioObj.getBytesTotal();
				
			if (_global.audio_loaded >= _global.audio_total && _global.audio_total>4) {
delete this.onEnterFrame;
				_global.audio_length = _root.AudioObj.duration;
				
				this.onEnterFrame = function () { MoveTimelineButton() };
				_global.watcher = setInterval(CheckAudioPosition, 1);
			}
		}

function MoveTimelineButton () {
	var audio_percentage = (_root.AudioObj.position / _global.audio_length) * 100;
	var pixel = Math.floor(((_global.timeline_pxlength * audio_percentage) / 100) - _global.timeline_pxpassed);
	_global.timeline_pxpassed = _global.timeline_pxpassed + pixel;
	_root.timeline.timeline_btn_mc._x = _root.timeline.timeline_btn_mc._x + pixel; // Schiebt den Button auf der Timeline jeweils ganze Pixelwerte vorwärts
}

function CheckAudioPosition () {
	if (_root.AudioObj.position >= _global.audio_length) {
		clearInterval(_global.watcher);
		trace ("Sound complete.");
	}

[Fuery3302]

kein problem. freut mich wenns funzt. aber du kannst ja statt onEnterFrame auch SetInterval nehmen

lg,Füry