Is it possible to play an MP3 local file in Android (phonegap) using HTML5 <audio> tag?

7,693 views
Skip to first unread message

A J

unread,
May 18, 2012, 5:37:54 PM5/18/12
to phonegap
Hi all,

Is it possible to play an MP3 local file in Android (phonegap) using
HTML5 <audio> tag? I was able to do it on phonegap for my IOS device,
but not android device.

If its not possible, has anyone created a phonegap audio player with a
progress slider-bar using phonegap media api?
A progress slider bar that you can slide left/right to a specific
position in the audio playback?

Any help would be greatly appreciated.
Thanks in advanced.

AJ

asael2

unread,
May 19, 2012, 2:33:30 AM5/19/12
to phon...@googlegroups.com
Hi AJ,

Now I'm just setting the android development environment, so I haven't tried with Cordova. But I built in a html5 player inside JQM, wich I hope will works well with Cordova.

You can take a look at poc.artyficial.net/historias/index.html 
Next Ill try to make that web app a more "native" one :) and let you know.

Greetings.

alex Ng

unread,
May 19, 2012, 10:53:30 AM5/19/12
to phon...@googlegroups.com
Do you try to copy the audio in SD card first and play it?  I didn't try audio but I did in video.  It works
Alex

2012/5/19 asael2 <asa...@gmail.com>

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com

Simon MacDonald

unread,
May 20, 2012, 9:42:06 PM5/20/12
to phon...@googlegroups.com
The audio tag is kinda broken in the Android WebView. I started
working on a bit of a monkey patch on Android using PhoneGap. My
project is in the beginning stages but it may be of some use to you.
Feel free to submit bugs/requests and code.

http://macdonst.github.com/corinthian/

Simon Mac Donald
http://hi.im/simonmacdonald

A J

unread,
May 22, 2012, 10:10:41 AM5/22/12
to phonegap
Hi Alex,

Thanks for your reply.
Yes, playing .mp3 files from sdcard works.
Here is my html5 code:
<audio controls="controls">
<source src="file:///sdcard/test.mp3" type="audio/mpeg"/>
Your browser does not support the audio element.
</audio>
I would like to be able to play audio from within android_asset
folder.
I don't know if that's possible.
Let me know if you find a trick for it.

Thanks again,
AJ

dehash

unread,
May 22, 2012, 12:18:55 PM5/22/12
to phon...@googlegroups.com
Did you try the code at the url below:
https://gist.github.com/2380994
ie put mp3 into www and load '/android_asset/www/test.mp3' on android.
It works here.

~dehash

A J

unread,
May 22, 2012, 1:44:36 PM5/22/12
to phonegap
Hi Dehash,

I've tried the following without any luck:
<audio controls="controls" style="width:100%">
<source src="/android_asset/www/test.mp3" type="audio/mpeg"/>
Your browser does not support the audio element.
</audio>
I've placed my test.mp3 file in the www folder but still doesn't seem
to find it.
Remember I am trying to use the html5 audio tag to play the audio, not
Phonegap media api.

Thanks,
AJ


On May 22, 12:18 pm, dehash <deh...@googlemail.com> wrote:
> Did you try the code at the url below:https://gist.github.com/2380994
> ie put mp3 into www and load '/android_asset/www/test.mp3' on android.
> It works here.
>
> ~dehash
>
> >> >> Is itpossibleto play an MP3 local file in Android (phonegap) using
> >> >> HTML5 <audio> tag?  I was able to do it on phonegap for my IOS device,
> >> >> but not android device.
>
> >> >> If its notpossible, has anyone created a phonegap audio player with a

Steph

unread,
May 28, 2012, 10:06:07 PM5/28/12
to phon...@googlegroups.com
I had to do custom code to create a component that used the phonegap media api.

I'm going to go through my code and piece together what I have and I'll put it in this thread. It isn't useful as a plugin as it is mainly just custom javascript functions, but maybe the code itself will help people.
I use the html5 slider element for seeking. Basically all of the controls are custom, so you'd have to do your own styling, but I'll still put the code here and see if it helps anyone.

@Simon I looks like you are trying to do something that will be very helpful. I'll have a look, maybe there will be a way to use some of what I've done. Looks like you have play and pause, but maybe my slider, plus the code to make it work, will be a good addition.

Cheers,
Steph
> >> > phonegap+unsubscribe@googlegroups.com
> >> > For more options, visit this group at
> >> >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> >> > For more info on PhoneGap or to download the code go towww.phonegap.com
>
> > --
> > You received this message because you are subscribed to the Google
> > Groups "phonegap" group.
> > To post to this group, send email to phon...@googlegroups.com
> > To unsubscribe from this group, send email to
> > phonegap+unsubscribe@googlegroups.com

Simon MacDonald

unread,
May 30, 2012, 12:11:30 PM5/30/12
to phon...@googlegroups.com
Yeah, I just got play pause to work. I need to add the slider and duration of the song to the UI. On top of that I'm going to look into implementing the Audio API in my side project so it will be more HTML5 compliant. Feel free to fork and submit pull requests to the project, I'll take help anywhere I can get it.

Simon Mac Donald
http://hi.im/simonmacdonald


dehash

unread,
Jun 1, 2012, 2:54:40 PM6/1/12
to phon...@googlegroups.com
The jQuery mobile slider could double as a progress/scrub bar for the
mp3 playback, something like:
$('#slider').val((position/duration)*100);
$('#slider').slider('refresh');

But that is dependent on jQuery.


~dehash
>>> <source src="/android_asset/www/test.**mp3" type="audio/mpeg"/>
>>> Your browser does not support the audio element.
>>> </audio>
>>> I've placed my test.mp3 file in the www folder but still doesn't seem
>>> to find it.
>>> Remember I am trying to use the html5 audio tag to play the audio, not
>>> Phonegap media api.
>>>
>>> Thanks,
>>> AJ
>>>
>>>
>>> On May 22, 12:18 pm, dehash <deh...@googlemail.com> wrote:
>>> > Did you try the code at the url
>>> > below:https://gist.github.com/**2380994<https://gist.github.com/2380994>
>>> > >> > poc.artyficial.net/historias/**index.html<http://poc.artyficial.net/historias/index.html>
>>> > >> > phonegap+unsubscribe@**googlegroups.com<phonegap%2Bunsu...@googlegroups.com>
>>> > >> > For more options, visit this group at
>>> > >> >http://groups.google.com/**group/phonegap?hl=en?hl=en<http://groups.google.com/group/phonegap?hl=en?hl=en>
>>> >
>>> > >> > For more info on PhoneGap or to download the code go
>>> towww.phonegap.com
>>> >
>>> > > --
>>> > > You received this message because you are subscribed to the Google
>>> > > Groups "phonegap" group.
>>> > > To post to this group, send email to phon...@googlegroups.com
>>> > > To unsubscribe from this group, send email to
>>> > > phonegap+unsubscribe@**googlegroups.com<phonegap%2Bunsu...@googlegroups.com>
>>> > > For more options, visit this group at
>>> > >http://groups.google.com/**group/phonegap?hl=en?hl=en<http://groups.google.com/group/phonegap?hl=en?hl=en>
Message has been deleted
Message has been deleted

Kundan Raj

unread,
Jul 24, 2013, 5:59:36 AM7/24/13
to phon...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages