Ang Android platform ay nagbibigay ng mga napagkukuhanan para sa pangangasiwa ng media playback, kung saan ay maaring gamitin ng iyong apps upang makalikha ng interface sa pagitan ng user at ng kanyang music files. Sa mga serye ng pagtuturong ito, tayo ay lilikha ng basic music player application para sa Android. Ang app ay maglalahad ng listahan ng mga kanta sa user device, para ang user ay makapili ng mga kanta na patutugtugin. Ang app din ay maglalahad ng mga kontrol para sa pag-ugnay sa playback at magpapatuloy ng pagtugtog kahit ang user ay lumayo sa app, may abiso na ipinapakita kahit ang playback ay lumampas na.

Panimula

Pagbuo ng music player ay kabilang gamit ang ContentResolver klase upang makuhang muli ang mga tracks sa device, MediaPlayer upang patugtugin ang audio at MediaController upang kontrolin ang playback. Gagamit din tayo ng Service instance para patugtugin ang audio kung ang user ay hindi direktang nakikipag-ugnayan sa app. Dapat mong makumpleto ang mga serye na ito kung ikaw ay isang intermediate Android developer, kaya’t kung ikaw ay nakabuo na ng ilan mga apps, kung gayon, ang mga seryeng ito ay hindi na dapat problema para sa iyo. Narito ang preview ng final app:

Sa pagtuturong ito, tayo ay lilikha ng app at uusisain ang user device para sa audio files gamit ang ContentResolver at Cursor mga class. Sa susunod na parte, tayo ay gagamit ng Adapter instance para i-presinta ang mga kanta na naka-list view, simula sa playback kapag ang user ay nag-tap sa isang bagay na nasa listahan. Sa huling yugto ng seryeng ito, gagamit tayo ng MediaController upang mabigyan ang user ng kontrol sa playback, ipatupad ang mga function na lumaktaw nang pasulong at pabalik, at isama ang shuffle function. Pagkatapos ng seryeng ito, ating sisiyasatin ang iba pang aspeto ng media playback na makapag-papahusay pa ng app, gaya nang paghawak sa audio files, pag-presinta ng media files sa iba’t ibang paraan, at pagpapatugtog ng streaming media.

1. Paglikha at Pag-configure ng Bagong Proyekto

Hakbang 1

Paglikha ng bagong Proyekto pang Android. Kung ikaw ay gumagamit ng Eclipse, kung gayon ay hayaan ang IDE (Integrated Development Environment) lumikha ng pangunahing Activity class at layout file para sa iyo. Para sa ibang code na ginamit sa seryeng ito, kakailanganin mo ang pinakamababang API level na 16, dahil dito kakailanganin mong magdagdag ng ilan hakbang upang suportahan ang mga lumang bersiyon. Kapag nalikha na ang iyong proyekto, buksan ang project’s Manifest file. Sa loob ng manifest element, idagdag ang mga sumusunod na permiso:

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

Gagamitin natin ang permisong ito upang ang music playback ay magpatuloy kahit na ang user’s device ay nakatigil. Ang iyong Manipesto ay dapat na naglalaman ng elemento para sa iyong pangunahing Activity class. Idagdag ang mga sumusunod na katangian sa activity element para i-set ang screenOrientation at launchMode:

<activity
  android:name="com.example.musicplayer.MainActivity"
  android:label="@string/app_name"
  android:launchMode="singleTop"
  android:screenOrientation="portrait" >

Pananatilihin natin ang portrait orientation upang ito’y manatiling simple lamang. Ang launchmode ay gagabay para sa proseso ng pag-navigate pabalik sa app pagkatapos lumayo dito.  Tayo ay magpapakita ng abiso na nagpapakita ng kanta na kasalukuyang pinatutugtog, Pagtuktok sa abiso ay ibabalik ang user sa app. Tayo rin ay gagamit ng Service class para sa music playback. Idagdag ang mga sumusunod na linya sa manipesto ng proyekto sa loob ng application element pagkatapos ng the activity element:

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

Baguhin ang pangalan ng package na angkop sa pansarili at palitan ang class name kung nais mo.

Hakbang 2

Buksan ang pangunahing layout file ng proyekto at palitan ang nilalaman nito ng mga sumusunod na layout:

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:background="#FF330000"
  tools:context=".MainActivity" >

  <ListView
    android:id="@+id/song_list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >
  </ListView>

</LinearLayout>

Siguruhin na baguhin ang tools:context attributes kung ang iyong pangunahing Activity class ay pinangalanang naiiba. Kabilang sa layout ang ListView kung saan ay ating i-pepresinta ang listahan ng mga kanta.

Ating ibibilang ang dalawang menu items para sa toggling ng shuffle function at para sa pag-exit ng app. Buksan ang iyong pangunahing menu file (res/menu/main.xml)  at palitan ang nilalaman nito ng mga sumusunod:

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

  <item
    android:id="@+id/action_shuffle"
    android:icon="@drawable/rand"
    android:orderInCategory="1"
    android:showAsAction="always"
    android:title="Shuffle"/>

  <item
    android:id="@+id/action_end"
    android:icon="@drawable/end"
    android:orderInCategory="2"
    android:showAsAction="always"
    android:title="End"/>

