Question

我有一个网页，该网页显示并播放存储在网络其他位置的语音消息。我在iframe中运行的Chrome内置音频控件遇到问题。外观如下：audio control in iframe
这是代码：

<a href='https://api.twilio.com" . $recording->uri . "' target='newframe'>Play</a>
....
<iframe name='newframe' frameborder='0' height='150' width='300'></iframe>

如您所见，音频控件上方有一个很大的黑色区域。

我可以将iframe包裹在div中以解决问题：audio control in iframe with round corners
代码：

<div style='display:inline-block;height:150px;overflow:hidden;border-radius:27px>
    <iframe name='newframe' frameborder='0' height='150' width='300'></iframe>
</div>

但是，如果我尝试减小iframe和div的高度，则音频控件会变小，并且我松开了时间滑块：shorter iframe
代码：

<div style='display:inline-block;height:54px;overflow:hidden;border-radius:27px>
    <iframe name='newframe' frameborder='0' height='54' width='300'></iframe>
</div>

我尝试仅减小div或iframe的高度而不减小其他高度，但是音频控件不在框架之内。

有没有在不更改音频控件的情况下减小iframe高度的想法？

我正在考虑改用HTML5音频控件（如下面的站点中所示），但是我不确定如何从链接中加载然后播放新消息。
https://www.w3schools.com/tags/tag_audio.asp
https://amazingaudioplayer.com/html5-audio-player-api/playpause-audio-player-inside-an-iframe/

谢谢

在iframe中调整音频控制的大小

0 个答案: