Differences
This shows you the differences between two versions of the page.
|
play_an_mp3_audio_stream_in_phonegap [2015/09/16 18:48] Joel Dare [Pause Feature] |
play_an_mp3_audio_stream_in_phonegap [2020/06/01 22:53] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Play an MP3 Audio Stream in PhoneGap ====== | ||
| - | I work for a company that owns a couple radio stations as well as a popular classifieds website (http://www.ksl.com). We wanted to build an iPhone app that would allow the customer to browse the classifieds website while listening to the audio stream. I decided to implement that using the PhoneGap framework. I'm embarrassed to admit that it took me about 2 days to test all the various suggestions I found on the web and to find this answer. But, alas, here is the working bit of JavaScript code that will start a stream in the background. | ||
| - | |||
| - | <code> | ||
| - | function playStream() { | ||
| - | try { | ||
| - | var myaudio = new Audio('http://icecast.ksl.com:8000/'); | ||
| - | myaudio.id = 'playerMyAdio'; | ||
| - | myaudio.play(); | ||
| - | } catch (e) { | ||
| - | alert('no audio support!'); | ||
| - | } | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | Then, in the HTML page I have the following. | ||
| - | |||
| - | <button onclick="playStream()">Listen Live</button> | ||
| - | |||
| - | If //myaudio// was created in a global sense (outside of a function) than you can also pause the audio with the following. | ||
| - | |||
| - | myaudio.pause(); | ||
| - | |||
| - | ====== Background Audio ====== | ||
| - | |||
| - | In iOS 4.0 and above you can run audio in the background. PhoneGap doesn't currently support this out of the box, but you can add it. To do so, you'll need to do two things; add an item to the info.plist file and add a line of code to PhoneGap. | ||
| - | |||
| - | To the info.plist file, add a new key of "Required background modes". That key will have an array of options. In "Item 0" of that array set the value to "App plays audio". | ||
| - | |||
| - | Next, modify the ~/PhoneGapLib/Classes/Sound.m file. Look for the line that contains "if ([resourceURL isFileURL]) {". It's around line 103. Just below that line, inside the if statement, you'll want to add the following. | ||
| - | |||
| - | [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:nil]; | ||
| - | |||
| - | So, that section of code will look like the following. | ||
| - | |||
| - | <code> | ||
| - | if ([resourceURL isFileURL]) { | ||
| - | [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:nil]; | ||
| - | audioFile.player = [[ AVAudioPlayer alloc ] initWithContentsOfURL:resourceURL error:&error]; | ||
| - | } else { | ||
| - | NSData* data = [NSData dataWithContentsOfURL:resourceURL]; | ||
| - | audioFile.player = [[ AVAudioPlayer alloc ] initWithData:data error:&error]; | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | **Note:** Some users have have had trouble finding the //Sound.m// file. It's not in the XCode project itself. You'll find it beneath your home directory (~) under //~/PhoneGapLib/Classes/// or you can just use Finder to search for //Sound.m//. Right-click on it and open it in XCode. | ||
| - | |||
| - | ===== Other Pause Althernatives ===== | ||
| - | |||
| - | These two lines might work to pause the audio. | ||
| - | |||
| - | sound.pause(); | ||
| - | sound.currentTime = 0; | ||
| - | |||
| - | If that doesn’t work, another popular suggestion is to set the src to nothing on “pause” and then back to the correct source on play again. | ||
| - | |||
| - | sound.src = ""; | ||
| - | ====== Working HTML Example ====== | ||
| - | |||
| - | Below is an HTML page that has the code above on it and should work in your typical web browser. | ||
| - | |||
| - | [[https://dl.dropboxusercontent.com/u/58852318/stream.html|stream.html]] | ||
| - | |||
| - | ====== ====== | ||
| - | |||
| - | <html> | ||
| - | <style> | ||
| - | .csv_subscription { | ||
| - | font-family: Helvetica, Arial, sans-serif; | ||
| - | font-size: 14px; | ||
| - | background-color: #E2E2E2; | ||
| - | width: 250px; | ||
| - | padding: 20px; | ||
| - | margin: auto; | ||
| - | } | ||
| - | .csv_subscription a { | ||
| - | text-decoration: none; | ||
| - | display: inline-block; | ||
| - | font-weight: normal; | ||
| - | background-color: #5BA0D0; | ||
| - | color: white !important; | ||
| - | } | ||
| - | .csv_subscription p { | ||
| - | margin: 0 0 20px 0; | ||
| - | } | ||
| - | .csv_subscription .headline { | ||
| - | font-weight: bold; | ||
| - | font-size: 1.25em; | ||
| - | text-align: center; | ||
| - | } | ||
| - | .csv_subscription .call_container { | ||
| - | text-align: center; | ||
| - | } | ||
| - | .csv_subscription .call_to_act { | ||
| - | margin-bottom: 5px; | ||
| - | padding: 10px; | ||
| - | background-color: #.csv_subscription { | ||
| - | font-family: Helvetica, Arial, sans-serif; | ||
| - | background-color: #FFBC66; | ||
| - | width: 400px; | ||
| - | padding: 20px; | ||
| - | margin: auto; | ||
| - | } | ||
| - | .csv_subscription a { | ||
| - | text-decoration: none; | ||
| - | display: inline-block; | ||
| - | font-weight: normal; | ||
| - | } | ||
| - | .csv_subscription p { | ||
| - | margin: 0 0 20px 0; | ||
| - | } | ||
| - | .csv_subscription .headline { | ||
| - | font-weight: bold; | ||
| - | font-size: 1.25em; | ||
| - | text-align: center; | ||
| - | } | ||
| - | .csv_subscription .call_container { | ||
| - | text-align: center; | ||
| - | } | ||
| - | .csv_subscription .call_to_act { | ||
| - | margin-bottom: 5px; | ||
| - | padding: 10px; | ||
| - | background-color: #5BA0D0; | ||
| - | color: white; | ||
| - | font-weight: bold; | ||
| - | } | ||
| - | .csv_subscription .call_label { | ||
| - | font-size: 0.75em; | ||
| - | } | ||
| - | .csv_subscription .hurry { | ||
| - | text-align: center; | ||
| - | font-size: 0.75em; | ||
| - | margin-bottom: 0px; | ||
| - | } | ||
| - | color: white !important; | ||
| - | font-weight: bold; | ||
| - | } | ||
| - | .csv_subscription .call_label { | ||
| - | font-size: 0.75em; | ||
| - | } | ||
| - | .csv_subscription .hurry { | ||
| - | text-align: center; | ||
| - | font-size: 0.75em; | ||
| - | margin-bottom: 0px; | ||
| - | } | ||
| - | </style> | ||
| - | <div class="csv_subscription"> | ||
| - | <p class="headline">For $9.95 Get Answers to Your PhoneGap Questions</p> | ||
| - | <p>Send me an email and explain the problem. I'll send back my step by step instructions.</p> | ||
| - | <div class="call_container"> | ||
| - | <a class="call_to_act" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9EM5E2CNEFYJG">Subscribe</a> | ||
| - | <p class="call_label">Only $9.95</p> | ||
| - | </div> | ||
| - | <p>After, I'll be on retainer to answer your other questions. If you don't need any more help, cancel anytime.</p> | ||
| - | <p class="hurry">Please hurry, only 2 slots are available.</p> | ||
| - | </div> | ||
| - | </html> | ||
| - | ====== Contributors ====== | ||
| - | |||
| - | Many thanks to the people who write to me and ask questions about this. I don't work with PhoneGap that often but the questions help me refine these instructions and make them more clear. That helps even more developers. You know who you are. | ||