HTML5音频播放器无法在iOS Chrome和Safari中正确显示

Question

我有一个html5 / jquery / php音频播放器，可以在桌面浏览器上正常工作，但是当我在iOS中进行测试时-我看到的只是一个灰色的跟踪栏-我相信控件隐藏在跟踪栏的后面，因为我可以随意单击周围，它将有时会开始播放关联的文件。

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>';

现场演示在这里： http : //idevhunter.com/journeychurch/sermons

Answer 1

如我们所见，您的问题在于CSS展示样式。 音频组件隐藏在元素上。 尝试从音频元素和您的父母更改填充或边距大小。