As other modern smartphones, iPhone has the capability to reproduce audio files in different formats as MP3 and AAC. Also, other devices running the iOS operating systems—as iPad and iPod Touch—include the same feature. Keeping in mind this fact, it would be interesting to create a list with some items in a similar way to the iPod application included in iPhone.
This recipe shows how to create a simple list with some items that can be played when the user clicks on each one. For each item in the list, we’ll display information about it as the title and duration of each song.
For simplicity, we’re going to use some preview songs from iTunes as items for our list.
Getting ready
Check whether you’ve installed the iWebKit framework on your computer or not. We’re going to use this framework for creating our playlist.
How to do it…
1. Open your favorite editor and create a new file called ipod_playlist.html. The first task is to add a standard header and the CSS and JavaScript files required for iWebKit. Specifically, these lines are as follows:
2. Before closing our head tag, we’ll insert a <title> tag for our application:
3. Now, it’s time to create the body with a specific class for it:
4. As you’ve learned in the previous recipes related to iWebKit, we’ll include a top bar inserting the next code:
5. The required code for our complete list with a few items is the following:
6. Additionally, we’ll need the reference to the location of each song providers for iTunes. The next code should be added to our new file:
7. Load your new application in your device or iPhone simulator for testing our list. After this action, your screen will display a list, as shown in the following screenshot:
8. If you click on one of the items of the list, the iPhone’s player will be launched and the songs will be played. The following screenshot shows the launched player:
9. When the user clicks on the Done button, our list will be displayed selecting the recent played item:
How it works…
The iWebKit offers a predefined CSS class. When added to the body element, it styles a playlist similar to the original one used by the iPod application included in the iPhone. The name of the mentioned CSS class is ipodlist and it defines how the playlist should be displayed, including colors and lines working as separators between items. Lastly, we need to define the details of each song in an unordered HTML list.
Each element of the unordered list contains an anchor element and different span tags for displaying some attributes such as the number, title, and duration of each song. The most important of these elements is the anchor, which refers to a specific embed object. At the end of the file, you can find one of these embed objects per song. Actually, we’re using this specific tag of Safari Mobile to establish a reference to the original audio file served by iTunes. The embed tag allows you to play content through the QuickTime infrastructure included in the iPhone. In fact, we can consider each of these tags as a pointer for playing content in QuickTime. The tag contains different attributes such as autoplay, height, and width. For our recipe, we used autoplay=" false" because the content will be played only when the user clicks on an item in the unordered list. On the other hand, we want to hide each embed tag, so we put 0 value for width and height. The last and an important attribute is src, which is a hyperlink to the physical file served by iTunes.
Once we’ve completed our list and all the links for the items, we should add a handler to each of these items. We chose a simple onclick handler to indicate what will happen when the user clicks on the item. Our recipe is using one line of JavaScript code for playing each of these items. Therefore, we only need to select each item and play it using the Play () method. This action happens thanks to the document. <name of element>.Play() line. For example, if we want to play the third item, we only need to call document. song03 . Play (), where song03 is the value for the name attribute of the third item of our list.
Inside each <li> element, you’ll find a blank span tag with a CSS class called auto. This span tag will add an arrow when a specific sound is playing. You can change the default behavior using two different classes, such as stop and play. The second one shows the mentioned arrow and the first one doesn’t show anything.
Even though we have used a default toolbar, you can apply a CSS style to be more consistent using a black color for it. Just add class="black" for the div element with id="topbar". The result of this change is visualized in the following screenshot:
There’s more…
Perhaps you’re wondering how to get direct links from iTunes. Fortunately, Apple offers a web page for searching songs; take a look at it by directing your web browser to:
http://itunes.apple.com/linkmaker.
See also
► Installing the iWebKit recipe in topic 1, Frameworks Make Life Easier
