No edit summary Tag: Reverted |
m (Text replacement - "f30b43" to "fd184e") |
||
| (74 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<noinclude>__NOTOC__ | <noinclude>__NOTOC__ | ||
{{#widget:AudioPlayer2|mp3=/images/b/be/Lost_boy_v2_80_.mp3}} | |||
{{#widget:AudioPlayer2|mp3=/images/5/5a/Gloria_rough_08.12.12_guide_.mp3}} | |||
== Sample result == | == Sample result == | ||
| Line 9: | Line 11: | ||
<style> | <style> | ||
.player { | .player { | ||
background- | background: var(--tmw-after-gradient); | ||
width: 330px; | width: 330px; | ||
height: 190px; | height: 190px; | ||
position: relative; | position: relative; | ||
border-radius: 8px; | border-radius: 8px; | ||
box-shadow: | box-shadow: -1px 4px 10px 5px hsl(216,100%,8%); | ||
z-index: 1; | |||
} | } | ||
.record { | .record { | ||
| Line 22: | Line 25: | ||
border-radius: 50%; | border-radius: 50%; | ||
position: absolute; | position: absolute; | ||
top: | top: 7px; | ||
left: | left: 28px; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Line 45: | Line 48: | ||
width: 95px; | width: 95px; | ||
} | } | ||
.label { | .player-label { | ||
background-color: #181312; | background-color: #181312; | ||
height: 15px; | height: 15px; | ||
width: 15px; | width: 15px; | ||
border: 20px solid # | border: 20px solid #fd184e; | ||
border-radius: 50%; | border-radius: 50%; | ||
} | } | ||
.tone-arm { | .tone-arm { | ||
height: 90px; | height: 90px; | ||
| Line 97: | Line 101: | ||
height: 28px; | height: 28px; | ||
width: 28px; | width: 28px; | ||
background-color: # | background-color: #d11b66; | ||
border-radius: 50%; | border-radius: 50%; | ||
position: absolute; | position: absolute; | ||
bottom: | bottom: 5px; | ||
left: 7px; | |||
border: 3.5px solid #95003d; | |||
border: 3.5px solid # | |||
outline: none; | outline: none; | ||
padding: 0 !important; | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| Line 114: | Line 118: | ||
height: 7px; | height: 7px; | ||
position: absolute; | position: absolute; | ||
left: | left: 252px; | ||
top: 60px; | top: 60px; | ||
background-color: # | background-color: #d11b66; | ||
outline: none; | outline: none; | ||
border-radius: 3px; | border-radius: 3px; | ||
border: 6px solid # | border: 6px solid #95003d; | ||
} | } | ||
.slider::-webkit-slider-thumb { | .slider::-webkit-slider-thumb { | ||
| Line 141: | Line 145: | ||
transform: rotate(360deg); | transform: rotate(360deg); | ||
} | } | ||
} | |||
.player-wrapper .sign-logo { | |||
width: 120px; | |||
height: 50.14px; | |||
right: 6px; | |||
top: 131px; | |||
filter: none; | |||
} | |||
.player-wrapper { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | } | ||
</style> | </style> | ||
| Line 146: | Line 164: | ||
<div class="player"> | <div class="player"> | ||
<div class="record"> | <div class="record"> | ||
<div class="label"></div> | <div class="player-label"></div> | ||
</div> | </div> | ||
<div class="tone-arm"> | <div class="tone-arm"> | ||
| Line 162: | Line 180: | ||
/> | /> | ||
</div> | </div> | ||
<img alt="logo" width="347" height="145" class="sign-logo" src="https://themidnight.wiki/images/2/24/The_Midnight_Wiki_Logo_2023.png" /> | |||
</div> | </div> | ||
<audio loop class="my-song" src="<!--{$mp3|escape:'urlpathinfo'}-->" preload="auto"></audio> | <audio loop class="my-song" src="<!--{$mp3|escape:'urlpathinfo'}-->" preload="auto"></audio> | ||
<p style="margin-bottom: 0;"><em>Press the button to play/pause</em></p> | |||
<p style="margin: 0;"><em>Adjust volume with slider</em></p> | |||
</div> | </div> | ||
</html> | </html> | ||
</includeonly> | </includeonly> | ||
Latest revision as of 21:14, 1 April 2024
Press the button to play/pause
Adjust volume with slider
Press the button to play/pause
Adjust volume with slider