Widget:AudioPlayer2: Difference between revisions

From The Midnight Wiki
m (Text replacement - "f30b43" to "fd184e")
 
(83 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 7: Line 9:
<includeonly>
<includeonly>
<html>
<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 {
  100% {
    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>
</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

Sample result