Crear un reproductor de música en Android: Controles de usuario

Spanish (Español) translation by CYC (you can also view the original English article)

Estamos construyendo una aplicación simple de reproductor de música para Android en esta serie. Hasta ahora, hemos presentado una lista de las canciones en el dispositivo y le permitimos al usuario hacer selecciones de ella, comenzando la reproducción usando la clase MediaPlayer en una clase de Service. En esta parte final de la serie, dejaremos que el usuario controle la reproducción, incluido el salto a las pistas siguiente y anterior, el avance rápido, el rebobinado, la reproducción, la pausa y la búsqueda de puntos particulares en la pista. También mostraremos una notificación durante la reproducción para que el usuario pueda regresar al reproductor de música después de usar otras aplicaciones.

Introducción

La funcionalidad de control del reproductor de música se implementará utilizando la clase MediaController, en la que una instancia de SeekBar muestra el progreso de la reproducción y permite que el usuario salte a ubicaciones particulares en una pista. Utilizaremos las clases Notification y PendingIntent para mostrar el título de la pista que se está reproduciendo actualmente y permitir que el usuario vuelva a la aplicación.

Así es como debería verse la aplicación cuando completes este tutorial:

Después de esta serie, también exploraremos la funcionalidad relacionada que tal vez desees utilizar para mejorar la aplicación de reproductor de música. Esto incluirá reproducción de video, transmisión de medios, administración de enfoque de audio y presentación de datos de medios de diferentes maneras.

1. Crea un controlador

Paso 1

Abre tu clase principal Activity y agrega la siguiente instrucción de importación:

1
2	import android.widget.MediaController.MediaPlayerControl;

Extiende la línea de apertura de la declaración de clase de la siguiente manera, de modo que podamos usar la clase Activity para proporcionar control de reproducción:

1
2	public class MainActivity extends Activity implements MediaPlayerControl {

Desplázate sobre el nombre de la clase y selecciona Agregar métodos no implementados o en inglés Add unimplemented methods. Eclipse agregará varios métodos para el control de reproducción, los cuales adaptaremos a medida que avanzamos.

Paso 2

La clase MediaController presenta un widget estándar con botones reproducir/pausar, rebobinar, avanzar rápido y omitir (anterior/siguiente) en él. El widget también contiene una barra de búsqueda, que se actualiza a medida que se reproduce la canción y contiene texto que indica la duración de la canción y la posición actual del reproductor. Para que podamos configurar los detalles del control, implementaremos una clase para ampliarlo. Agrega una nueva clase a tu proyecto y asígnale el nombre de MusicController. En Eclipse, elige android.widget.MediaController como la superclase al crearlo.

Dale a la clase el siguiente contenido:


public class MusicController extends MediaController {

  public MusicController(Context c){
    super(c);
  }

  public void hide(){}

}

Puedes adaptar la clase MediaController de varias maneras. Todo lo que queremos hacer es evitar que se oculte automáticamente después de tres segundos anulando el método hide.

Sugerencia: Es posible que necesites modificar el tema que utiliza la aplicación para asegurarte de que el texto del controlador multimedia sea claramente visible.

Paso 3

Volviendo a tu clase de principal Activity, agrega una nueva variable de instancia:

1
2	private MusicController controller;

Vamos a configurar el controlador más de una vez en el ciclo de vida de la aplicación, así que hagámoslo en un método de ayuda. Agrega el siguiente fragmento de código a tu clase Activity:

1
2	private void setController(){
3	//set the controller up
4	}

Dentro del método, crea una instancia del controlador:

1
2	controller = new MusicController(this);

Puedes configurar varios aspectos de la instancia de MediaController. Por ejemplo, necesitaremos determinar qué sucederá cuando el usuario presione los botones anterior / siguiente. Después de crear instancias del controlador, estos receptores hacen clic:


controller.setPrevNextListeners(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
    playNext();
  }
}, new View.OnClickListener() {
  @Override
  public void onClick(View v) {
    playPrev();
  }
});

Implementaremos playNext y playPrev un poco más tarde, así que por el momento simplemente ignora los errores. Aún dentro del método setController, configura el controlador para trabajar en la reproducción de medios en la aplicación, con su vista de anclaje refiriéndose a la lista que incluimos en el diseño:

1
2	controller.setMediaPlayer(this);
3	controller.setAnchorView(findViewById(R.id.song_list));
4	controller.setEnabled(true);

De vuelta en onCreate, llama al método:

1
2	setController();

También lo llamaremos en otro lugar de la clase más tarde.

2. Implementar el control de reproducción

