HTML5 Audio player not showing correctly in iOS Chrome & Safari

Question

I have an html5/jquery/php audio player that works fine on desktop browsers but when i test in iOS - all i see is a grey track bar - I believe the controls are hidden behind track bar because i can click around randomly and it will sometimes start playing the associated file.

echo '<div class="' . $audioplayer . '" style="display: none;margin: 0 0 0 0 !important;">';
echo '<audio controls="controls">';
echo '<source src="/journeychurch/media/' . $audiofile . '.wav" type="audio/wav">';
echo 'Your browser does not support the audio element.';
echo '</audio>';
echo '</div>';

echo '<script>';
echo 'var ' . $audiobtn . ' = "' . $audiobtn . '";';
echo 'var ' . $audioplayer . ' = "' . $audioplayer . '";';
echo '$(".' . $audiobtn . '").click(function(){';
echo '$(".' . $audioplayer . '").slideToggle("slow");';
echo '});';
echo '</script>';

The live demo is here: http://idevhunter.com/journeychurch/sermons

Answer 1

As we can see, your problem is on CSS exhibition styles. The audio component is hidden on element. Try to change the padding or margin sizes from audio element and your parents.