HTML5音频标签在iOS7设备上不起作用

Question

I am working on an application in which we used html5 audio control. It was pretty good and working fine in iPad and iPhone with iOS6. After upgrading to the iOS7, the seekbar doesn't show up. There is only one play button without any volume bar. Is there any one who is also facing the similar issue.

<audio src='mymp3file.mp3' controls></audio>

Answer 1

This code works for iOS7 also:

<style>
audio { width: 500px; display: block; margin:20px; }
</style>

<audio src='mymp3file.mp3' controls></audio>

Answer 2

It's possible, that there are some default-css-properties, which have been changed in iOS7. This can lead to "invisible controls".

I found a similar question (+answer) here: github.com/senchalabs/jQTouch/issues/499

Just set the width and display -attributes to appropiate values, and check if the controls are visible afterwards

Answer 3

I'm using ios 8 on my iphone and had to set height:100px; for the play arrow to show fully. Must be some bug in iOS 8 on the iphone. The control was displaying fine on iPad but on iPhone only showed 1/2 the height of the play arrow. I also note that just hitting 'refresh' on the page after making the change was not reliable. I had to close out the page and go back to it for the change to take affect.