Paso 1

Recuerda que la reproducción de medios está ocurriendo en la clase Service, pero la interfaz de usuario proviene de la clase Activity. En el tutorial anterior, vinculamos la instancia Activity a la instancia Service, de modo que pudiéramos controlar la reproducción desde la interfaz del usuario. Se invocarán los métodos de nuestra clase Activity que agregamos para implementar la interfaz MediaPlayerControl cuando el usuario intente controlar la reproducción. Necesitaremos la clase Service para actuar sobre este control, por lo tanto, abre tu clase Service para agregarle algunos métodos más:


public int getPosn(){
  return player.getCurrentPosition();
}

public int getDur(){
  return player.getDuration();
}

public boolean isPng(){
  return player.isPlaying();
}

public void pausePlayer(){
  player.pause();
}

public void seek(int posn){
  player.seekTo(posn);
}

public void go(){
  player.start();
}

Todos estos métodos se aplican a las funciones de control de reproducción estándar que el usuario esperará.

Paso 2

Ahora agreguemos métodos a la clase Service para saltar a las pistas Siguiente y Anterior. Comienza con la función Anterior:


public void playPrev(){
  songPosn--;
  if(songPosn&lt;0) songPosn=songs.size()-1;
  playSong();
}

Disminuimos la variable del índice de la canción, verificamos que no hemos salido del rango de la lista y llamamos al método playSong que agregamos. Ahora agrega el método para saltar a la siguiente pista:


//skip to next
public void playNext(){
  songPosn++;
  if(songPosn&gt;=songs.size()) songPosn=0;
  playSong();
}

Esto es análogo al método para reproducir la pista anterior en este momento, pero modificaremos este método más adelante para implementar la funcionalidad de reproducción aleatoria.

Paso 3

Ahora vuelve a tu clase Activity para que podamos hacer uso de estos métodos. Primero agrega los métodos que llamamos cuando configuramos el controlador:


//play next
private void playNext(){
  musicSrv.playNext();
  controller.show(0);
}

//play previous
private void playPrev(){
  musicSrv.playPrev();
  controller.show(0);
}

Llamamos a los métodos que agregamos a la clase Service. Vamos a agregar más código a estos más adelante para encargarnos de situaciones particulares. Ahora veamos los métodos de interfaz MediaPlayerControl, que serán llamados por el sistema durante la reproducción y cuando el usuario interactúa con los controles. Estos métodos ya deberían estar en tu clase Activity, por lo que solo modificaremos su implementación.

Comienza con el método canPause, estableciéndolo en true:


@Override
public boolean canPause() {
  return true;
}

Ahora haz lo mismo con los métodos canSeekBackward y canSeekForward:


@Override
public boolean canSeekBackward() {
  return true;
}

@Override
public boolean canSeekForward() {
  return true;
}

Puedes dejar los métodos getAudioSessionId y getBufferPercentage tal como están. Modifica el método getCurrentPosition de la siguiente manera:


@Override
public int getCurrentPosition() {
  if(musicSrv!=null &amp;&amp; musicBound &amp;&amp; musicSrv.isPng())
    return musicSrv.getPosn();
  else return 0;
}

Las pruebas condicionales son para evitar varias excepciones que pueden ocurrir al usar las clases MediaPlayer y MediaController. Si intentas mejorar la aplicación de alguna manera, es probable que descubras que debes seguir estos pasos, ya que las clases de reproducción multimedia arrojan muchas excepciones. Ten en cuenta que llamamos al método getPosn de la clase Service.

Modifica el método getDuration de manera similar:


@Override
public int getDuration() {
  if(musicSrv!=null &amp;&amp; musicBound &amp;&amp; musicSrv.isPng())
    return musicSrv.getDur();
  else return 0;
}

Modifica el método isPlaying invocando el método isPng de nuestra clase Service:


@Override
public boolean isPlaying() {
  if(musicSrv!=null &amp;&amp; musicBound)
    return musicSrv.isPng();
  return false;
}

Haz lo mismo con los métodos de pause, seekTo y start:


@Override
public void pause() {
  musicSrv.pausePlayer();
}

@Override
public void seekTo(int pos) {
  musicSrv.seek(pos);
}

@Override
public void start() {
  musicSrv.go();
}

3. Maneja la navegación de regreso a la aplicación

Paso 1

Recuerda que vamos a continuar la reproducción incluso cuando el usuario navega fuera de la aplicación. Para facilitar esto, mostraremos una notificación que muestra el título de la pista que se está reproduciendo. Al hacer clic en la notificación, el usuario volverá a la aplicación. Vuelve a tu clase Service y agrega las siguientes importaciones adicionales:

