Audio progress - CGastrell/phonegap GitHub Wiki
Continuando con el ejercicio anterior, ahora el objetivo sera crear una mini interfaz de usuario para reproducir el archivo de audio y poder ver su duracion y en que segundo se encuentra.
En el HTML
necesitaremos 2 botones: play y pausa. Tambien necesitaremos 2 lugares donde mostrar texto: tiempo de reproduccion actual y duracion total del archivo.
Modifiquemos el archivo index.html
para agregar, dentro del div data-role="content"
, un tag <p>
con 2 <span>
dentro. Para poder identificarlos luego le daremos id
s a los <span>
:
<div data-role="content">
<p>
<span id="currentTime">0</span> / <span id="totalTime">0</span>
</p>
</div>
Debajo del <p>
(el que contiene los <span>
) colocaremos 2 botones:
<a href="#" id="play" class="ui-btn ui-btn-b ui-icon-audio ui-btn-icon-right">Play()</a>
<a href="#" id="play" class="ui-btn ui-btn-b ui-icon-delete ui-btn-icon-right">Pausa()</a>
Modelo terminado:
<p>
<span id="currentTime"></span> / <span id="totalTime"></span>
</p>
<a href="#" id="play" class="ui-btn ui-btn-b ui-icon-audio ui-btn-icon-top">Play()</a>
<a href="#" id="pausa" class="ui-btn ui-btn-b ui-icon-delete ui-btn-icon-top">Pausa()</a>
El script para el debugger ya deberia estar incluido, verificar.
En el codigo necesitamos:
- Instanciar Media con nuestro archivo demo
/android_asset/www/intro.mp3
- Tener las funciones onError, onSuccess y onStatus para poder tener mas control, podemos usar las de antes.
- Tener alguna variable que nos indique si el archivo esta en play o no
- Asignar la funcionalidad al boton
#play
para reproducir el archivo
En el archivo js/index.js
ya tenemos la rutina de inicializacion en la funcion init()
. Creamos otro objeto donde ponemos nuestra mediaApi
var mediaApi = {
initialize: function() {
//asignamos una instancia de Media a mediaApi.audio
mediaApi.audio = new Media('/android_asset/www/intro.mp3', mediaApi.onSuccess, mediaApi.onError, mediaApi.onStatus);
//inicializacion de botones
$('#play').on('click', function(e) {
console.log('play button clicked');
e.preventDefault();
mediaApi.audio.play();
});
$('#pausa').on('click', function(e) {
console.log('play button clicked');
e.preventDefault();
mediaApi.audio.pause();
});
//inicializacion de indicadores de tiempo
mediaApi.currentTime = $('#currentTime').text(0);
mediaApi.totalTime = $('#totalTime').text(mediaApi.audio.getDuration());
//inicializacion de estado de reproduccion
mediaApi.isPlaying = false;
},
//a partir de aca son los handlers/calllbacks
//de success, status y error.
onSuccess: function(){
console.log('audio file has stopped/ended/stopped recording');
},
onStatus: function(status) {
switch(status) {
case Media.MEDIA_NONE: console.log('Status change: idle');
break;
case Media.MEDIA_STARTING: console.log('Status change: starting');
break;
case Media.MEDIA_RUNNING: console.log('Status change: running');
break;
case Media.MEDIA_PAUSED: console.log('Status change: paused');
break;
case Media.MEDIA_STOPPED: console.log('Status change: stopped');
break;
default: console.log('unknown status');
}
},
onError: function(err) {
console.log('Error');
console.log(err);
}
}
En el codigo tenemos 3 handlers: mediaApi.onSuccess
, mediaApi.onStatus
y mediaApi.onError
.
onSuccess
se ejecuta cuando el archivo de audio:
- termina su reproduccion
- se detiene a traves del comando
stop()
- detiene la grabacion (en caso de estar grabando) a traves del comando
stopRecord()
onError
se ejecutara cuando exista algun error, y lo unico que estamos haciendo al respecto es mostrar en la consola cual fue el error.
onStatus
se ejecuta cada vez que el archivo Media cambia de estado segun las variables que nos proporciona el plugin. La funcion recibe el estado al cual se ha pasado en forma de un numero entero. Gracias a la documentacion sabemos que representan cada uno de estos numeros, entonces hacemos un switch
en base al estado y escribimos a la consola correspondientemente:
onStatus: function(status) {
switch(status) {
case Media.MEDIA_NONE: console.log('Status change: idle');
break;
case Media.MEDIA_STARTING: console.log('Status change: starting');
break;
case Media.MEDIA_RUNNING: console.log('Status change: running');
break;
case Media.MEDIA_PAUSED: console.log('Status change: paused');
break;
case Media.MEDIA_STOPPED: console.log('Status change: stopped');
break;
default: console.log('unknown status');
}
},
Eso nos deja con un caso simple. Probemoslo y controlemos con el debugger que todo este en orden.
A continuacion veremos como encapsular las llamadas de play y pausa para poder ejecutar otras instrucciones: Encapsular comandos