测试/4

MediaWiki:Prism

MediaWiki:Prism-tomorrow.css

MediaWiki:AudioPlayer

MediaWiki:BWIKIAudioPlayer

MediaWiki:AudioPlayer.css

完整实例（这段请不要照抄）

标题：

播放模式：

---

单播放：

单暂停：

单停止：

播放/暂停：

播放/停止：

---

上一曲：

下一曲：

---

旋转的进度条：

---

长度进度条：

---

偏移进度条：

---

当前时长/总时长（mm:ss）：/

当前毫秒数/总毫秒数（MS）：/

当前秒/总秒（S）：/

---

播放列表

实例

仿碧蓝航线WIKI语音控件

<div class="BWIKIAudioPlayer test2" data-wiki="blhx" data-file="企业profile">
	<div class="ctrl" data-action="play,stop"></div>
</div>
<div class="BWIKIAudioPlayer test2" data-wiki="blhx" data-file="小企业profile">
	<div class="ctrl" data-action="play,stop"></div>
</div>

.BWIKIAudioPlayer.test2 .ctrl{
	height: 27px;
	width: 27px;
}
.BWIKIAudioPlayer.test2 .ctrl[data-action^="play"]{
	background-image: url(//patchwiki.biligame.com/images/blhx/f/f8/qbumq13b8eeas68ovjy1rwj2nk9ad4w.png);
}
.BWIKIAudioPlayer.test2 .ctrl[data-action^="stop"]{
	background-image: url(//patchwiki.biligame.com/images/blhx/9/93/7sgr8ncyyqory7dmp0ycmjvegvbyaso.png);
}

随手糊的

假装这是一张图片

<div class="BWIKIAudioPlayer test3" data-wiki="allb" data-file="音乐-月明星稀">
	<div class="fakeImg">假装这是一张图片</div>
	<div class="ctrls">
		<div class="ctrl" data-action="play,pause"></div>
		<div class="ctrl" data-action="stop"></div>
	</div>
	<div class="bar" data-type="offset">
		<div class="inner"></div>
	</div>
</div>

.BWIKIAudioPlayer.test3 {
	position: relative;
	display: inline-block;
}
.BWIKIAudioPlayer.test3 .fakeImg {
	width: 200px;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: pink;
}
.BWIKIAudioPlayer.test3 .ctrls {
	position: absolute;
	bottom: 2px;
	right: 0;
	display: flex;
}
.BWIKIAudioPlayer.test3 .ctrl {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid;
	margin: 2px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	box-shadow: inset 0px 0px 1px 1px black, 0px 0px 1px 1px black;
	text-shadow: 0px 0px 5px black;
}
.BWIKIAudioPlayer.test3 .ctrl[data-action^="play"]:after{
	content: "播";
}
.BWIKIAudioPlayer.test3 .ctrl[data-action^="pause"]:after{
	content: "暂";
}
.BWIKIAudioPlayer.test3 .ctrl[data-action^="stop"]:after{
	content: "止";
}
.BWIKIAudioPlayer.test3 .bar[data-type="offset"] {
	position: absolute;
	bottom: 0;
	height: 2px;
	width: 100%;
}
.BWIKIAudioPlayer.test3 .bar[data-type="offset"] .inner {
	height: 100%;
	width: calc(var(--c) / var(--d) * 100%);
	background: cyan;
}