</menu>

Kung gusto mo, maari mong itago ang title strings sa res/values/strings.xml file. Ang dalawang items ay tumutukoy sa drawable files.  Lumikha ng pansarili o gamitin ang dalawang imahe na ito bilang panimula.

Gagamit din tayo ng icon para ipakita sa playback notification. Lumikha ng isa ngayon o gamitin ang isang ito na nasa ilalim:

Ang code ay sasangguni sa larawan gamit ang pangalang rand, end, at play kung kaya’t siguruhin na ginagamit mo ang parehas na file names. Kopyahin ang imahe sa iyong project’s drawables folder (s).  Aming ipatutupad ang aksyon mamaya.

2. Usisain ang device para sa mga kanta

Hakbang 1

Ating usisain ang user’s device para sa audio files. Una, magdagdag ng new class sa iyong proyekto, pangalanan itong Song. Gagamitin natin ang class na ito upang maging modelo ang data para sa isang solong audio file. Sa loob ng class declaration, magdagdag ng tatlong instance variables para sa data na gusto nating itago para sa bawat track:

private long id;
private String title;
private String artist;

Sunod, magdagdag ng constructor method kung saan ay magbibigay ng halimbawa ang instance variables:

public Song(long songID, String songTitle, String songArtist) {
  id=songID;
  title=songTitle;
  artist=songArtist;
}

Sa wakas, magdagdag ng get methods para sa instance variables:

public long getID(){return id;}
public String getTitle(){return title;}
public String getArtist(){return artist;}

Kung plano mo na gumamit pa ng mas maraming track information, kung gayon ay libre kang makapag-dadagdag ng mga karagdagang instance variables sa class.

Hakbang 2

Buksan ang pangunahing Activity class at magdagdag ng mga sumusunod na imports:

import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import android.net.Uri;
import android.content.ContentResolver;
import android.database.Cursor;
import android.widget.ListView;

Ideklara ang mga sumusunod na instance variables bago ang onCreate method:

private ArrayList<Song> songList;
private ListView songView;

Ating itatago ang mga kanta sa isang listahan at ipapakita sila sa the ListView instance sa main layout. Sa onCreate, pagkatapos ng pag-set ng content view, kuhanin ang ListView instance gamit ang ID na binigay namin sa main layout:

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

Bigyan halimbawa ang listahan gaya ng ipinapakita sa ibaba:

songList = new ArrayList<Song>();

Sunod, sa pangunahing Activity class declaration, pagkatapos ng existing methods, lumikha ng helper method upang makuhang muli ang audio file information:

public void getSongList() {
  //retrieve song info
}

Sa loob ng method na ito, lumikha ng ContentResolver instance, kunin muli ang URI para sa external music files, at lumikha ng Cursor instance gamit ang ContentResolver instance upang usisain ang music files:

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

Ngayon ay maari nating ulitin ang mga resulta, una tignan na mayroon tayong valid data:

if(musicCursor!=null && musicCursor.moveToFirst()){
  //get columns
  int titleColumn = musicCursor.getColumnIndex
    (android.provider.MediaStore.Audio.Media.TITLE);
  int idColumn = musicCursor.getColumnIndex
    (android.provider.MediaStore.Audio.Media._ID);
  int artistColumn = musicCursor.getColumnIndex
    (android.provider.MediaStore.Audio.Media.ARTIST);
  //add songs to list
  do {
    long thisId = musicCursor.getLong(idColumn);
    String thisTitle = musicCursor.getString(titleColumn);
    String thisArtist = musicCursor.getString(artistColumn);
    songList.add(new Song(thisId, thisTitle, thisArtist));
  }
  while (musicCursor.moveToNext());
}

Atin munang  kunin muli ang column indexes para sa data items kung saan ay interesado tayo para sa bawat kanta, pagkatapos ay gamitin natin ito upang lumikha ng new Song object at idagdag ito sa listahan, bago ipagpatuloy ang pag-loop sa mga resulta.

Balik muli sa onCreate, pagkatapos ng idinagdag na code, tawagin itong new method:

getSongList();

3. Ipakita ang mga kanta

Hakbang 1

Ngayon ay maari na nating ipakita ang listahan ng mga kanta sa user interface. Sa the onCreate method, pagkatapos tawagin ang helper method na ating nilikha kanina lamang, ating isaayos ang data para ang mga kanta ay mai-presenta ng ayon sa alpabeto:

Collections.sort(songList, new Comparator<Song>(){
  public int compare(Song a, Song b){
    return a.getTitle().compareTo(b.getTitle());
  }
});

Gagamitin natin ang title variable sa Song class, gamit ang get methods na ating idinagdag, upang ipatupad ang compare method, pagsasa-ayos ng mga kanta ayon sa pamagat.

Hakbang 2

