Widget:AudioPlayer2: Difference between revisions

VisualWikitext

Latest revision as of 22:14, 1 April 2024

Press the button to play/pause

Adjust volume with slider

Press the button to play/pause

Adjust volume with slider

@@ Line 1: / Line 1: @@
 <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 ==
@@ Line 7: / Line 9: @@
 <includeonly>
 <html>
-<script>
+<style>
-		var state=0;
+.player {
-		$(window).load(function(){
+  background: var(--tmw-after-gradient);
-             $(".loader").hide();
+  width: 330px;
-             $(".player").show();
+  height: 190px;
-        });
+  position: relative;
-		$(document).ready(function(){
+  border-radius: 8px;
-			$(".power").click(function(){
+  box-shadow: -1px 4px 10px 5px hsl(216,100%,8%);
-  				$(".record").toggleClass('on');
+  z-index: 1;
-  				$(".stick").toggleClass('play');
+}
-  				if(state==0){
+.record {
-  					setTimeout(function(){
+  height: 175px;
-  					 $(".mysong")[0].play();
+  width: 175px;
-  					},1000);
+  background-color: #181312;
-  					state=1;
+  border-radius: 50%;
-  				}
+  position: absolute;
-  				else{
+  top: 7px;
-  					$(".mysong")[0].pause();
+  left: 28px;
-  					state=0;
+  display: flex;
-  				}
+  align-items: center;
-  				$(".slider").change(function(){
+  justify-content: center;
-  					$(".mysong")[0].volume=this.value;
+}
-  				});
+.record:before,
-  			});
+.record:after {
+  position: absolute;
-		});
+  content: "";
-</script>
+  border: 5px solid transparent;
+  border-top-color: #2c2424;
+  border-bottom-color: #2c2424;
+  border-radius: 50%;
+}
+.record:before {
+  height: 135px;
+  width: 135px;
+}
+.record:after {
+  height: 95px;
+  width: 95px;
+}
+.player-label {
+  background-color: #181312;
+  height: 15px;
+  width: 15px;
+  border: 20px solid #fd184e;
+  border-radius: 50%;
+}
-<div class="loader">LOADING</div>
+.tone-arm {
-	<div class="player">
+  height: 90px;
-		<div class="record">
+  width: 6px;
-			<div class="label"></div>
+  background-color: #ffffff;
-		</div>
+  position: absolute;
-		<div class="stick">
+  top: 25px;
-			<div class="screw"></div>
+  right: 95px;
-		</div>
+  transition: 1s;
-		<button class="power"></button>
+  transform-origin: top;
-		<div class="slidecontainer">
+}
-  		<input type="range" class="slider" min="0" max="1" step="0.1" value="0.7">
+.control {
-	</div>
+  background-color: #181312;
-	</div>
+  height: 17px;
-	<audio loop class="mysong" src="<!--{$mp3|escape:'urlpathinfo'}-->" preload="auto"></audio>
+  width: 17px;
+  border: 10px solid #2c2c2c;
+  border-radius: 50%;
+  position: absolute;
+  top: -16px;
+  left: -16px;
+}
+.tone-arm:before {
+  content: "";
+  height: 40px;
+  width: 6px;
+  background-color: #ffffff;
+  position: absolute;
+  transform: rotate(30deg);
+  bottom: -36px;
+  right: 10px;
+}
+.tone-arm:after {
+  content: "";
+  position: absolute;
+  height: 0;
+  width: 10px;
+  border-top: 18px solid #b2aea6;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  top: 108px;
+  right: 12.5px;
+  transform: rotate(30deg);
+}
+.btn {
+  height: 28px;
+  width: 28px;
+  background-color: #d11b66;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 5px;
+  left: 7px;
+  border: 3.5px solid #95003d;
+  outline: none;
+  padding: 0 !important;
+  cursor: pointer;
+}
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  transform: rotate(-90deg);
+  width: 90px;
+  height: 7px;
+  position: absolute;
+  left: 252px;
+  top: 60px;
+  background-color: #d11b66;
+  outline: none;
+  border-radius: 3px;
+  border: 6px solid #95003d;
+}
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 12px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.play {
+  transform: rotate(30deg);
+  transform-origin: top;
+  transition: 1s;
+}
+.on {
+  animation: spin 3s 1s linear infinite;
+}
+@keyframes spin {
+% {
+    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>
+  <div class="player-wrapper">
+    <div class="player">
+      <div class="record">
+        <div class="player-label"></div>
+      </div>
+      <div class="tone-arm">
+        <div class="control"></div>
+      </div>
+      <button class="btn"></button>
+      <div class="slider-container">
+        <input
+          type="range"
+          class="slider"
+          min="0"
+          max="1"
+          step="0.1"
+          value="0.7"
+        />
+      </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>
+    <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>
 </html>
 </includeonly>