1
2	import java.util.Random;
3	import android.app.Notification;
4	import android.app.PendingIntent;

Ahora ve al método onPrepared, en el que actualmente simplemente comenzamos la reproducción. Después de la llamada a player.start (), agrega el siguiente código:


Intent notIntent = new Intent(this, MainActivity.class);
notIntent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
PendingIntent pendInt = PendingIntent.getActivity(this, 0,
  notIntent, PendingIntent.FLAG_UPDATE_CURRENT);

Notification.Builder builder = new Notification.Builder(this);

builder.setContentIntent(pendInt)
  .setSmallIcon(R.drawable.play)
  .setTicker(songTitle)
  .setOngoing(true)
  .setContentTitle(&quot;Playing&quot;)
  .setContentText(songTitle);
Notification not = builder.build();

startForeground(NOTIFY_ID, not);

Añadiremos las variables faltantes a continuación. La clase PendingIntent llevará al usuario a la clase principal Activity cuando seleccionen la notificación. Agrega variables para el título de la canción y el ID de notificación en la parte superior de la clase:

1
2	private String songTitle="";
3	private static final int NOTIFY_ID=1;

Ahora necesitamos establecer el título de la canción, en el método playSong, después de la línea en la que recuperamos la canción de la lista (Song playSong = songs.get(songPosn);):

1
2	songTitle=playSong.getTitle();

Como hemos llamado a setForeground en la notificación, debemos asegurarnos de detenerlo cuando se destruya la instancia Service. Anula el siguiente método:


@Override
public void onDestroy() {
  stopForeground(true);
}

4. Reproducción aleatoria

Paso 1

Recuerda que agregamos un botón para mezclar, así que vamos a implementarlo ahora. Primero agrega nuevas variables de instancia a la clase Service:

1
2	private boolean shuffle=false;
3	private Random rand;

Crea una instancia del generador de números aleatorios en onCreate:

1
2	rand=new Random();

Ahora agrega un método para establecer el indicador de reproducción aleatoria:


public void setShuffle(){
  if(shuffle) shuffle=false;
  else shuffle=true;
}

Simplemente activaremos y desactivaremos la configuración aleatoria. Comprobaremos este indicador cuando el usuario salte a la siguiente pista o cuando una pista finalice y comience la siguiente. Modifica el método playNext de la siguiente manera:


public void playNext(){
  if(shuffle){
    int newSong = songPosn;
    while(newSong==songPosn){
      newSong=rand.nextInt(songs.size());
    }
    songPosn=newSong;
  }
  else{
    songPosn++;
    if(songPosn&gt;=songs.size()) songPosn=0;
  }
  playSong();
}

Si la bandera de reproducción aleatoria está activada, elegimos una nueva canción de la lista al azar, asegurándonos de no repetir la última canción reproducida. Puedes mejorar esta funcionalidad utilizando una cola de canciones y evitando que se repita cualquier canción hasta que se hayan reproducido todas las canciones.

Paso 2

Ahora podemos dejar que el usuario seleccione la función de reproducción aleatoria. Vuelve a tu clase principal Activity en el método onOptionsItemSelected, modifica la sección de la acción de mezcla para llamar al nuevo método que agregamos a la clase Service:

1
2	case R.id.action_shuffle:
3	musicSrv.setShuffle();
4	break;

Ahora el usuario podrá usar el elemento del menú para alternar la funcionalidad de mezcla.

5. Colocar en orden

Paso 1

Ya casi hemos terminado, pero aún necesitamos agregar algunos bits de procesamiento para encargarnos de ciertos cambios, como que el usuario salga de la aplicación o pause la reproducción. En tu clase Activity, agrega un par de variables de instancia más:

1
2	private boolean paused=false, playbackPaused=false;

Las utilizaremos para hacer frente al usuario que vuelve a la aplicación después de abandonarla e interactúa con los controles cuando la reproducción está pausada. Anula OnPause para establecer uno de estos indicadores:


@Override
protected void onPause(){
  super.onPause();
  paused=true;
}

Ahora anula onResume:


@Override
protected void onResume(){
  super.onResume();
  if(paused){
    setController();
    paused=false;
  }
}

Esto asegurará que el controlador se muestre cuando el usuario regrese a la aplicación. Anula onStop para ocultarlo:


@Override
protected void onStop() {
  controller.hide();
  super.onStop();
}

Paso 2

