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 展示样式。音频组件隐藏在元素上。尝试从音频元素和您的父母更改填充或边距大小。