Embedding html5 <audio> in a mobilesafari webapp. is it possible to load an image in place of the quicktime logo in the modal player?

Question

I haven't be able to find a resource explaining if this is possible at all. The Apple documentation found here

https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1

...doesn't mention such features.

I also tried embedding audio with the <embed> tag which pulls up the same modal quicktime player.

Is there a way to do this or alternatively – is there a way to play audio files in an iphone webapp without opening a modal external player?

Answer 1

I found a workaround for achieving this functionality by using Apple's mediafilesegmenter command line tool to prepare an mp3 for "HTTP Live Streaming" – Apple's new protocol for streaming media through HTTP.

More info here: http://developer.apple.com/iphone/library/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40008332-CH1-DontLinkElementID_29

By using the arguments --audio-only --meta-file poster.png --meta-type picture you can create an mp3 stream that will display the poster.png image in the external quicktime player while the audio is playing.

Answer 2

You can play audio inline using jPlayer, a jQuery MP3 plugin.

Demo (try on iPhone): http://happyworm.com/jPlayerLab/single-page-app/#first

Answer 3

I'm not aware of any such customisation ability. You could perhaps instead add a bit of script that completely hides the <audio> element, and provides alternative JavaScript interaction controls styled to your choosing.