Ating tukuyin ang layout na kumakatawan sa bawat kanta na nasa listahan. Magdagdag ng new file sa iyong project’s res/layout folder, pangalanan itong song.xml at ipasok ang mga sumusunod:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:onClick="songPicked"
  android:orientation="vertical"
  android:padding="5dp" >

  <TextView
    android:id="@+id/song_title"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#FFFFFF99"
    android:textSize="20sp"
    android:textStyle="bold" />

  <TextView
    android:id="@+id/song_artist"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#FFFFFF99"
    android:textSize="18sp" />

</LinearLayout>

Huwag mag-atubiling baguhin ang layout na angkop sa iyong mga kagustuhan. Bawat kanta na nasa listahan ay maipapakita ayon sa pamagat at artist text strings, kung kaya’t gagamitin natin ang TextViews upang ipakita ang data na ito. Pansinin na ang the LinearLayout opening tag lists ay isang onClick attribute. Gagamitin natin ang method na ito sa pangunahing Activity class upang tumugon sa user taps sa mga kanta na nasa listahan, pagpapatugtog ng kanta ay kumakatawan sa pamamagitan ng list item na na-tap.

Hakbang 3

Gagamit tayo ng isang Adapter upang mabalangkas ang mga kanta sa list view. Magdagdag ng new class sa iyong app, pangalanan itong SongAdapter o ibang pangalan na iyong ibig. Kapag maglilikha ng class, bigyan ito ng superclass android.widget.BaseAdapter. Dapat isingit ng Eclipse ang mga sumusunod na outline:

public class SongAdapter extends BaseAdapter {

  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    return 0;
  }

  @Override
  public Object getItem(int arg0) {
    // TODO Auto-generated method stub
    return null;
  }

  @Override
  public long getItemId(int arg0) {
    // TODO Auto-generated method stub
    return 0;
  }

  @Override
  public View getView(int arg0, View arg1, ViewGroup arg2) {
    // TODO Auto-generated method stub
    return null;
  }

}

Kakailanganin mong magdagdag ng mga sumusunod na imports:

import java.util.ArrayList;
import android.content.Context;
import android.view.LayoutInflater;
import android.widget.LinearLayout;
import android.widget.TextView;

Sa loob ng class declaration, ideklara ang mga sumusunod na instance variables:

private ArrayList<Song> songs;
private LayoutInflater songInf;

Ating ipapasa ang song list mula sa main Activity class at gamitin ang LayoutInflater upang balangkasin ang pamagat at artist strings sa the TextViews sa song layout na ating nilikha.

Pagkatapos ng instance variables, bigyan ang adapter ng constructor method upang bigyang halimbawa sila:

public SongAdapter(Context c, ArrayList<Song> theSongs){
  songs=theSongs;
  songInf=LayoutInflater.from(c);
}

Baguhin ang nilalaman ng getCount method upang maibalik ang sukat ng listahan:

@Override
public int getCount() {
  return songs.size();
}

Maari mong iwan ang getItem at getItemId methods na hindi nagalaw. I-update ang pagpapatupad ng getView method gaya ng ipinapakita sa ibaba:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
  //map to song layout
  LinearLayout songLay = (LinearLayout)songInf.inflate
      (R.layout.song, parent, false);
  //get title and artist views
  TextView songView = (TextView)songLay.findViewById(R.id.song_title);
  TextView artistView = (TextView)songLay.findViewById(R.id.song_artist);
  //get song using position
  Song currSong = songs.get(position);
  //get title and artist strings
  songView.setText(currSong.getTitle());
  artistView.setText(currSong.getArtist());
  //set position as tag
  songLay.setTag(position);
  return songLay;
}

Ating isi-net ang pamagat at artist text sa pamamagitan ng pagkuhang muli ng tamang Song instance mula sa listahan gamit ang position index, pagbalangkas ng mga strings na ito sa views idinagdag natin sa song layout file. Atin din isi-net ang posisyon bilang ang view tag, kung saan ay maari natin patugtugin ang tamang kanta kapag ang user ay nag-click ng item sa listahan. Tandaan na ang the song.xml layout file ay kasama ang onClick attribute. Ating gagamitin ang method na naka-lista doon upang makuhang muli ang tag sa Activity.

Hakbang 3

Balik muli sa main Activity class, sa onCreate method pagkatapos ng pagsasa-ayos ng listahan, lumikha ng new instance ng Adapter class at i-set ito sa Listview:

SongAdapter songAdt = new SongAdapter(this, songList);
songView.setAdapter(songAdt);

Kapag ni-run mo na ang app, dapat nitong i-presenta ang listahan ng mga kanta sa device, sa pag-click sa kanila ay magdudulot sa app na pagbubukod sa sandaling iyon, ngunit ating ipatutupad ang click handler sa susunod na pagtuturo.

Konklusyon

Atin nang isi-net ang app hanggang sa pagbasa ng mga kanta mula sa user device. Sa susunod na parte, ating sisimulan ang playback kapag ang user ay pumili ng kanta gamit ang MediaPlayer class. Ating ipatutupad ang playback gamit ang Service class upang ito ay magpatuloy habang ang user ay gumagamit ng ibang apps. Sa wakas, gagamit tayo ng MediaController class upang mabigyan ang user ng control sa playback.