Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
play_an_mp3_file_in_phonegap [2013/06/18 14:25]
Joel Dare
play_an_mp3_file_in_phonegap [2015/08/03 14:42]
Joel Dare
Line 1: Line 1:
 +====== Play an MP3 File in PhoneGap ======
  
 +There is nothing special about playing a plain MP3 file in Phonegap. You can typically just use HTML5 audio. Here's an example.
 +
 +<​code>​
 +<audio controls>​
 +  <source src="​sound.ogg"​ type="​audio/​ogg">​
 +  <source src="​sound.mp3"​ type="​audio/​mpeg">​
 +Your browser doesn'​t support audio.
 +</​audio>​
 +</​code>​
 +
 +That should be all you need. Nothing special here.
 +
 +I included both ogg and mp3 files because some browsers support mp3 and some don't (we use ogg for those). iOS and Android both support mp3, so you might only need the mp3 version for mobile development. Firefox doesn'​t support mp3 and the upcoming Firefox and Ubuntu phones might need the ogg file. Those don't have much market share at present, so ogg might not be necessary at all.
 +
 +<​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>​
 +
 +You may also be interested in how to [[Play an MP3 Audio Stream in PhoneGap]].
comments powered by Disqus
play_an_mp3_file_in_phonegap.txt · Last modified: 2020/06/01 22:53 (external edit)