50% off 500 themes & digital assets.

Save Now 

Advertisement

CODE > ANDROID SDK

Crea un Reproductor de Música en Android: Con guración

del Proyecto
by Sue Smith 12 Mar 2014
Di culty: Beginner Length: Long Languages: Español

Android SDK Mobile Development



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

La plataforma Android provee recursos para manipular la reproducción de archivos multimedia, que pueden ser
utilizados por tu app para crear una interfaz entre el usuario y sus archivos de música. En esta serie de tutoriales,
crearemos un reproductor de música básico para Android. Nuestra app presentará una lista de canciones en el
dispositivo del usuario, para que pueda seleccionarlas y reproducirlas. Además, la app tendrá controles para
interactuar con la reproducción, la cual continuará cuando el usuario salga de la aplicación, mostrando una
noti cación mientras la reproducción continúe.

Introducción
El desarrollo del reproductor de música involucra el uso de la clase ContentResolver para obtener las pistas
almacenadas en el dispositivo, la clase MediaPlayer para reproducir audio, y la clase MediaController para controlar
la reproducción. También haremos uso de una instancia de Service para reproducir audio cuando el usuario no esté
interactuando directamente con la app. Deberías ser capaz de completar esta serie si eres un desarrollador Android
de nivel intermedio, por lo cual, si ya has desarrollado algunas aplicaciones, esta serie no debería resultarte un
problema. Aquí tenemos una previsualización de la app nal:
En este tutorial, crearemos la app y buscaremos pistas de audio en el dispositivo del usuario, utilizando las clases
ContentResolver y Cursor . En la próxima parte, usaremos una instancia de Adapter para presentar las canciones en
una lista, y comenzar la reproducción cuando el usuario toque un ítem de la lista. En la parte nal de esta serie,
utilizaremos la clase MediaController para darle control de la reproducción al usuario, implementar funciones para
saltar la reproducción hacia adelante y hacia atrás, e incluir la función de reproducir de manera aleatoria. Luego de
esta serie, exploraremos otros aspectos de la reproducción multimedia que pueden mejorar la app, como manejar el
foco del audio, presentar archivos multimedia de diferentes formas, y reproducir multimedia vía streaming.

1. Crear y Con gurar un Proyecto Nuevo

Paso 1
Crea un nuevo proyecto Android. Si estás usando Eclipse, deja que el IDE (Entorno de Desarrollo Integrado) cree una
Activity principal y un archivo de layout por tí. Para parte del código que usaremos en esta serie, necesitarás como
mínimo API 16, por lo cual tendrás que efectuar pasos adicionales para soportar versiones más antiguas. Una vez
creado tu proyecto, abre el archivo Manifest. Dentro del elemento manifest , agrega el siguiente permiso:

1 <uses-permission android:name="android.permission.WAKE_LOCK" />

Utilizaremos este permiso para lograr que la música continúes reproduciéndose cuando el dispositivo esté inactivo.
Tu Manifest ya debería contener un elemento para tu Activity principal. Añade los siguientes atributos al elemento
activity para con gurar screenOrientation y launchMode :

1 <activity
2   android:name="com.example.musicplayer.MainActivity"
3   android:label="@string/app_name"
4   android:launchMode="singleTop"
5   android:screenOrientation="portrait" >
Nos apegaremos a la orientación vertical para ganar en simplicidad. El launchMode auxiliará el proceso de navegación
de vuelta a la app luego de haberla pasado a segundo plano. Mostraremos una noti cación indicando la canción que
está siendo reproducida; al tocar la noti cación, el usuario será redirigido a la app. Además, utilizaremos un Service

para la reproducción de música. Agrega la siguiente línea al Manifest del proyecto, dentro del elemento application ,
y luego del elemento activity :

1 <service android:name="com.example.musicplayer.MusicService" />

Modi ca el nombre del paquete para que se ajuste al tuyo, y cambia el nombre de la clase si así lo deseas.

Paso 2
Abre el archivo principal de layout de tu proyecto y reemplaza su contenido por el siguiente layout:

