PDA

View Full Version : Native HTML5 Audio in Mobile?


Chadi
07-09-2014, 07:27 PM
I'm using the HTML5 native audio code which works fine in desktop browsers, but does not in mobile browsers. It simply says "cannot play audio file" in mobile. Any workarounds for this?

Example:
http://www.talkjesus.com/sermons/49282-rapture-church-sermon.html

Code
<audio controls="">
<source src="http://s2.cpl.delvenetworks.com/media/781563d6695d48a496254cad9c2ea179/505a0af13d85439cb2505723c62fa9d8/2635cde8fb464adbbd32f42479f1092f/itm_pgm_2014_07_07.mp3" type="audio/ogg">
</audio>

tbworld
07-09-2014, 07:34 PM
I'm using the HTML5 native audio code which works fine in desktop browsers, but does not in mobile browsers. It simply says "cannot play audio file" in mobile. Any workarounds for this?

Example:
http://www.talkjesus.com/sermons/49282-rapture-church-sermon.html

Code
<audio controls="">
<source src="http://s2.cpl.delvenetworks.com/media/781563d6695d48a496254cad9c2ea179/505a0af13d85439cb2505723c62fa9d8/2635cde8fb464adbbd32f42479f1092f/itm_pgm_2014_07_07.mp3" type="audio/ogg">
</audio>

You need to play the audio on a user event. (Ex: click). Autoplay, in the past, does not work on IOS and Android phones.

Chadi
07-09-2014, 07:45 PM
You need to play the audio on a user event. (Ex: click). Autoplay, in the past, does not work on IOS and Android phones.

Thanks, but I'm not sure how to do that exactly. Could you elaborate?

Dave
07-10-2014, 12:46 PM
Thanks, but I'm not sure how to do that exactly. Could you elaborate?

http://stackoverflow.com/a/15317771/1961685

That should help you out. :)

tbworld
07-10-2014, 02:46 PM
Thanks, but I'm not sure how to do that exactly. Could you elaborate?

Establishing audio playback among the different phones is quirky and requires a JavaScript solution along with HTML5. I would have to understand more of what you are doing to make a suggestion. You should start by researching this out on Google, then re-ask here when you have a better understanding of the issues.

Unfortunately, it is not as easy as just posting a bit of code. There are several 'mobile media device libraries' out there, that I would review to get your bearing. At the time I was working with them they were pretty rough, but that was then, hopefully they have improved. I ended up just kludging together my own -- it was more about testing and tweaking for each device then it was difficult programming. This is something you will probably still have to do for your setup.

Anyway, when I have more time, I will see if I can find you a 'mobile media device library', I am sure others around here would be interested.

If the library does not have exceptions for IOS(3,4) (5,6) 7, 8. then I would move on as there are quirks in each version, and that is only for the IOS side.