Si el usuario interactúa con los controles mientras la reproducción está en pausa, el objeto MediaPlayer puede comportarse de manera impredecible. Para hacer frente a esto, configuraremos y usaremos el indicador playbackPaused. Primero modifica los métodos playNext y playPrev:


private void playNext(){
  musicSrv.playNext();
  if(playbackPaused){
    setController();
    playbackPaused=false;
  }
  controller.show(0);
}

private void playPrev(){
  musicSrv.playPrev();
  if(playbackPaused){
    setController();
    playbackPaused=false;
  }
  controller.show(0);
}

Restablecemos el controlador y actualizamos el indicador playbackPaused cuando la reproducción ha sido pausada. Ahora haz cambios similares al método playSong:


public void songPicked(View view){
  musicSrv.setSong(Integer.parseInt(view.getTag().toString()));
  musicSrv.playSong();
  if(playbackPaused){
    setController();
    playbackPaused=false;
  }
  controller.show(0);
}

Ahora configura playbackPaused en true en el método pause:


@Override
public void pause() {
  playbackPaused=true;
  musicSrv.pausePlayer();
}

Al trabajar con las clases MediaPlayer y MediaController, encontrarás que este tipo de procesamiento es un requisito necesario para evitar errores. Por ejemplo, a veces encontrarás que la barra de búsqueda del controlador no se actualiza hasta que el usuario interactúa con ella. Estos recursos se comportan de manera diferente en diferentes niveles de API, por lo que es esencial realizar pruebas y modificaciones exhaustivas si planeas lanzar tu aplicación al público. La aplicación que estamos creando en esta serie es realmente solo una base.

Paso 3

Tomemos algunos pasos finales para que la aplicación se comporte de forma coherente. De regreso en la clase Service, modifica el método onError:


@Override
public boolean onError(MediaPlayer mp, int what, int extra) {
  mp.reset();
  return false;
}

Simplemente reiniciamos el reproductor, pero por supuesto puedes desear mejorar este enfoque.

El método onCompletion se activará cuando finalice una pista, incluidos los casos en que el usuario haya elegido una nueva pista o salteado a las pistas siguiente / anterior, así como cuando la pista llegue al final de su reproducción. En este último caso, queremos continuar la reproducción tocando la siguiente pista. Para hacer esto, necesitamos verificar el estado de la reproducción. Cambia tu método onCompletion:


@Override
public void onCompletion(MediaPlayer mp) {
  if(player.getCurrentPosition()&gt;0){
    mp.reset();
    playNext();
  }
}

Llamamos al método playNext si la pista actual ha llegado a su fin.

Consejo: Para asegurarte de que tu aplicación no interfiera con otros servicios de audio en el dispositivo del usuario, debes mejorarla para manejar el enfoque de audio con elegancia. Haz que la clase Service implemente la interfaz AudioManager.OnAudioFocusChangeListener. En el método onCreate, crea una instancia de la clase AudioManager y llama requestAudioFocus en ella. Finalmente, implementa el método onAudioFocusChange en tu clase para controlar lo que debería suceder cuando la aplicación gane o pierda el foco de audio. Consulta la sección de Enfoque de audio en la Guía del desarrollador para obtener más detalles.

¡Esa es la aplicación básica completa! Sin embargo, es posible que necesites llevar a cabo mejoras adicionales para que funcione de manera confiable en todos los dispositivos de usuario y niveles de API. Los controles deberían aparecer siempre que interactúes con la aplicación.

La notificación debería permitirte regresar a la aplicación mientras continúa la reproducción.

Conclusión

Ahora hemos completado el reproductor de música básico para Android. Hay muchas maneras en que puedes mejorar la aplicación, como agregar soporte para transmisión de medios, video, enfoque de audio y proporcionar diferentes métodos para interactuar con las pistas de música en el dispositivo. Veremos algunas de estas mejoras en futuros tutoriales, describiendo cómo puedes agregarlos a la aplicación o a otros proyectos de reproducción multimedia. Mientras tanto, fíjate si puedes extender la aplicación para crear funcionalidades adicionales o mejorar la confiabilidad en diferentes dispositivos. Consulta la sección Reproducción de medios en la Guía del desarrollador de Android y así obtener más información.

1
2	public int getPosn(){
3	return player.getCurrentPosition();
4	}
5
6	public int getDur(){
7	return player.getDuration();
8	}
9
10	public boolean isPng(){
11	return player.isPlaying();
12	}
13
14	public void pausePlayer(){
15	player.pause();
16	}
17
18	public void seek(int posn){
19	player.seekTo(posn);
20	}
21
22	public void go(){
23	player.start();
24	}