[!

[[html style="position: absolute; top: 0; left: 0; max-width: 30vw; width: 100vw; height: min-content;"]]
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<style>
@import url(https://arandintday.github.io/thebackhubscn/New_BHL/css/liminal.css);
@import url(https://backrooms-wiki.wdfiles.com/local--code/theme%3A/1);
@import url(https://backrooms-wiki.wdfiles.com/local--code/theme%3A/2);

div { transition: 0.5s }
div .rate-points:before {
margin-right: 0.6em;
content: "volume_down ";
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}

div:hover {
filter: brightness(110%);
cursor: pointer;
}
div .rate-points:hover:before {
content: "volume_down ";
}
div.disabled {
opacity: 0.5;
pointer events: none;
filter: brightness(60%);
}
div.disabled .rate-points:before {
content: "volume_up ";
}

</style>
<div class="page-rate-widget-box" id="disable" onclick="disable(); AudioSource.play(); $(this).addClass('disabled');" "> <span class="rate-points">播放氛围音</span></div>
<script>
var AudioSource = new Audio("https://backrooms-sandbox-2.wdfiles.com/local--files/unknown1328/AmbianceLevel310");
AudioSource.loop = true;
function disable() {
document.getElementById("disable").classList.add("disabled")
}
</script>

+* 如何使用：

class 处的可用参数包括以下内容，支持简繁体及英文输入。

该组件支持简繁切换，如下方代码所示：

在 lang 处选择语言，cn 表示简体中文，tr 表示繁体中文，不填默认选择简体中文。

++* 自定义等级

+* 使用 CSS 进行自定义：
你可以使用 CSS 进行额外的自定义，将代码放入到 [[module css]] 中或者是放入到页面的版式内都可以。在这一组件中，不要把 [[module css]] 放在 [[include]] 里面，把它放在那个的下面或者是页面的顶部或底部。
将这些代码放入到你的页面/版式中以编辑所有的颜色，因为组件的 |color= 部分仅能控制背景：

++* 旧版颜色：
如果你不喜欢新版的样式，想要用回旧版的红色边框色，只需要在你的页面中与组件一同引入下方的代码：