![]() ![]() Let’s start by creating a new PhoneGap project through Xcode using the specific template for this kind of project. If you click on the arrow icon of the player widget, the song will start to play and the progress indicator will change, as shown in the following screenshot: Load the play_sencha/index.html on your device and you can see a screen similar to the next screenshot:Ħ. ![]() css and add the following lines of code:ĥ. The next step will be to create a new file for applying some style to our application. Now, it’s time to create our main JavaScript file called main. After creating our new directory, open your favorite editor, copy the following code and save the file as index.html:ģ. ![]() For example, if you’re using Ubuntu, execute the following command for creating our new directory:Ģ. As you’ve learned in previous recipes using Sencha Touch, we need to create three different files inside a new directory, which will be located inside the DocumentRoot of your web server. If you play the arrow controller, the audio will start to play and the widget player will display the duration of the songs and a progress indicator as shown in the next screenshot:ġ. The screen will display something similar to the next screenshot:Ĥ. After saving your new file, load it from your device. html and add the following lines of HTML code:ģ. Inside your new folder, create a new file called play_audio. Remember, usually this directory is /Library/WebServer/Documents/ under Mac OS X.Ģ. Create a new folder called play_audio inside your DocumentRoot directory. Finally, you’ll learn how to do the same with PhoneGap. In the second example, we’re going to the next stage using Sencha Touch. How to do it…įirst, we’ll describe the process for playing an audio file using the native capabilities of HTML5 implemented by Safari Mobile. For example, our recipe works with an MP3 file. On the other hand, you’ll need an audio file in WAV, MP3, AAC-LC, or HE-ACC format. Don’t forget that the PhoneGap application for iPhone requires Xcode installed in a Mac OS X computer. The complete code for each of the approaches explained in this recipe can be found in the following directories in the code bundle:Īs we’re going to use multiple frameworks in this recipe, you should make sure that PhoneGap, Sencha Touch, and UiUIKit are installed in your machine. The reason for it is pretty simple we get a consistent graphic interface with a native look and feel for our web application using a few lines of HTML code. The UiUIKit framework will be used for defining a simple layout for our PhoneGap and HTML5 approaches. Our recipe describes how to display a simple player with controls for playing and pausing a specific and preloaded MP3 file.įor one of the three approaches explained in our recipe, we don’t need any framework because we’ll take advantage of the HTML5 support of the Safari Mobile browser installed in the iOS devices. We’re going to play an audio file in MP3 format however, other audio formats, such as WAF and AAC-LC, can be played as well. This recipe shows a simple method for playing audio, but you can integrate it with your own code or application for building more sophisticated applications. We’ll learn three different ways for playing a file with our various frameworks. This recipe will describe the process of playing an audio file from a web application designed specifically for the iOS operating system. ![]()
0 Comments
Leave a Reply. |