How Do I Add Audio (mp3) To A Mobile Site?

16 replies
I'd like to add some audio files to one of my sites. Not necessarily for download, just for listening to. How do I make sure that they will play on all phones? Iphone doesn't play flash, right? I have a droid, but is there a way to code it so all phones will play? Thanks.

Ronnie
#add #audio #mobile #mp3 #site
  • Profile picture of the author shane_k
    Not really sure if this will help but it is what I would try at first.

    1) Get on my IPhone and visit a site that I know has audio files on it, and see if I can play those audio files on my Iphone.

    If I can then...

    2) Go onto my laptop and look up the same sight and check out their source code to see if I can see how they are doing it.

    If I can't figure that out then...

    3) Come here on the warrior forum and ask for help, lol.

    I don't know if you done those things but they might shed some light.

    Shane_K
    {{ DiscussionBoard.errors[4928989].message }}
  • Profile picture of the author WillR
    I haven't done it myself but I would probably be looking for HTML5 audio players. That is going to be the standard soon enough.
    {{ DiscussionBoard.errors[4929661].message }}
    • Profile picture of the author rlhurst
      I have an Android, and can play audio I put on the site. I tested it using this simple code...

      <html>
      <body>

      <p><a href="songname.mp3">Play Song</a></p>

      <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

      </body>
      </html>


      I don't have an iPhone, so am not sure it would play on that phone.
      Signature
      I do voice over work... here's a SAMPLE
      {{ DiscussionBoard.errors[4929751].message }}
  • Profile picture of the author GilNelson
    Hey Ronnie,
    HTML5 is the way to go. I'll skip the huge lesson and just give you some code to try out...

    Code:
    <html>
    <head>
        <meta charset="utf-8">
        <title>Audio</title>
    </head>
    <body>
    
        <audio autoplay controls>
            <source src="http://yoursite.com/audiofile1.mp3" type="audio/mpeg">
            <source src="http://yoursite.com/audiofile1.ogg" type="audio/ogg">
        </audio>
    
    </body>
    </html>
    OK - now that you've got the code, you'll notice the .ogg extension

    I use Handbrake, a free product to encode audio and video for web and mobile use. Google "Handbrake".

    The idea behind the different codecs and containers is that not all browsers are the same. We know that on the web, with Firefox, Chrome, IE, Safari, etc...

    On Mobile, it's more insane, with 18,000 browsers on the market (may be a bit of an exaggeration, but it is nuts out there as a programmer)

    Offering more than 1 type of file, will allow more browsers to "read" the file.

    Extra info I find helpful:

    Unicorn

    brand new quality assurance tool code and style sheets
    checks HTML (including HTML5)
    also checks CSS
    Mobile validator is a choice in the dropdown


    a bit more hard core is:
    Validator.nu
    supports HTML5+ARIA
    NOTE: ARIA is not finalized, nor is HTML5


    if you want to find your new favorite validator:
    WebAIM: Accessibility Evaluation Tools
    Accessibility Evaluation Tools
    Signature
    Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time?
    PM Me For Details & Case Studies
    {{ DiscussionBoard.errors[4930390].message }}
  • Profile picture of the author WillR
    Tested out Ron's solution on my Blackberry and iPhone and it didn't work with either of them. Just as the above poster mentioned I also recommended to Ron going down the HTML5 route - this is soon to be the mobile web standard so it's probably the best solution at this stage. It won't be long before all popular mobile browsers support it.

    I am yet to delve into the HTML5 side of things myself just because I have had no need thus far but it's definitely something we should all be starting to get familiar with.
    {{ DiscussionBoard.errors[4930453].message }}
    • Profile picture of the author rlhurst
      Thanks Gil, I downloaded Handbrake, but cannot find a setting for .ogg?
      Signature
      I do voice over work... here's a SAMPLE
      {{ DiscussionBoard.errors[4930465].message }}
      • Profile picture of the author rlhurst
        OK, I looked at an audio convertor I already had and there is a .ogg setting. I converted the mp3 uploaded the two versions of mp3 along with the code, and I got nothing but a thin rectangle outline on the top of the page.

        I'll have to do some more research....
        Signature
        I do voice over work... here's a SAMPLE
        {{ DiscussionBoard.errors[4930507].message }}
        • Profile picture of the author GilNelson
          Originally Posted by rlhurst View Post

          ... uploaded the two versions of mp3 along with the code, and I got nothing but a thin rectangle outline on the top of the page.
          did you upload two .mp3 files or 1 .mp3 and 1 .ogg?



          re: the white rectangle - here's an article about exactly that on an Android 2.2 browser: HTML5 Audio Support on Android Devices

          It can get complicated with all the different browsers and all the upgrades and updates to browsers.

          Many mobile page developers are simply avoiding audio and video because HTML5 is not fully supported by browsers in the same way.

          Alternatively, you could use a fancy redirect that sends iphone users to one page, Android users to another, etc... to get the most out of each browser user.

          Being that I'm using a Blackberry, I've grown to expect that to enjoy embedded audio or video, I'll have to click a few more times...

          What kind of device are you looking at the page with?

          Ah.... here's a page with various examples:
          http://www.html5rocks.com/en/tutorials/audio/quick/

          Let us know which works for you. I think this will prove to be important in the near future.
          Signature
          Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time?
          PM Me For Details & Case Studies
          {{ DiscussionBoard.errors[4930569].message }}
          • Profile picture of the author rlhurst
            Originally Posted by GilNelson View Post

            did you upload two .mp3 files or 1 .mp3 and 1 .ogg?
            I did one of each. I went to my test page on my desktop with Firefox, and it worked fine..... so it's my Android browser. The code I used in my second post worked fine on my Android. .......
            Signature
            I do voice over work... here's a SAMPLE
            {{ DiscussionBoard.errors[4930643].message }}
      • Profile picture of the author GilNelson
        Originally Posted by rlhurst View Post

        Thanks Gil, I downloaded Handbrake, but cannot find a setting for .ogg?
        ok - handbrake is a bit extensive, isn't it?

        try this: Online Audio Converter (MP3, WAV, Ogg, WMA, M4A, AAC) – media.io free site to convert audio for you.
        upload. convert. download.
        I haven't used it, but it has been recommended.
        Signature
        Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time?
        PM Me For Details & Case Studies
        {{ DiscussionBoard.errors[4930519].message }}
        • Profile picture of the author rlhurst
          Originally Posted by GilNelson View Post

          ok - handbrake is a bit extensive, isn't it?

          try this: Online Audio Converter (MP3, WAV, Ogg, WMA, M4A, AAC) - media.io free site to convert audio for you.
          upload. convert. download.
          I haven't used it, but it has been recommended.
          we must have been posting at the same time. I got it converted... see above post.
          Signature
          I do voice over work... here's a SAMPLE
          {{ DiscussionBoard.errors[4930528].message }}
  • Profile picture of the author GilNelson
    Here's another article showing what mobile browsers support which type of file, and a code example that's slightly diifferent than what I posted up above:
    Mobile and HTML5 Audio | Shi Chuan's blog

    As you can tell by now,
    -mobile browser support for HTML5 is still sketchy
    -javascript may be a workaround, but many users turn this off on their devices
    -current feeling among developers (in general) is to avoid audio and video as the main component of a marketing campaign, due to varied browser support
    -...and, even the desktop browsers are not consistent yet with HTML5 native video/audio.

    So - in response to your original question:
    How do I make sure that they will play on all phones? Iphone doesn't play flash, right? I have a droid, but is there a way to code it so all phones will play? Thanks.
    ... not a simple one...
    Signature
    Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time?
    PM Me For Details & Case Studies
    {{ DiscussionBoard.errors[4930717].message }}
    • Profile picture of the author rlhurst
      Thanks again for the info, Gil.
      Signature
      I do voice over work... here's a SAMPLE
      {{ DiscussionBoard.errors[4932484].message }}
      • Profile picture of the author GilNelson
        Originally Posted by rlhurst View Post

        Thanks again for the info, Gil.
        My pleasure, Ronnie. Thanks for the great question.
        Signature
        Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time?
        PM Me For Details & Case Studies
        {{ DiscussionBoard.errors[4933578].message }}
  • Profile picture of the author TWalker
    You can view source code on the Android, not sure about Iphone.

    https://market.android.com/details?i...pagelite&hl=en

    Nice little HTML5 player

    http://demo.wpbakery.com/?theme=visual-composer
    {{ DiscussionBoard.errors[4936158].message }}

Trending Topics