01 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
02   xmlns:tools="http://schemas.android.com/tools"
03   android:layout_width="fill_parent"
04   android:layout_height="fill_parent"
05   android:orientation="vertical"
06   android:background="#FF330000"
07   tools:context=".MainActivity" >
08  
09   <ListView
10     android:id="@+id/song_list"
11     android:layout_width="fill_parent"
12     android:layout_height="wrap_content" >
13   </ListView>
14  
15 </LinearLayout>

Asegúrate de alterar el atributo tools:context si tu Activity principal tiene otro nombre. El layout incluye una
ListView en la cual presentaremos el listado de canciones.

Ahora agregaremos dos ítems al menú para activar y desactivar la función de reproducción aleatoria, y para salir de la
aplicación. Abre tu archivo principal de menú (res/menu/main.xml) y reemplaza su contenido con lo siguiente:

01 <menu xmlns:android="http://schemas.android.com/apk/res/android" >

02  
03   <item
04     android:id="@+id/action_shuffle"
05     android:icon="@drawable/rand"
06     android:orderInCategory="1"
07     android:showAsAction="always"
08     android:title="Shuffle"/>
09  
10   <item
11     android:id="@+id/action_end"
12     android:icon="@drawable/end"
13     android:orderInCategory="2"
14     android:showAsAction="always"
15     android:title="End"/>
16  
17 </menu>

Si pre eres, puedes almacenar los strings de los títulos en el archivo res/values/strings.xml. Estos dos ítems se
re eren a archivos drawable. Crea uno propio, o emplea estas dos imágenes para comenzar:
También utilizaremos un ícono para mostrar en la noti cación de reproducción. Crea uno ahora, o utiliza el que se
muestra aquí debajo:

El código se referirá a estas imágenes mediante los nombres rand, end, y play, por lo que debes asegurarte de usar
los mismos nombres de archivo. Copia las imágenes en la(s) carpeta(s) de archivos drawable de tu proyecto.
Implementaremos estas acciones más tarde.

2. Busca Canciones en el Dispositivo

Paso 1
Ahora, vamos a buscar archivos de audio en el dispositivo del usuario. Primero, agrega una nueva clase a tu proyecto,
y llámala Song . Usaremos esta clase para modelar la data de un único archivo de audio. Dentro de la declaración de
la clase, agrega tres variables de instancia para los datos que deseamos guardar de cada pista:

1 private long id;

2 private String title;
3 private String artist;

Luego, añade un método constructor en el cual instanciaremos las variables de instancia:

1 public Song(long songID, String songTitle, String songArtist) {

2   id=songID;
3   title=songTitle;
4   artist=songArtist;
5 }

Finalmente, agrega métodos get para estas variables de instancia:

1 public long getID(){return id;}

2 public String getTitle(){return title;}
3 public String getArtist(){return artist;}

Si planeas utilizar más información de las pistas, siéntete libre de agregar variables de instancia adicionales a la
clase.

Paso 2
Abre la Activity principal y agrega las siguientes sentencias de importación:

1 import java.util.ArrayList;
2 import java.util.Collections;
3 import java.util.Comparator;
4 import android.net.Uri;
5 import android.content.ContentResolver;
6 import android.database.Cursor;
7 import android.widget.ListView;

Declara las siguientes variables de instancia antes del método onCreate :

1 private ArrayList<Song> songList;

2 private ListView songView;
Almacenaremos las canciones en una lista y las mostraremos en la instancia de ListView en el layout principal. En
onCreate , luego de declarar la vista contenedora, debes obtener la instancia de ListView usando el ID que le dimos
en el layout principal.

1 songView = (ListView)findViewById(R.id.song_list);

Instancia la lista como se muestra a continuación:

1 songList = new ArrayList<Song>();

Ahora, en la declaración de la Activity principal, luego de los métodos que ya existen, crea un método auxiliar para
obtener la información del archivo de audio:

1 public void getSongList() {

2   //retrieve song info
3 }

Dentro de este método, crea una instancia de ContentResolver , obtén la URI para los archivos de audio externos, y
crea una instancia de Cursor usando la instancia de ContentResolver para buscar los archivos de música:

1 ContentResolver musicResolver = getContentResolver();

2 Uri musicUri = android.provider.MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
3 Cursor musicCursor = musicResolver.query(musicUri, null, null, null, null);

Ahora podemos iterar los resultados, primero chequeando que tenemos datos válidos:

01 if(musicCursor!=null && musicCursor.moveToFirst()){

02   //get columns
03   int titleColumn = musicCursor.getColumnIndex
04     (android.provider.MediaStore.Audio.Media.TITLE);
05   int idColumn = musicCursor.getColumnIndex
06     (android.provider.MediaStore.Audio.Media._ID);
07   int artistColumn = musicCursor.getColumnIndex
08     (android.provider.MediaStore.Audio.Media.ARTIST);
09   //add songs to list
10   do {
11     long thisId = musicCursor.getLong(idColumn);
12     String thisTitle = musicCursor.getString(titleColumn);
13     String thisArtist = musicCursor.getString(artistColumn);
14     songList.add(new Song(thisId, thisTitle, thisArtist));
15   }
16   while (musicCursor.moveToNext());
17 }

Primero traemos los índices de columna para los ítems de datos que nos interesan de cada canción, luego los
usamos para crear un nuevo objeto Song y sumarlo a la lista, antes de continuar iterando los resultados.

De regreso al onCreate , luego del código que agregamos, invoca este nuevo método:

1 getSongList();

3. Muestra las Canciones

Paso 1
Ya podemos mostrar la lista de canciones en la interfaz de usuario En el método onCreate luego de llamar al
Ya podemos mostrar la lista de canciones en la interfaz de usuario. En el método onCreate , luego de llamar al
método auxiliar que creamos recién, ordenaremos los datos para que las canciones se presenten alfabéticamente:

1 Collections.sort(songList, new Comparator<Song>(){

2   public int compare(Song a, Song b){
3     return a.getTitle().compareTo(b.getTitle());
4   }
5 });

Utilizamos la variable title de la clase Song , mediante los métodos get que agregamos, para implementar un
método compare , que ordene las canciones por título.

Paso 2
Ahora, vamos a de nir un layout para representar cada canción de la lista. Crea un nuevo archivo dentro del directorio
res/layout de tu proyecto, nómbralo song.xml, y llénalo con lo siguiente:

01 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
02   xmlns:tools="http://schemas.android.com/tools"
03   android:layout_width="fill_parent"
04   android:layout_height="wrap_content"
05   android:onClick="songPicked"
06   android:orientation="vertical"
07   android:padding="5dp" >
08  
09   <TextView
10     android:id="@+id/song_title"
11     android:layout_width="fill_parent"
12     android:layout_height="wrap_content"
13     android:textColor="#FFFFFF99"
14     android:textSize="20sp"
15     android:textStyle="bold" />
16  
17   <TextView
18     android:id="@+id/song_artist"
19     android:layout_width="fill_parent"
20     android:layout_height="wrap_content"
21     android:textColor="#FFFFFF99"
22     android:textSize="18sp" />
23  
24 </LinearLayout>

Siéntete libre de modi car el layout para que se ajuste a tus preferencias. Cada canción de la lista estará
representada por su título y artista, por ende usaremos TextViews para mostrar estos datos. Notarás que la etiqueta
de apertura del LinearLayout contiene un atributo onClick . Emplearemos este método en la Activity principal para
responder a la selección de canciones del usuario en la lista, reproduciendo la canción representada por el ítem de la
lista que fue presionado.

Paso 3
Usaremos un Adapter para relacionar las canciones a la lista. Agrega una nueva clase a tu aplicación, llámala
SongAdapter o por un nombre a elección. Al crear la clase, dale la superclase android.widget.BaseAdapter . Eclipse
debería insertar la siguiente estructura:

01 public class SongAdapter extends BaseAdapter {

02  
03   @Override
04   public int getCount() {
05     // TODO Auto-generated method stub
06     return 0;
07   }
08  
09   @Override
10   public Object getItem(int arg0) {
11     // TODO Auto-generated method stub
12     return null;
 ;
13   }
14  
15   @Override
16   public long getItemId(int arg0) {
17     // TODO Auto-generated method stub
18     return 0;
19   }
20  
21   @Override
22   public View getView(int arg0, View arg1, ViewGroup arg2) {
23     // TODO Auto-generated method stub
24     return null;
25   }
26  
27 }

Tendrás que agregar las siguientes sentencias de importación:

