Format time - CGastrell/phonegap GitHub Wiki

Para redondear la seccion de reproduccion de audio solo nos queda un tema: el formato del tiempo de reproduccion y la duracion del archivo de audio.

Pueden haber notado esta linea en el interval que actualiza el tiempo de reproduccion:

mediaApi.currentTime.text( ((t * 100) << 0) / 100 );

mediaApi.currentTime es una referencia a uno de los <span> que incluimos en el HTML.

mediaApi.currentTime.text(VALOR) establece el texto que queremos que aparezca en este <span>. Ahora bien, cuando obtenemos el tiempo de reproduccion o la duracion, el valor es algo como:

4.153974103701343

pero esto no es eficiente para mostrar, nadie va a necesitar una precision de femptosegundo. Tambien podria suceder que, por azar del destino, nuestro archivo este clavado en 3 segundos. Este codigo se encarga de cualquiera de las situaciones dejando solo 2 decimales de esta manera:

• tomamos el valor, ej: t = 4.153974103701343
• multiplicamos por 100 (2 decimales): t * 100 = 415.3974103701343
• redondeamos este valor eliminando efectivamente todos los decimales: (t * 100) << 0 = 415
• y por ultimo dividimos por 100 nuevamente: ((t * 100) << 0) / 100 = 4.15

Nota: para redondear el numero se puede usar la funcion parseInt() que convertira un numero con decimales a un entero. Aca usamos una operacion entre bits (bitwise) dado que es la manera mas rapida de obtener el entero desde un float. Si quieren hacer el codigo mas legible pueden reemplazar la linea de codigo por:

mediaApi.currentTime.text( parseInt(t).toFixed(2));

pero el funcionamiento es el mismo.

Nota 2: los parentesis estan, al igual que en matematicas, para delimitar la operacion y darle prioridad de resolucion. En una operacion 2 + 3 * 4 sabemos que primero se resolvera la multiplicacion y luego la suma, porque es una regla establecida. En nuestro caso estamos ejecutando una operacion que no esta reglamentada, entonces ubicamos parentesis para asegurarnos este orden de resolucion: siempre se resuelven los parentesis internos primero.

Para implementar este formato debemos ubicarlo en el/los momento/s que actualizamos los valores en la interfaz:

• la funcion que ejecuta el intervalo (si copiaron y pegaron yo ya les habia incluido esto en el codigo)
• la funcion que obtiene la duracion (onStatus)

La funcion onStatus es la que usamos para el falso play y esta linea:

mediaApi.totalTime.text(mediaApi.audio._duration);

es la que actualiza el texto del HTML. Luego del formato quedaria asi:

mediaApi.totalTime.text(mediaApi.audio._duration.toFixed(2));

Probamos esta funcionalidad y pasamos a sistematizar la grabacion y reproduccion de nuestros propios archivos de audio