Question

我有一个wordpress网站，其中包含音频元素，因此当有人访问该网站时，就会自动启动歌曲。看起来像这样：

<figure><audio controls autoplay loop src="song-path.mp3"></audio></figure>

这是在自定义HTML小部件上。我需要此标记仅在主页上有效，因此我制作了此CSS：

audio, canvas, progress, video {
display: none;
 }

.home audio, canvas, progress, video {
display: inline-block;
}

使用此CSS，我可以使音频在主页上保持活动状态，并在所有其他页面上隐藏起来，但是歌曲仍在被隐藏的播放器播放。

是否有一种方法可以完全禁用或静音除主页以外的所有页面上的歌曲？

谢谢

Answer 1

为什么不只在主页上添加它？

if ( is_front_page() ) :
    the_widget( 'play_mp3_widget' );
else :
    the_widget( 'dontplay_mp3_widget' ); //* Or do Nothing *//
endif;

Answer 2

我认为，理想情况下，您可能只想调查在特定页面上发布窗口小部件或PHP代码。

https://wordpress.stackexchange.com/questions/76959/how-to-add-a-specific-widget-to-only-1-page

但是，如果这样做不可行，则可以使用JavaScript停止音频。首先，向您的音频元素添加一个ID。

<audio id="myAudio" controls autoplay loop src="song-path.mp3"></audio>

下一步，在需要的地方添加此代码。

<script>
var myHomeAudio = document.getElementById("myAudio"); 
myHomeAudio.pause(); 
</script>

更新：如果您使用JavaScript路由，则ID的名称无关紧要-请注意元素的ID和在JS中引用该元素的方式是否匹配。如果您想尝试使用“家”子弹名称进行自动检测，则可能会起作用。

var pathArray = window.location.pathname.split('/');
var currentPage = pathArray[0];
if (currentPage !== "home"){ // Not equal to the Home page
  var myHomeAudio = document.getElementById("myAudio"); 
  myHomeAudio.pause(); 
}

总而言之，在时间允许的情况下，您可能希望研究服务器端模型，并避免将此小部件放在不使用它的页面上。

仅在主页上保留启用的HTML元素

2 个答案: