HTML5 Audio player not showing correctly in iOS Chrome & Safari

0
votes

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

1
javascriptjqueryioshtmlaudio

1 Answers

0
votes

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.