1 import java.util.ArrayList;
2 import android.content.Context;
3 import android.view.LayoutInflater;
4 import android.widget.LinearLayout;
5 import android.widget.TextView;

Dentro de la declaración de la clase, declara las siguientes variables de instancia:

1 private ArrayList<Song> songs;

2 private LayoutInflater songInf;

Pasaremos la lista de canciones desde la Activity principal, y emplearemos el LayoutInflater para relacionar los
valores de título y artista a los TextViews del layout que hemos creado para la canción.

Luego de las variables de instancia, dale al adapter un método constructor para instanciarlas:

1 public SongAdapter(Context c, ArrayList<Song> theSongs){

2   songs=theSongs;
3   songInf=LayoutInflater.from(c);
4 }

Modi ca el contenido del método getCount para que retorne el tamaño de la lista:

1 @Override
2 public int getCount() {
3   return songs.size();
4 }

Puedes dejar los métodos getItem y getItemId sin tocar. Actualiza la implementación del método getView como se
muestra a continuación:

01 @Override
02 public View getView(int position, View convertView, ViewGroup parent) {
03   //map to song layout
04   LinearLayout songLay = (LinearLayout)songInf.inflate
05       (R.layout.song, parent, false);
06   //get title and artist views
07   TextView songView = (TextView)songLay.findViewById(R.id.song_title);
08   TextView artistView = (TextView)songLay.findViewById(R.id.song_artist);
09   //get song using position
10
11   Song currSong = songs.get(position);
12   //get title and artist strings
13   songView.setText(currSong.getTitle());
14   artistView.setText(currSong.getArtist());
15   //set position as tag
16   songLay.setTag(position);
 g y g(p );
17   return songLay;
}

Declaramos los textos de título y artista, tomando de la lista la instancia correcta de Song usando el índice de
posición, uniendo estos strings con las vistas que le añadimos al archivo de layout de la canción. También
establecemos la posición como la etiqueta de la vista, lo cual nos permitirá reproducir la canción correcta cuando el
usuario seleccione un ítem de la lista. Recuerda que el archivo de layout song.xml incluye un atributo onClick .
Usaremos el método allí listado para obtener la etiqueta en la Activity .

Easy Marketing Analytics

Easily access, transform and
visualize your marketing data.
Try a free trial today!

Advertisement

Paso 3
De vuelta en la Activity principal, en el método onCreate y luego de ordenar la lista, crea una nueva instancia de la
clase Adapter y con gúralo en la ListView .

1 SongAdapter songAdt = new SongAdapter(this, songList);

2 songView.setAdapter(songAdt);

Cuando corras la app, debería presentar el listado de canciones que hay en el dispositivo; en este momento, la
selección de alguna de ellas provocará que la app tire una excepción, pero implementaremos el manejo del click en el
próximo tutorial.

Conclusión
Ya hemos con gurado la aplicación para leer canciones del dispositivo del usuario. En la próxima parte,
comenzaremos la reproducción cuando el usuario seleccione una canción, utilizando la clase MediaPlayer .
Implementaremos la reproducción mediante la clase Service , para que continúe mientras el usuario interactúa con
otras apps. Finalmente, utilizaremos la clase MediaController para darle al usuario el control de la reproducción.
 Advertisement

Sue Smith

Technical writer (and sometimes developer) based in Glasgow, UK. Having worked with the Mozilla Foundation and
various online publications, I enjoy helping people to learn web and software development topics, regardless of their
existing skill level. Particular areas of interest include education technology and open source projects.

 BrainDeadAir

 FEED  LIKE  FOLLOW  FOLLOW

Weekly email summary

Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.

Email Address

Update me weekly
 Advertisement

Download Attachment

Translations

Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!

Translate this post

Powered by

0 Comments Mobiletuts+ 
1 Login

Sort by Best
 Recommend ⤤ Share

Start the discussion…

LOG IN WITH
OR SIGN UP WITH DISQUS ?

Name

Be the first to comment.

✉ Subscribe d Add Disqus to your siteAdd DisqusAdd 🔒 Privacy

Advertisement
 ENVATO TUTS+ 

JOIN OUR COMMUNITY 

HELP 

24,936 1,080 18,398

Tutorials Courses Translations

Envato.com Our products Careers

© 2017 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.

Follow Envato Tuts+