WordPress音频播放器有两种不同的风格

时间:2021-01-01 作者:Josh Rodgers

因此,当我的页面加载时,可以看到如下音频播放器:

enter image description here

但是,当页面完成加载时,它看起来像:

enter image description here

我在Google Chrome中注意到了这一点,但不确定它是Google Chrome特定的播放器,还是WordPress音频播放器在加载其样式之前的默认外观。这是一件很快的事。。。我看了几秒钟灰色的,然后WordPress加载,它消失了。

我之所以问这个问题,是因为我觉得它看起来比WordPress音频播放器好得多。。。有没有办法使用这个,或者有人知道这是谷歌Chrome专用播放器还是WordPress专用播放器?

我知道这不是主题或编码,因为我从头开始创建了所有东西,所以它来自其他地方

我所做的一切就是从mp3文件中复制并粘贴一个链接:

enter image description here

有什么想法吗?

谢谢,乔希

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

所需的UI是<audio> 标签,特别是谷歌浏览器。DOM完成加载后,该标记将被替换为基于JS的音频播放器控件。黑暗播放器是基于JS的音频播放器。您喜欢的浅色UI是浏览器的默认UI。

这意味着,只有当用户具有相同的操作系统和浏览器以及相同的操作系统设置时,您想要的UI才可用。

例如,以下是各种浏览器中的MP3文件默认值audio 三大浏览器(safari、google chrome、firefox)中MacOS上的播放器实现:

Safari

Chrome

Firefox

请注意,我的机器设置为暗模式,其中两个浏览器相应地调整了播放器。

我建议您保留WP Media元素脚本/样式,并在顶部添加您自己的样式。这可以确保您的播放器在所有平台上都符合您的要求。

如果您想恢复到<audio> 标签,您可以使用此选项:

add_action(\'init\', \'remove_media_element\', 10);
function remove_media_element() {
    wp_deregister_script(\'wp-mediaelement\');
    wp_deregister_style(\'wp-mediaelement\');
} 
但请记住:

这也会影响<video> 标签在不同设备上的播放器外观会有所不同,播放器功能也会有所不同。E、 g.Safari有airplay控件,但Chrome没有,Chrome有下载菜单,但Safari没有,一些插件将停止工作。在谷歌上快速搜索该代码时,一位用户问,为什么它破坏了一个图库插件,浏览器可以并且确实改变了这些UI,你今天看到的可能不是你明天看到的

相关推荐

将一个PHP变量(loop-audio.php)传递给jQuery函数(js/script.js)

我已经为此搜索了很多次,似乎得到了不同的答案。在我的情况下,jQuery函数必须使用来自不同文件的PHP变量。我如何才能做到这一点?请给出清晰简单的答案。