Widget:AudioPlayer2: Difference between revisions

From The Midnight Wiki
VisualWikitext
No edit summary
m (Text replacement - "f30b43" to "fd184e")
 
(89 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 ==
{{#widget:AudioPlayer2|mp3=https://themidnight.wiki/images/9/9e/Carl_Sagan_Show_Intro.mp3}}
 
</noinclude>
</noinclude>


Line 8: Line 10:
<html>
<html>
<style>
<style>
.player {
  background: var(--tmw-after-gradient);
  width: 330px;
  height: 190px;
  position: relative;
  border-radius: 8px;
  box-shadow: -1px 4px 10px 5px hsl(216,100%,8%);
  z-index: 1;
}
.record {
  height: 175px;
  width: 175px;
  background-color: #181312;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 28px;
  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;
}
.player-label {
  background-color: #181312;
  height: 15px;
  width: 15px;
  border: 20px solid #fd184e;
  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: #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{
.player-wrapper .sign-logo {
background-color: #D52F31;
    width: 120px;
width: 330px;
    height: 50.14px;
height: 190px;
    right: 6px;
border-radius: 8px;
    top: 131px;
box-shadow: 0 8px 0 0 rgb(190, 39, 42) ;
    filter: none;
position: relative;
}
display: none;
}
.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{
content: "";
position: absolute;
height: 135px;
width: 135px;
border:5px solid transparent;
border-top:5px solid #2C2424;
border-bottom:5px solid #2C2424;
border-radius: 50%;
}
.record:after{
content: "";
position: absolute;
height: 95px;
width: 95px;
border:5px solid transparent;
border-top:5px solid #2C2424;
border-bottom:5px solid #2C2424;
border-radius: 50%;
}
.label{
background-color: #181312;
height: 15px;
width: 15px;
border:20px solid #FF8E00;
border-radius: 50%;
}
.screw{
background-color: #181312;
height: 17px;
width: 17px;
border:10px solid #2c2c2c;
border-radius: 50%;
position: absolute;
top:-16px;
left: -16px;
}
.stick{
height: 90px;
width: 6px;
background-color: #ffffff;
position: absolute;
top:25px;
right: 95px;
transition: 1s;
transform-origin: top;
}
.play{
transform:rotate(30deg);
transform-origin: top;
transition: 1s;
}
.stick:before{
content: "";
height: 40px;
width: 6px;
background-color: #ffffff;
position: absolute;
transform: rotate(30deg);
bottom:-36px;
right: 10px;
}
.stick:after{
content: "";
position: absolute;
height: 0;
width: 10px;
border-top: 18px solid #B2AEA6;
border-left:2px solid transparent;
border-right:2px solid transparent;
transform: rotate(30deg);
top:108px;
right: 12.5px;
}
.power{
height: 28px;
width: 28px;
background-color: #ED5650;
border-radius: 50%;
position: absolute;
bottom: 20px;
right: 30px;
border:none;
border:3.5px solid rgb(190, 39, 42) ;
animation-play-state: paused;
outline: none;
}
.on{
animation: rotate 3s 1s linear infinite;
}
@keyframes rotate{
100%{
transform: rotate(360deg);
}
}
.slider{
transform: rotate(-90deg);
width: 90px;
height: 7px;
-webkit-appearance:none;
background-color: rgb(190, 39, 42) ;
border:6px solid #ED5650 ;
border-radius: 3px;
outline: none;
position: absolute;
left: 233px;
top:60px;
}
.slider::-webkit-slider-thumb{
-webkit-appearance:none;
background-color: white;
width:10px;
height: 12px;
cursor: pointer;
}
.loader{
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
color: #181312;
font-family: 'Rubik',sans-serif;
font-size: 22px;


}
.player-wrapper {
  a{
     display: flex;
     color: #181312;
     flex-direction: column;
    font-size: 25px;
     align-items: center;
     font-family: "Rubik",sans-serif;
    position:absolute;
    right:20px ;
    top:20px;
    padding:8px 12px 8px 12px;
    border:2px solid #181312;
     text-decoration:none;
}
}
</style>
</style>
<script>
  <div class="player-wrapper">
var state=0;
    <div class="player">
$(window).load(function(){
      <div class="record">
            $(".loader").hide();
        <div class="player-label"></div>
            $(".player").show();
      </div>
        });
      <div class="tone-arm">
$(document).ready(function(){
        <div class="control"></div>
$(".power").click(function(){
      </div>
  $(".record").toggleClass('on');
      <button class="btn"></button>
  $(".stick").toggleClass('play');
      <div class="slider-container">
  if(state==0){
        <input
  setTimeout(function(){
          type="range"
  $(".mysong")[0].play();
          class="slider"
  },1000);
          min="0"
  state=1;
          max="1"
  }
          step="0.1"
  else{
          value="0.7"
  $(".mysong")[0].pause();
        />
  state=0;
      </div>
  }
    <img alt="logo" width="347" height="145" class="sign-logo" src="https://themidnight.wiki/images/2/24/The_Midnight_Wiki_Logo_2023.png" />
  $(".slider").change(function(){
    </div>
  $(".mysong")[0].volume=this.value;
    <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>
});
</script>
<div class="loader">LOADING</div>
<div class="player">
<div class="record">
<div class="label"></div>
</div>
<div class="stick">
<div class="screw"></div>
</div>
<button class="power"></button>
<div class="slidecontainer">
  <input type="range" class="slider" min="0" max="1" step="0.1" value="0.7">
</div>
</div>
<audio loop class="mysong" src="<!--{$mp3|escape:'urlpathinfo'}-->" preload="auto"></audio>
</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

Retrieved from "https://themidnight.wiki/index.php?title=Widget:AudioPlayer2&oldid=12998"