Audio Play List In Android

Introduction

As you can imagine a popular way to load music onto a cell phone will be via removable storage, such as an SD card. In part 1 of our media player tutorial we will build a simple media player that will allow the user to select a song from the SD card and play it.

Click here if you would like to download the source for this tutorial.

Note: there is a known issue with the Emulator where the mixer will cut in and out on some systems resulting in very choppy audio, hopefully this will be addressed in the next SDK release.

Layouts

This project only consists of one Activity, a ListActivity. So, for a ListActivity we need a ListView for the actual list, and another view that will be used for each item in the list. You can get fancy, but for this example we will just use a TextView to display the name of each file.

First, here is our ListView (songlist.xml):

1. <?xml version="1.0" encoding="UTF-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.         android:orientation="vertical"
4.         android:layout_width="fill_parent"
5.         android:layout_height="fill_parent">
6.  
7.     <ListView id="@id/android:list"
8.               android:layout_width="fill_parent"
9.               android:layout_height="fill_parent"
10.               android:layout_weight="1"
11.               android:drawSelectorOnTop="false"/>
12.  
13.     <TextView id="@id/android:empty"
14.               android:layout_width="fill_parent"
15.               android:layout_height="fill_parent"
16.               android:text="No songs found on SD Card."/>
17. </LinearLayout>

Very standard ListView. The TextView entry will display when there are no items in the ListView because it's using the built-in id of "@id/android:empty".

And for each file here is the TextView to be used (song_item.xml):

1. <?xml version="1.0" encoding="utf-8"?>
2. <TextView id="@+id/text1" xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="wrap_content"
4.     android:layout_height="wrap_content"/>

Again, very basic, shouldn't be anything you haven't seen before.

You may be thinking, why does the screenshot above show a black ListView, when nothing in these layouts mentions color? Well, that is determined by the "theme" in the AndroidManifest.xml. In the "application" element you can define the theme by adding "android:theme="@android:style/Theme.Dark"".

The ListActivity

We now must work on our ListActivity which we will call MusicDroid. Here is the declaration of this class and it's onCreate() function:

