synch sound and video
Shri

Gio,

 

I am trying to develop a demo where audio and visual are synchronized.

I know the length of the sound file (362 seconds).

I have been trying to do the synch by checking the app time after the sound file has started.

The accuracy doesn't have to be exact within couple  of seconds or so, but right now it has wide variations

Sometimes when I test the app, the sound file ends after as little as 155 seconds of app time and other times it goes for 300 seconds ?

 

Using wade.getAudio(), I can get access to the AudioBuffer object, but when I look at it there seems to be no currentTime attribute ?

 

So, is there a way to get the current play time, or do I have to figure out a way to do this via jquery or another js library.

 

thanks for any help you can offer.

 

cheers,

Shri

All 4 Comments
Gio

Hi

 

I would recommend that you don't use wade.getAudio() - as with all the undocumented functions, it's better to avoid using it when possible, it may not behave properly. In the case of wade.getAudio(), it may return different things on different platforms: a WebAudio buffer on platforms that support WebAudio, and an HTML5 Audio objects on the other platforms. So you must be extra careful if you want to use it.

 

In your case, it sounds like you don't really need it - the problem is relying on wade.getAppTime() for the timing. The app time is the "simulation" time since the app started. This is not the same thing as the actual time. For example, simulation time is paused when the app is in a background (inactive) tab, and on systems that lag significantly, it will be always behind the actual time.

 

You could do:
 

var time = (new Date()).getTime();

to get more accurate timing. This will return the actual system time and should be what you need to use for audio/video synchronization - in fact this is what I'm using for a demo I'm developing and it works really well :)

Shri

Gio,

 

Thanks for the info, I thought I would be clever and use the wade call instead of the straight javascript (oops).

By the way, you may want to use Date.now() instead. I have read on the web that it is faster

If you care to - check out http://jsperf.com/date-now-vs-new-date

 

As an aside, are the 'built in' force functions for particles documented somewhere ?

The ones like wade.particles.forces.attractConstant_()

It looks like there are 7 ? attract/repel constant, attract/repel quadratic, attract/repel linear and tangent ?

 

cheers,

Shri

Gio

Yes, good point about Date.now(). In practice it won't make a big difference (unless you're doing it thousands of times per frame), but it's always good to use the faster option.

 

Regarding particle forces - I couldn't get JSDoc to generate any documentation for nested object properties. I've been playing with it for a while but failing. So here's the commented source code for particle forces - I hope this helps.

 

    /**     * An object that contains a set of functions that you can use to generate forces for your particles. Each of the functions contained inside the <i>forces</i> object can be called to generate a force function (i.e. when called they return a function that you can use with your emitters or particles).     * @type {{attractQuadratic_: Function, attractLinear_: Function, attractConstant_: Function, repelQuadratic_: Function, repelLinear_: Function, repelConstant_: Function, tangent_: Function}}     */    this.forces =    {        /**         * Generate a force function that causes the particles to be attracted to a target, in a way that's proportional to the distance squared         * @param {{x:number, y:number}} attractorPosition The position of the target         * @param {number} magnitude The overall strength of the force         * @returns {Function} A function to use with the Emitter or Particle behaviors         */        attractQuadratic_: function(attractorPosition, magnitude)        {            return function(x, y)            {                pos.x = x;                pos.y = y;                var diff = wade.vec2.sub(attractorPosition, pos);                return wade.vec2.scale(diff, magnitude * wade.vec2.length(diff));            };        },        /**         * Generate a force function that causes the particles to be attracted to a target, in a way that's proportional to the distance         * @param {{x:number, y:number}} attractorPosition The position of the target         * @param {number} magnitude The overall strength of the force         * @returns {Function} A function to use with the Emitter or Particle behaviors         */        attractLinear_ : function(attractorPosition, magnitude)        {            return function(x, y)            {                pos.x = x;                pos.y = y;                var diff = wade.vec2.sub(attractorPosition, pos);                return wade.vec2.scale(diff, magnitude);            };        },        /**         * Generate a force function that causes the particles to be attracted to a target, with a constant strength         * @param {{x:number, y:number}} attractorPosition The position of the target         * @param {number} magnitude The overall strength of the force         * @returns {Function} A function to use with the Emitter or Particle behaviors         */        attractConstant_ : function(attractorPosition, magnitude)        {            return function(x, y)            {                pos.x = x;                pos.y = y;                var diff = wade.vec2.sub(attractorPosition, pos);                return wade.vec2.scale(wade.vec2.normalizeIfPossible(diff), magnitude);            };        },        /**         * Generate a force function that causes the particles to be repelled by a target, in a way that's proportional to the distance squared         * @param {{x:number, y:number}} repellerPosition The position of the target         * @param {number} magnitude The overall strength of the force         * @returns {Function} A function to use with the Emitter or Particle behaviors         */        repelQuadratic_: function(repellerPosition, magnitude)        {            return function(x, y)            {                pos.x = x;                pos.y = y;                var diff = wade.vec2.sub(repellerPosition, pos);                return wade.vec2.scale(diff, -magnitude * wade.vec2.length(diff));            };        },        /**         * Generate a force function that causes the particles to be repelled by a target, in a way that's proportional to the distance         * @param {{x:number, y:number}} repellerPosition The position of the target         * @param {number} magnitude The overall strength of the force         * @returns {Function} A function to use with the Emitter or Particle behaviors         */        repelLinear_ : function(repellerPosition, magnitude)        {            return function(x, y)            {                pos.x = x;                pos.y = y;                var diff = wade.vec2.sub(repellerPosition, pos);                return wade.vec2.scale(diff, -magnitude);            };        },        /**         * Generate a force function that causes the particles to be repelled by a target, with a constant strength         * @param {{x:number, y:number}} repellerPosition The position of the target         * @param {number} magnitude The overall strength of the force         * @returns {Function} A function to use with the Emitter or Particle behaviors         */        repelConstant_ : function(repellerPosition, magnitude)        {            return function(x, y)            {                pos.x = x;                pos.y = y;                var diff = wade.vec2.sub(repellerPosition, pos);                return wade.vec2.scale(wade.vec2.normalizeIfPossible(diff), -magnitude);            };        },        /**         * Generate a force function that causes the particles to move along the tangent of a circle centered on the target position         * @param {{x:number, y:number}} centerPosition the position of the target         * @param {number} magnitude The overall strength of the force         * @returns {Function} A function to use with the Emitter or Particle behaviors         */        tangent_: function(centerPosition, magnitude)        {            return function(x, y)            {                pos.x = x;                pos.y = y;                var diff = wade.vec2.sub(centerPosition, pos);                return wade.vec2.scale({x: diff.y, y: -diff.x}, magnitude);            };        }    };
Shri

Gio,

 

Thanks for the code info. It helped a lot.

I just put a particles demo on my website.

 

cheers,

Shri

Post a reply
Add Attachment
Submit Reply
Login to Reply