How to get mp3 files to play in iPhone Safari web browser? - iphone

How can I get an MP3 audio file to play in iPhone Safari (OS 3.1)?
Currently, I am generating HTML e.g.
<img src="sound.png" alt="Play audio"/>
to play the file on clicking on the nested image. This works on Safari on OSX, but not on the iPhone. There, the content of the file is shown as text, but it does not appear to be a mime-type problem when checked with Live HTTP Headers from Firefox.
I have found approaches referenced here. These require the Safari Plugins setting to be on in the preferences, which is why it did not previously work for me.

I imagine your best bet is to invoke a quicktime object in your web page. For playing mp3 files, your best bet is to serve a Winamp .pls style playlist with mimetype audio/x-scpls that serves as a signpost to the mp3 files. Create an embedded quicktime object around it. Try the docs for quicktime:
http://www.apple.com/quicktime/tutorials/embed.html

If you manage to get it working, it will play in the QuickTime Application (Full screen).
The HTML5 sound API is not available in the current iPhone OS (3.XX), but in OS 4.XX it will be available (at least playing video without launching the full screen player)

Use the HTML5 audio tag with an mp3 in it. http://www.w3schools.com/tags/tag_audio.asp

Hey this simple html5 tag will do the trick
<audio src="someUrlToContent" controls="controls"> </audio>
what this does on the iPhone is bring up a play button that when pushed will go to quicktime.
on the iPad, a scrubbing play control will come up with a play/pause button. on both, the play control will size to the div they are in

As jottos points out, iPhone 3.x does not support HTML5 audio. If you want audio in the early versions of iPhone OS, you must use Quicktime specific code. This example actually embeds an entire playlist (not just a single song). If you want a single song, drop the qtnext parameters:
<embed
src="riding-with-the-king.jpg"
href="songs/01-riding-with-the-king.mp3"
artworkdata="riding-with-the-king.jpg"
type="audio/x-mp3"
target="myself"
scale="1"
controller="false"
loop="false"
autoplay="false"
allowembedtagoverrides="true"
height="500"
width="500"
qtnext1="<songs/02 Ten Long Years.mp3> T<myself> E<controller=true autoplay=true loop=false>"
qtnext2="<songs/03 Key to the Highway.mp3> T<myself>"
qtnext3="<songs/04 Marry You.mp3> T<myself>"
qtnext4="<songs/05 Three O'Clock Blues.mp3> T<myself>"
qtnext5="<songs/06 Help the Poor.mp3> T<myself>"
qtnext6="<songs/07 I Wanna Be.mp3> T<myself>"
qtnext7="<songs/08 Worried Life Blues.mp3> T<myself>"
qtnext8="<songs/09 Days of Old.mp3> T<myself>"
qtnext9="<songs/10 When My Heart Beats Like a Hammer.mp3> T<myself>"
qtnext10="<songs/11 Hold on I'm Coming.mp3> T<myself>"
qtnext11="<songs/12 Come Rain or Come Shine.mp3> T<myself>"
>

I had issues with mp3 on my local development system (Linux/apache2). I was only apple to play .OGG files in both Firefox(8) and Chrome(15) from the local file system. If I used the audio tag to link to a remote .MP3 or .OGG file either would work though? I am not sure why this is the case and since most of my local music files are MP3 it took me awhile to figure out that it was the file format that was the problem.

Related

Using a webview to play an mp3- is it possible to keep it playing even when the screen is locked?

I have a portion of my app that simply launches a webview linked to an mp3 file- it opens the file and plays the audio. What I'd like to do is allow that audio to continue playing even if the user locks their iPhone. (As a side note, is there any way to replace the default Quicktime logo that appears in the player? Not that big a deal, just thought I'd ask =)
A third question- I also do the same thing (webview) with an .m3u linked file to stream live audio throughout the week- is it also possible to keep it playing when the iPhone is locked?
Thanks!!
Ben
Quick Edit: The same URLs work great in IOS Safari (locking and unlocking doesn't affect the audio. Just not in my app's webviews.
I did find my answer though, in case anyone comes here looking. Easiest thing in the world too- just add a row to the plist file labeled "Required Background Modes" and under that set item 0's value to "App plays audio". Voila!
Since the audio is in a UIWebView, I don't believe that you'd be able to play it in the background.
EDIT: I was wrong, adding "App Plays Audio" to the UIBackgroundModes will make it work even when audio is in a UIWebView.
Have you thought about just streaming the .mp3 file yourself? Should be easy enough and you'd be able to setup background streaming. To get you started, I'd check out Matt Gallagher's AudioStreamer class which easily allows you to stream .mp3 files and other audio files from the net: https://github.com/mattgallagher/AudioStreamer

mp4 vs m3u8 format

I am trying to play a video in iPhone, which has m3u8 format. The video's link is parsed from an XML (so i cannot change it). I'm trying to play it with MoviePlayerController (set it on fullscreen, controlStyle is fullscreen too, set the presentModalViewController to the MoviePlayerController). After pressing the play button, the movie has only sound for a few seconds, no video screen, and the app crashes.
In this XML I have a different videolink, which contains mp4 format. Playing the video in the same mode (with MoviePlayerController and the settings...), it works fine. So: do you have any ideas what the problem is? If there is any encoding problems of m3u8? If it can be changed and how?
Thank you :)
Look the AVPlayerDemoPlaybackViewController class from this very useful open source control released by Peter Steinberger
https://github.com/steipete/PSPushPopPressView
Thanks again Peter!

How to obtain m4v metadata using iOS SDK

Is there a way to access the metadata (such as width and height of the video) via iOS SDK for m4v inside the resource bundle? I would like to use this info to center the video around the screen bounds.
On a mac this would be easy, because you can utilise the spotlight metadata, but on iOS it's slightly more complicated. A couple of suggestions:
The easiest way to do this is just to load your movie into an MPMoviePlayerController and check the naturalSize property. There are a number of other properties including playableDuration. The downside to this is you have to load the movie into an MPMoviePlayerController, which may be fine for you if you're going to play the file straight away.
The harder but more efficient way is to use the open source libmediainfo library, but it's obviously more complex to integrate than using an MPMoviePlayerController 'out of the box'.

Play audio and video at a same time in iPhone application

Is it possible to play audio and video file at a same time? I want to play different audio file and video file at a same time and also want control for both, so is it possible?
Sorry, not that I know of. The movie view automatically stops all audio files and takes up the whole screen, so you are forced to listen to the audio for the video.
If the audio is part of the video file, yes.
If it's an MP3 file or some other external type how are you planning on playing it? The phone might allow this to happen depending on what you're up too.
You might be in luck soon though...
Another helpful link is here.

Play an audio file and return back to the page

in my iPhone app, I have an UIWebView with some simple HTML links to audio files.
When the user opens such an audio file, media player plays it an leaves my
UIWebView with this screen:
alt text http://img.skitch.com/20090622-rnx614kynh8faecjmuiyec159b.jpg
How do I dismiss it after the audio file was played?
I've searched for UIWebView's delegates without finding something useful.
Mike, I've found a solution: Create a HTML page and embed your audio file the follwing way:
<embed src=”http://www.mypage.com/test.wav”>
This gives you an embedded mini player.
No, you can't dismiss that properly, or at least I couldn't figure out how to do it. So I just used the movie player for all my audio and video. It's a little more complex but it is much more flexible.