m (Text replacement - "f30b43" to "fd184e") |
|||
| (39 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; | z-index: 1; | ||
} | } | ||
| Line 46: | 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%; | ||
} | } | ||
| Line 150: | Line 152: | ||
right: 6px; | right: 6px; | ||
top: 131px; | top: 131px; | ||
filter: none; | |||
} | |||
.player-wrapper { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | } | ||
</style> | </style> | ||
| Line 155: | 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 174: | Line 183: | ||
</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><em>Press the button to play/pause</em></p> | <p style="margin-bottom: 0;"><em>Press the button to play/pause</em></p> | ||
<p><em>Adjust volume with slider</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