Register Advertise with usHelp Desk Today's Posts Search

Closed Thread
Thread Tools Search this Thread
Unread 23rd Oct 2011, 09:05 AM   #1
I Do Voice Over Work
War Room Member
 
rlhurst's Avatar
 
Join Date: 2011
Location: Oregon
Posts: 581
Thanks: 34
Thanked 129 Times in 96 Posts
Default
How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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

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
shane_k is offline  
Unread 24th Oct 2011, 05:53 PM   #3
Digital Marketer
War Room Member
 
WillR's Avatar
 
Join Date: 2010
Location: Australia
Posts: 12,475
Thanks: 1,984
Thanked 8,187 Times in 4,079 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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.

WillR is offline  
Unread 24th Oct 2011, 06:16 PM   #4
I Do Voice Over Work
War Room Member
 
rlhurst's Avatar
 
Join Date: 2011
Location: Oregon
Posts: 581
Thanks: 34
Thanked 129 Times in 96 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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
rlhurst is offline  
Unread 24th Oct 2011, 07:12 PM   #5
Digital Marketer
War Room Member
 
WillR's Avatar
 
Join Date: 2010
Location: Australia
Posts: 12,475
Thanks: 1,984
Thanked 8,187 Times in 4,079 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

Originally Posted by rlhurst View Post

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.

WillR is offline  
Unread 24th Oct 2011, 09:06 PM   #6
Active Warrior
 
GilNelson's Avatar
 
Join Date: 2011
Location: Arizona
Posts: 61
Thanks: 17
Thanked 45 Times in 33 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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
GilNelson is offline  
The Following 3 Users Say Thank You to GilNelson For This Useful Post:
Unread 24th Oct 2011, 09:29 PM   #7
Digital Marketer
War Room Member
 
WillR's Avatar
 
Join Date: 2010
Location: Australia
Posts: 12,475
Thanks: 1,984
Thanked 8,187 Times in 4,079 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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.

WillR is offline  
Unread 24th Oct 2011, 09:33 PM   #8
I Do Voice Over Work
War Room Member
 
rlhurst's Avatar
 
Join Date: 2011
Location: Oregon
Posts: 581
Thanks: 34
Thanked 129 Times in 96 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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

I do voice over work... here's a SAMPLE
rlhurst is offline  
Unread 24th Oct 2011, 09:46 PM   #9
I Do Voice Over Work
War Room Member
 
rlhurst's Avatar
 
Join Date: 2011
Location: Oregon
Posts: 581
Thanks: 34
Thanked 129 Times in 96 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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
rlhurst is offline  
Unread 24th Oct 2011, 09:48 PM   #10
Active Warrior
 
GilNelson's Avatar
 
Join Date: 2011
Location: Arizona
Posts: 61
Thanks: 17
Thanked 45 Times in 33 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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.

Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time?
PM Me For Details & Case Studies
GilNelson is offline  
Unread 24th Oct 2011, 09:51 PM   #11
I Do Voice Over Work
War Room Member
 
rlhurst's Avatar
 
Join Date: 2011
Location: Oregon
Posts: 581
Thanks: 34
Thanked 129 Times in 96 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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.

I do voice over work... here's a SAMPLE
rlhurst is offline  
Unread 24th Oct 2011, 10:00 PM   #12
Active Warrior
 
GilNelson's Avatar
 
Join Date: 2011
Location: Arizona
Posts: 61
Thanks: 17
Thanked 45 Times in 33 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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.

Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time?
PM Me For Details & Case Studies

Last edited on 24th Oct 2011 at 10:02 PM. Reason: added content
GilNelson is offline  
Unread 24th Oct 2011, 10:18 PM   #13
I Do Voice Over Work
War Room Member
 
rlhurst's Avatar
 
Join Date: 2011
Location: Oregon
Posts: 581
Thanks: 34
Thanked 129 Times in 96 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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

I do voice over work... here's a SAMPLE
rlhurst is offline  
Unread 24th Oct 2011, 10:41 PM   #14
Active Warrior
 
GilNelson's Avatar
 
Join Date: 2011
Location: Arizona
Posts: 61
Thanks: 17
Thanked 45 Times in 33 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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

Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time?
PM Me For Details & Case Studies
GilNelson is offline  
The Following User Says Thank You to GilNelson For This Useful Post:
Unread 25th Oct 2011, 06:32 AM   #15
I Do Voice Over Work
War Room Member
 
rlhurst's Avatar
 
Join Date: 2011
Location: Oregon
Posts: 581
Thanks: 34
Thanked 129 Times in 96 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

Thanks again for the info, Gil.

I do voice over work... here's a SAMPLE
rlhurst is offline  
Unread 25th Oct 2011, 09:47 AM   #16
Active Warrior
 
GilNelson's Avatar
 
Join Date: 2011
Location: Arizona
Posts: 61
Thanks: 17
Thanked 45 Times in 33 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

Originally Posted by rlhurst View Post

Thanks again for the info, Gil.
My pleasure, Ronnie. Thanks for the great question.

Want To Know How To Reduce High PPC Costs & Increase CTRs At The Same Time?
PM Me For Details & Case Studies
GilNelson is offline  
Unread 25th Oct 2011, 06:11 PM   #17
HyperActive Warrior
War Room Member
 
Join Date: 2010
Posts: 316
Thanks: 39
Thanked 48 Times in 31 Posts
Default
Re: How Do I Add Audio (mp3) To A Mobile Site?
Share on: 
fb share twitter share gplus share more share

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
TWalker is offline  
Closed Thread


Bookmarks

Tags
add, audio, mobile, mp3, site


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




All times are GMT -6. The time now is 08:25 AM.