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

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 a开发者_StackOverflowudio files in an iphone webapp without opening a modal external player?

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.

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

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

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.