24. public class MusicDroid extends ListActivity {
25.  
26.         private static final String MEDIA_PATH = new String("/sdcard/");
27.         private List<String> songs = new ArrayList<String>();
28.         private MediaPlayer mp = new MediaPlayer();
29.         private int currentPosition = 0;
30.  
31.         @Override
32.         public void onCreate(Bundle icicle) {
33.                 super.onCreate(icicle);
34.                 setContentView(R.layout.songlist);
35.                 updateSongList();
36.         }

First we set up some private member variables to be used by this Activity. The first one is MEDIA_PATH, and we set it to "/sdcard" because that is the location of the SD card. Next comes a List of Strings that will hold the filename for each song on the list. And of course we need a MediaPlayer object, which we call mp. The final one up there is currentPosition, which we will use to store the index of the song currently playing.

The onCreate() function is pretty basic, we set our view to be the songlist view that we created above and call the function updateSongList(), here is that function:

38. public void updateSongList() {
39.         File home = new File(MEDIA_PATH);
40.         if (home.listFiles(new Mp3Filter()).length > 0) {
41.                 for (File file : home.listFiles(new Mp3Filter())) {
42.                         songs.add(file.getName());
43.                 }
44.  
45.                 ArrayAdapter<String> songList = newArrayAdapter<String>(this,
46.                                 R.layout.song_item, songs);
47.                 setListAdapter(songList);
48.         }
49. }

Here we create a File Object called "home" which points to "/sdcard". We loop through the files returned by home.ListFiles(), adding each file to our List object "songs". Once we have this list filled we create an ArrayAdapter passing in the songs list and then set it to be our ListActivity's ListAdapter on line 47. This will populate our ListView.

You may have noticed the object above called "Mp3Filter". This is an object that implements FilenameFilter. This object is used to filter out what files should be returned, this is done by implementing the accept(File, String) function. Here is the object that we can use to filter so that listFiles() only returns MP3 files:

18. class Mp3Filter implements FilenameFilter {
19.         public boolean accept(File dir, String name) {
20.                 return (name.endsWith(".mp3"));
21.         }
22. }

Now we should be able to build a list of all the MP3 files in /sdcard. So now we just need to be able to select a song and play it. Fist things first, let's override onListItemClick() so we will be notified when a song is clicked on:

51. @Override
52. protected void onListItemClick(ListView l, View v, int position, long id) {
53.         currentPosition = position;
54.         playSong(MEDIA_PATH + songs.get(position));
55. }

Pretty basic function here. We set currentPosition to hold the index of the position that was clicked on and then pass in the path of the song to playSong(String), so lets take a look at what's happening in playSong(String):

57. private void playSong(String songPath) {
58.         try {
59.  
60.                 mp.reset();
61.                 mp.setDataSource(songPath);
62.                 mp.prepare();
63.                 mp.start();
64.  
65.                 // Setup listener so next song starts automatically
66.                 mp.setOnCompletionListener(new OnCompletionListener() {
67.  
68.                         public void onCompletion(MediaPlayer arg0) {
69.                                 nextSong();
70.                         }
71.  
72.                 });
73.  
74.         } catch (IOException e) {
75.                 Log.v(getString(R.string.app_name), e.getMessage());
76.         }
77. }

The MediaPlayer object makes things really easy for us here. First we call mp.reset(), which will reset the MediaPlayer to its normal state. This is required if you were playing a song and want to change the data source. The reset() function will also stop whatever is playing, so if a song is playing and then you select another it will stop that one before starting the next song.

We then pass in the path to the song to mp.setDataSource(String) and call prepare() and start(). At this point the MediaPlayer will start playing your song.

Next job is to setup an OnCompletionListener starting on line 66. The function onCompletion(MediaPlayer) will be called when the song is over. All we do there is call the function nextSong() from our Activity. Here is nextSong():

79. private void nextSong() {
80.         if (++currentPosition >= songs.size()) {
81.                 // Last song, just reset currentPosition
82.                 currentPosition = 0;
83.         } else {
84.                 // Play next song
85.                 playSong(MEDIA_PATH + songs.get(currentPosition));
86.         }
87. }

Here we check to make sure this isn't the last song on the list, if it is we won't do anything, if not we'll play the next song using the playSong(String) function.

So that's it for the code, on the next page we'll figure out how to get this thing running...

Emulator Command Line Options

There are 2 command line options that must be set for this project to work. One to mount an SD card so that you can access it at "/sdcard" and another to enable audio.

To enable the SD card first you need to create an sd card image, to do this you need to open a command prompt in your SDK/tools folder and type the following command:

mksdcard <sizean class="sy0">>M <filean class="sy0">>

Where <size> is the size of the SD card in MB, and this must be reasonably large as a small SD card image actually crashes the emulator. And <file> is the path to the file to create. This is the command that I used:

mksdcard 128M c:\temp\sd.<span class="me1">img

Now your SD card image is setup, so once you have your project setup you will need to supply the 2 command line arguments. So, in Eclipse go to "Run -> Open Run Dialog". Now you may need to create a new configuration if there is not one there for your application, you can do that by double clicking on "Android Application" and supplying the Name, Project, and starting Activity on the "Android" tab. On the "Emulator" tab you need to supply 2 arguments, "-sdcard <file>" and "-useaudio".

It should look something like this:

So now that this is all setup we should be ready to run this thing right? Doh, here's what we see:

We need to add songs to the SD card for this thing to work. This is pretty easy, just open a command prompt in the SDK/tools folder once again and use the "adb push <file> <destination>" command. For example:

adb push "c:\music class="es0">\02 Paranoid Android.mp3" /sdcard

And after you push a song or many songs out there you'll be able to start using this very primitivemusic player.

What do you have to look forward to in the next installments?

• Creating a service for the MediaPlayer
• Adding animated controls
• ID3 Tag Support

So, be sure to check back!

Thanks

akm

www.cdacians.com

Custom Progressive Audio Streaming with MediaPlayer in Android

Introduction

NOTE #1: This tutorial was written for Android v1.0.  I have just updated theAndroid streaming media player tutorial/code to v1.5 (Cupcake) with some additional information on the updated code.  You should read that post as well as this one.

NOTE #2: This tutorial is about progressive audio.  If you want to stream live media, then please read my post on live and progressive streaming with Android.

This is a long tutorial, but for those of you that have been struggling with streaming of .mp3 audio to Google’s Android’s MediaPlayer, then I hope this tutorial proves useful as you finalize your entries into Google’s Android Challenge

This tutorial will show how to roll your own streaming audio utility for Android’s MediaPlayer. We will buffer 10 seconds of audio and start playing that audio while the rest of the audio loads in the background. We store the streamed audio locally so you could cache it on device for later use or simply let it be garbage collected.

Here’s the source code for those that just want to jump in. You’ll also notice code for the other tutorials as I didn’t have time to strip them out.

Here are a few screenshots of what we’ll be creating:

Basic Layout

The tutorial consists of just two classes:

Tutorial3: Contains the UI layout and process button clicks
StreamingMediaPlayer: Connects to the server, downloads audio into the buffer, and controls the functionality to ensure the audio continues to play seamlessly.

We’ll assume you know about UI layout using Android’s XML resource files and will instead jump right into the audio streaming code.

Start Your Streaming

Upon clicking the “Start Streaming” button, Tutorial3 creates an instance of StreamingMediaPlayer.

new StreamingMediaPlayer(textStreamed, playButton, streamButton,progressBar);

All UI elements are passed to StreamingMediaPlayer so it can perform UI update itself. In a more robust implementation, StreamingMediaPlayer would fire relevant update events and Tutorial3 would handle the UI updates. For simplicity & cleaner code in this tutorial however, StreamingMediaPlayer will be directly updating the UI.

Tutorial3 then calls StreamingMediaPlayer.startStreaming():

audioStreamer.startStreaming(“http://www.pocketjourney.com/audio.mp3″,1444, 180);

Three variables are passed to startStreaming(): a url for the media to stream (link to an .mp3 file in this tutorial), the length in kilobytes of the media file, and the lenght in seconds of the media file. These last two values will be used when updating the progress bar.

AudioStreamer.startStreaming() creates a new thread for streaming the content so we can immediately return control back to the user interface.

public void startStreaming(final String mediaUrl, long mediaLengthInKb, long mediaLengthInSeconds) throws IOException {

this.mediaLengthInKb = mediaLengthInKb;
this.mediaLengthInSeconds = mediaLengthInSeconds;

Runnable r = new Runnable() {

public void run() {

try {

downloadAudioIncrement(mediaUrl);

} catch (IOException e) {

Log.e(getClass().getName(), “Initialization error for fileUrl=” + mediaUrl, e);
return;

}

}

};
new Thread(r).start();

}

Incremental Media Download

This is where the magic happens as we download media content from the the url stream until we have enough content buffered to start the MediaPlayer. We then let the MediaPlayer play in the background while we download the remaining audio. If the MediaPlayer reaches the end of the buffered audio, then we transfer any newly downloaded audio to the MediaPlayer and let it start playing again.

Things get a little tricky here because:

(a) The MediaPlayer seems to lock the file so we can’t simply append our content to the existing file.
(b) Pausing the MediaPlayer to load the new content takes awhile so we only want to interrupt it when absolutely necessary.
(c) Accessing the MediaPlayer from a separate thread causes it to crash.

So with those caveats in mind, here’s the method that bufferes the media content to a temporary file:

public void downloadAudioIncrement(String mediaUrl) throws IOException {

// First establish connection to the media provider
URLConnection cn = new URL(mediaUrl).openConnection();
cn.connect();
InputStream stream = cn.getInputStream();
if (stream == null) {

Log.e(getClass().getName(), “Unable to create InputStream for mediaUrl:” + mediaUrl);

}

// Create the temporary file for buffering data into
downloadingMediaFile = File.createTempFile(“downloadingMedia”, “.dat”);
FileOutputStream out = new FileOutputStream(downloadingMediaFile);

// Start reading data from the URL streambyte buf[] = new byte[16384];
int totalBytesRead = 0, incrementalBytesRead = 0;
do {

int numread = stream.read(buf);
if (numread <= 0) {

// Nothing left to read so quit
break;

} else {

out.write(buf, 0, numread);
totalBytesRead += numread;
incrementalBytesRead += numread;
totalKbRead = totalBytesRead/1000;

// Test whether we need to transfer buffered data to the MediaPlayer
testMediaBuffer();

// Update the status for ProgressBar and TextFieldsfireDataLoadUpdate();

}

} while (true);

// Lastly transfer fully loaded audio to the MediaPlayer and close the InputStream
fireDataFullyLoaded();
stream.close();

}

What’s up with testMediaBuffer()?

So if you were paying attention, an important piece of functionality must reside in the testMediaBuffer() method. You’re right. That’s the method where we determine whether we need to transfer buffered data to the MediaPlayer because we have enough to start the MediaPlayer or because the MediaPlayer has already played out its previous buffer content.

Before we jump into that, please take note that interacting with a MediaPlayer on non-main UI thread can cause crashes so we always ensure we are interacting with the UI on the main-UI Thread by using a Handler when necessary. For example, we must do so in the following method because it is being called by the media streaming Thread.

private void testMediaBuffer() {

// We’ll place our following code into a Runnable so the Handler can call it for running
// on the main UI thread
Runnable updater = new Runnable() {

public void run() {

if (mediaPlayer == null) {

// The MediaPlayer has not yet been created so see if we have
// the minimum buffered data yet.
// For our purposes, we take the minimum buffered requirement to be:
// INTIAL_KB_BUFFER = 96*10/8;//assume 96kbps*10secs/8bits per byte
if ( totalKbRead >= INTIAL_KB_BUFFER) {

try {

// We have enough buffered content so start the MediaPlayer
startMediaPlayer(bufferedFile);

} catch (Exception e) {

Log.e(getClass().getName(), “Error copying buffered conent.”, e);

}

}

} else if ( mediaPlayer.getDuration() – mediaPlayer.getCurrentPosition() <= 1000 ){

// The MediaPlayer has been started and has reached the end of its buffered
// content. We test for < 1second of data (i.e. 1000ms) because the media
// player will often stop when there are still a few milliseconds of data left to play
transferBufferToMediaPlayer();

}

}

};
handler.post(updater);

}

Starting the MediaPlayer with Initial Content Buffer

Starting the MediaPlayer is very straightforward now. We simply copy all the currently buffered content
into a new Ffile and start the MediaPlayer with it.

private void startMediaPlayer(File bufferedFile) {

try {

File bufferedFile = File.createTempFile(“playingMedia”, “.dat”);
FileUtils.copyFile(downloadingMediaFile,bufferedFile);} catch (IOException e) {

mediaPlayer = new MediaPlayer();
mediaPlayer.setDataSource(bufferedFile.getAbsolutePath());
mediaPlayer.prepare();
fireDataPreloadComplete();

Log.e(getClass().getName(), “Error initializing the MediaPlaer.”, e);
return;

}

}

Transferring Buffered Content to a MediaPlayer That is Already Playing

This is a little trickier but not much. We simply pause the MediaPlayer if it was playing (i.e. the user had not pressed pause), copy over the currently downloaded media content (which may be all of it by now) and then restart the MediaPlayer if it was previously running or had hit the end of its buffer due to a slow network.

private void transferBufferToMediaPlayer() {

try {

// Determine if we need to restart the player after transferring data (e.g. perhaps the user
// pressed pause) & also store the current audio position so we can reset it later. 
boolean wasPlaying = mediaPlayer.isPlaying();
int curPosition = mediaPlayer.getCurrentPosition();
mediaPlayer.pause();

// Copy the current buffer file as we can’t download content into the same file that
// the MediaPlayer is reading from.
File bufferedFile = File.createTempFile(“playingMedia”, “.dat”);
FileUtils.copyFile(downloadingMediaFile,bufferedFile);

// Create a new MediaPlayer. We’ve tried reusing them but that seems to result in
// more system crashes than simply creating new ones.
mediaPlayer = new MediaPlayer();
mediaPlayer.setDataSource(bufferedFile.getAbsolutePath());
mediaPlayer.prepare();
mediaPlayer.seekTo(curPosition);

// Restart if at end of prior beuffered content or mediaPlayer was previously playing.
// NOTE: We test for < 1second of data because the media player can stop when there is still
// a few milliseconds of data left to play
boolean atEndOfFile = mediaPlayer.getDuration() – mediaPlayer.getCurrentPosition() <= 1000;
if (wasPlaying || atEndOfFile){

mediaPlayer.start();

}

}catch (Exception e) {

Log.e(getClass().getName(), “Error updating to newly loaded content.”, e);

}

}

Conclusion

To get the real feel for how your audio will download, make sure to set it to a slower network speed. I recommend setting to AT&T’s EDGE network setting as it should give a lower limit on expected performance. You can make these setting’s easy in Eclipse by setting going into your Run or Debug setting’s dialog and making these selections.

Well that’s it. I’ve inluded additional code for handling the ProgressBar and TextField updates but that should all be sufficiently easy to understand once you understand the rest of the code. Good luck during the next week as you finish your Android Challenge submissions.

And of course, here’s the source code. Please post a comment below if I need to explain anything in more detail. You’ll also notice code for the other tutorials as I didn’t have time to strip them out.

Thanks

akm

www.cdacians.com