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

rlhurst · 23rd Oct 2011, 09:05 AM

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

shane_k · 24th Oct 2011, 03:34 PM

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

WillR · 24th Oct 2011, 05:53 PM

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.

rlhurst · 24th Oct 2011, 06:16 PM

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.

WillR · 24th Oct 2011, 07:12 PM

Originally Posted by rlhurst

I don't have an iPhone, so am not sure it would play on that phone.

I've a Blackberry and an iPhone so if you want to PM me a link I can test them both for you.

GilNelson · 24th Oct 2011, 09:06 PM

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

WillR · 24th Oct 2011, 09:29 PM

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.

rlhurst · 24th Oct 2011, 09:33 PM

Thanks Gil, I downloaded Handbrake, but cannot find a setting for .ogg?

rlhurst · 24th Oct 2011, 09:46 PM

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....

GilNelson · 24th Oct 2011, 09:48 PM

Originally Posted by rlhurst

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.

rlhurst · 24th Oct 2011, 09:51 PM

Originally Posted by GilNelson

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.

GilNelson · 24th Oct 2011, 10:00 PM

Originally Posted by rlhurst

... 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.

rlhurst · 24th Oct 2011, 10:18 PM

Originally Posted by GilNelson

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. .......

GilNelson · 24th Oct 2011, 10:41 PM

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...

rlhurst · 25th Oct 2011, 06:32 AM

Thanks again for the info, Gil.

GilNelson · 25th Oct 2011, 09:47 AM

Originally Posted by rlhurst

Thanks again for the info, Gil.

My pleasure, Ronnie. Thanks for the great question.

TWalker · 25th Oct 2011, 06:11 PM

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

23rd Oct 2011, 09:05 AM	#1
rlhurst I Do Voice Over Work War Room Member Join Date: 2011 Location: Oregon Posts: 581 Thanks: 34 Thanked 129 Times in 96 Posts	How Do I Add Audio (mp3) To A Mobile Site? Share on: 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
	I do voice over work... here's a SAMPLE

24th Oct 2011, 03:34 PM	#2
shane_k Senior Warrior Member Join Date: 2009 Location: Western Canada Posts: 1,014 Thanks: 1,125 Thanked 348 Times in 252 Posts	Re: How Do I Add Audio (mp3) To A Mobile Site? Share on: 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

24th Oct 2011, 05:53 PM	#3
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,473 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Re: How Do I Add Audio (mp3) To A Mobile Site? Share on: 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.
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

24th Oct 2011, 06:16 PM	#4
rlhurst I Do Voice Over Work War Room Member Join Date: 2011 Location: Oregon Posts: 581 Thanks: 34 Thanked 129 Times in 96 Posts	Re: How Do I Add Audio (mp3) To A Mobile Site? Share on: 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.
	I do voice over work... here's a SAMPLE

24th Oct 2011, 09:06 PM	#6
GilNelson Active Warrior Join Date: 2011 Location: Arizona Posts: 61 Thanks: 17 Thanked 45 Times in 33 Posts	Re: How Do I Add Audio (mp3) To A Mobile Site? Share on: 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
	Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time? PM Me For Details & Case Studies

24th Oct 2011, 09:29 PM	#7
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,473 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Re: How Do I Add Audio (mp3) To A Mobile Site? Share on: 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.
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

24th Oct 2011, 09:33 PM	#8
rlhurst I Do Voice Over Work War Room Member Join Date: 2011 Location: Oregon Posts: 581 Thanks: 34 Thanked 129 Times in 96 Posts	Re: How Do I Add Audio (mp3) To A Mobile Site? Share on: Thanks Gil, I downloaded Handbrake, but cannot find a setting for .ogg?
	I do voice over work... here's a SAMPLE

24th Oct 2011, 09:46 PM	#9
rlhurst I Do Voice Over Work War Room Member Join Date: 2011 Location: Oregon Posts: 581 Thanks: 34 Thanked 129 Times in 96 Posts	Re: How Do I Add Audio (mp3) To A Mobile Site? Share on: 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....
	I do voice over work... here's a SAMPLE

25th Oct 2011, 06:32 AM	#15
rlhurst I Do Voice Over Work War Room Member Join Date: 2011 Location: Oregon Posts: 581 Thanks: 34 Thanked 129 Times in 96 Posts	Re: How Do I Add Audio (mp3) To A Mobile Site? Share on: Thanks again for the info, Gil.
	I do voice over work... here's a SAMPLE

25th Oct 2011, 06:11 PM	#17
TWalker HyperActive Warrior War Room Member Join Date: 2010 Posts: 316 Thanks: 39 Thanked 48 Times in 31 Posts	Re: How Do I Add Audio (mp3) To A Mobile Site? Share on: 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