Widget:AudioPlayer2: Difference between revisions

VisualWikitext

Revision as of 09:33, 13 June 2023

Sample result

Press the button to play/pause

Adjust volume with slider

@@ Line 2: / Line 2: @@
 == Sample result ==
+{{#widget:AudioPlayer2|mp3=/images/b/be/Lost_boy_v2_80_.mp3}}
 </noinclude>
 <includeonly>
 <html>
+<style>
+.player {
+  background-color: #d52f31;
+  width: 330px;
+  height: 190px;
+  position: relative;
+  border-radius: 8px;
+  box-shadow: 0 8px 0 0 #be272a;
+}
+.record {
+  height: 175px;
+  width: 175px;
+  background-color: #181312;
+  border-radius: 50%;
+  position: absolute;
+  top: 10px;
+  left: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.record:before,
+.record:after {
+  position: absolute;
+  content: "";
+  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;
+}
+.label {
+  background-color: #181312;
+  height: 15px;
+  width: 15px;
+  border: 20px solid #ff8e00;
+  border-radius: 50%;
+}
+.tone-arm {
+  height: 90px;
+  width: 6px;
+  background-color: #ffffff;
+  position: absolute;
+  top: 25px;
+  right: 95px;
+  transition: 1s;
+  transform-origin: top;
+}
+.control {
+  background-color: #181312;
+  height: 17px;
+  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: #ed5650;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 20px;
+  right: 30px;
+  border: none;
+  border: 3.5px solid #be272a;
+  outline: none;
+  cursor: pointer;
+}
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  transform: rotate(-90deg);
+  width: 90px;
+  height: 7px;
+  position: absolute;
+  left: 233px;
+  top: 60px;
+  background-color: #be272a;
+  outline: none;
+  border-radius: 3px;
+  border: 6px solid #ed5650;
+}
+.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);
+  }
+}
+</style>
 <script>
-		var state=0;
+let state = false;
-		$(window).load(function(){
+let btn = document.querySelector(".btn");
-             $(".loader").hide();
+let record = document.querySelector(".record");
-             $(".player").show();
+let toneArm = document.querySelector(".tone-arm");
-        });
+let song = document.querySelector(".my-song");
-		$(document).ready(function(){
+let slider = document.querySelector(".slider");
-			$(".power").click(function(){
-  				$(".record").toggleClass('on');
+btn.addEventListener("click", () => {
-  				$(".stick").toggleClass('play');
+  if (state == false) {
-  				if(state==0){
+    record.classList.add("on");
-  					setTimeout(function(){
+    toneArm.classList.add("play");
-  					 $(".mysong")[0].play();
+    setTimeout(() => {
-  					},1000);
+      song.play();
-  					state=1;
+    }, 1000);
-  				}
+  } else {
-  				else{
+    record.classList.remove("on");
-  					$(".mysong")[0].pause();
+    toneArm.classList.remove("play");
-  					state=0;
+    song.pause();
-  				}
+  }
-  				$(".slider").change(function(){
+  state = !state;
-  					$(".mysong")[0].volume=this.value;
+});
-  				});
-  			});
+slider.addEventListener("input", (e) => {
+  song.volume = Number(e.target.value);
-		});
+});
 </script>
+  <div class="player-wrapper">
-<div class="loader">LOADING</div>
+    <div class="player">
-	<div class="player">
+      <div class="record">
-		<div class="record">
+        <div class="label"></div>
-			<div class="label"></div>
+      </div>
-		</div>
+      <div class="tone-arm">
-		<div class="stick">
+        <div class="control"></div>
-			<div class="screw"></div>
+      </div>
-		</div>
+      <button class="btn"></button>
-		<button class="power"></button>
+      <div class="slider-container">
-		<div class="slidecontainer">
+        <input
-  		<input type="range" class="slider" min="0" max="1" step="0.1" value="0.7">
+          type="range"
-	</div>
+          class="slider"
-	</div>
+          min="0"
-	<audio loop class="mysong" src="<!--{$mp3|escape:'urlpathinfo'}-->" preload="auto"></audio>
+          max="1"
+          step="0.1"
+          value="0.7"
+        />
+      </div>
+    </div>
+    <audio loop class="my-song" src="<!--{$mp3|escape:'urlpathinfo'}-->" preload="auto"></audio>
+  </div>
 </html>
 </includeonly>