Widget:AudioPlayer2: Difference between revisions

From The Midnight Wiki
VisualWikitext
No edit summary
No edit summary
Line 7: Line 7:
<includeonly>
<includeonly>
<html>
<html>
        <style>
<style>
            button {
 
                padding: 0;
.player{
                border: 0;
background-color: #D52F31;
                background: transparent;
width: 330px;
                cursor: pointer;
height: 190px;
                outline: none;
border-radius: 8px;
                width: 40px;
box-shadow: 0 8px 0 0 rgb(190, 39, 42) ;
                height: 40px;
position: relative;
                float: left;
display: none;
            }
}
            #audio-player-container {
.record{
                position: relative;
height: 175px;
                margin: 100px 2.5% auto 2.5%;
width: 175px;
                width: 95%;
background-color: #181312;
                max-width: 500px;
border-radius: 50%;
                height: 132px;
position: absolute;
                background: #fff;
top:10px;
                font-family: Arial, Helvetica, sans-serif;
left: 20px;
                --seek-before-width: 0%;
display: flex;
                --volume-before-width: 100%;
align-items: center;
                --buffered-width: 0%;
justify-content: center;
                letter-spacing: -0.5px;
}
            }
.record:before{
            #audio-player-container::before {
content: "";
                position: absolute;
position: absolute;
                content: '';
height: 135px;
                width: calc(100% + 4px);
width: 135px;
                height: calc(100% + 4px);
border:5px solid transparent;
                left: -2px;
border-top:5px solid #2C2424;
                top: -2px;
border-bottom:5px solid #2C2424;
                background: linear-gradient(to left, #007db5, #ff8a00);
border-radius: 50%;
                z-index: -1;
}
            }
.record:after{
            p {
content: "";
                position: absolute;
position: absolute;
                top: -18px;
height: 95px;
                right: 5%;
width: 95px;
                padding: 0 5px;
border:5px solid transparent;
                margin: 0;
border-top:5px solid #2C2424;
                font-size: 28px;
border-bottom:5px solid #2C2424;
                background: #fff;
border-radius: 50%;
            }
}
            #play-icon {
.label{
                margin: 20px 2.5% 10px 2.5%;
background-color: #181312;
            }
height: 15px;
            path {
width: 15px;
                stroke: #007db5;
border:20px solid #FF8E00;
            }
border-radius: 50%;
            .time {
}
                display: inline-block;
.screw{
                width: 37px;
background-color: #181312;
                text-align: center;
height: 17px;
                font-size: 20px;
width: 17px;
                margin: 28.5px 0 18.5px 0;
border:10px solid #2c2c2c;
                float: left;
border-radius: 50%;
            }
position: absolute;
            output {
top:-16px;
                display: inline-block;
left: -16px;
                width: 32px;
}
                text-align: center;
.stick{
                font-size: 20px;
height: 90px;
                margin: 10px 2.5% 0 5%;
width: 6px;
                float: left;
background-color: #ffffff;
                clear: left;
position: absolute;
            }
top:25px;
            #volume-slider {
right: 95px;
                margin: 10px 2.5%;
transition: 1s;
                width: 58%;
transform-origin: top;  
            }
}
            #volume-slider::-webkit-slider-runnable-track {
.play{
                background: rgba(0, 125, 181, 0.6);
transform:rotate(30deg);
            }
transform-origin: top;
            #volume-slider::-moz-range-track {
transition: 1s;
                background: rgba(0, 125, 181, 0.6);
}
            }
.stick:before{
            #volume-slider::-ms-fill-upper {
content: "";
                background: rgba(0, 125, 181, 0.6);
height: 40px;
            }
width: 6px;
            #volume-slider::before {
background-color: #ffffff;
                width: var(--volume-before-width);
position: absolute;
            }
transform: rotate(30deg);
            #mute-icon {
bottom:-36px;
                margin: 0 2.5%;
right: 10px;
            }
}
            input[type="range"] {
.stick:after{
                position: relative;
content: "";
                -webkit-appearance: none;
position: absolute;
                width: 48%;
height: 0;
                margin: 0;
width: 10px;
                padding: 0;
border-top: 18px solid #B2AEA6;
                height: 19px;
border-left:2px solid transparent;
                margin: 30px 2.5% 20px 2.5%;
border-right:2px solid transparent;
                float: left;
transform: rotate(30deg);
                outline: none;
top:108px;
            }
right: 12.5px;
            input[type="range"]::-webkit-slider-runnable-track {
}
                width: 100%;
.power{
                height: 3px;
height: 28px;
                cursor: pointer;
width: 28px;
                background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
background-color: #ED5650;
            }
border-radius: 50%;
            input[type="range"]::before {
position: absolute;
                position: absolute;
bottom: 20px;
                content: "";
right: 30px;
                top: 8px;
border:none;
                left: 0;
border:3.5px solid rgb(190, 39, 42) ;
                width: var(--seek-before-width);
animation-play-state: paused;
                height: 3px;
outline: none;
                background-color: #007db5;
}
                cursor: pointer;
.on{
            }
animation: rotate 3s 1s linear infinite;
            input[type="range"]::-webkit-slider-thumb {
}
                position: relative;
@keyframes rotate{
                -webkit-appearance: none;
100%{
                box-sizing: content-box;
transform: rotate(360deg);
                border: 1px solid #007db5;
}
                height: 15px;
}
                width: 15px;
.slider{
                border-radius: 50%;
transform: rotate(-90deg);
                background-color: #fff;
width: 90px;
                cursor: pointer;
height: 7px;
                margin: -7px 0 0 0;
-webkit-appearance:none;
            }
background-color: rgb(190, 39, 42) ;
            input[type="range"]:active::-webkit-slider-thumb {
border:6px solid #ED5650 ;
                transform: scale(1.2);
border-radius: 3px;
                background: #007db5;
outline: none;
            }
position: absolute;
            input[type="range"]::-moz-range-track {
left: 233px;
                width: 100%;
top:60px;
                height: 3px;
}
                cursor: pointer;
.slider::-webkit-slider-thumb{
                background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
-webkit-appearance:none;
            }
background-color: white;
            input[type="range"]::-moz-range-progress {
width:10px;
                background-color: #007db5;
height: 12px;  
            }
cursor: pointer;
            input[type="range"]::-moz-focus-outer {
}
                border: 0;
.loader{
            }
height: 100vh;
            input[type="range"]::-moz-range-thumb {
width: 100vw;
                box-sizing: content-box;
display: flex;
                border: 1px solid #007db5;
align-items: center;
                height: 15px;
justify-content: center;
                width: 15px;
color: #181312;
                border-radius: 50%;
font-family: 'Rubik',sans-serif;
                background-color: #fff;
font-size: 22px;
                cursor: pointer;
 
            }
}
            input[type="range"]:active::-moz-range-thumb {
  a{
                transform: scale(1.2);
    color: #181312;
                background: #007db5;
    font-size: 25px;
            }
    font-family: "Rubik",sans-serif;
            input[type="range"]::-ms-track {
    position:absolute;
                width: 100%;
    right:20px ;
                height: 3px;
    top:20px;
                cursor: pointer;
    padding:8px 12px 8px 12px;
                background: transparent;
    border:2px solid #181312;
                border: solid transparent;
    text-decoration:none;
                color: transparent;
}
            }
</style>
            input[type="range"]::-ms-fill-lower {
<script>
                background-color: #007db5;
var state=0;
            }
$(window).load(function(){
            input[type="range"]::-ms-fill-upper {
            $(".loader").hide();
                background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
            $(".player").show();
            }
        });
            input[type="range"]::-ms-thumb {
$(document).ready(function(){
                box-sizing: content-box;
$(".power").click(function(){
                border: 1px solid #007db5;
  $(".record").toggleClass('on');
                height: 15px;
  $(".stick").toggleClass('play');
                width: 15px;
  if(state==0){
                border-radius: 50%;
  setTimeout(function(){
                background-color: #fff;
  $(".mysong")[0].play();
                cursor: pointer;
  },1000);
            }
  state=1;
            input[type="range"]:active::-ms-thumb {
  }
                transform: scale(1.2);
  else{
                background: #007db5;
  $(".mysong")[0].pause();
            }
  state=0;
        </style>
  }
        <div id="audio-player-container">
  $(".slider").change(function(){
            <audio src="" preload="metadata" loop></audio>
  $(".mysong")[0].volume=this.value;
            <p>audio player ish</p>
  });
            <button id="play-icon"></button>
  });
            <span id="current-time" class="time">0:00</span>
 
            <input type="range" id="seek-slider" max="100" value="0">
});
            <span id="duration" class="time">0:00</span>
</script>
            <output id="volume-output">100</output>
<div class="loader">LOADING</div>
            <input type="range" id="volume-slider" max="100" value="100">
<div class="player">
            <button id="mute-icon"></button>
<div class="record">
        </div>
<div class="label"></div>
<audio-player data-src="<!--{$mp3|escape:'urlpathinfo'}-->"></audio-player>
</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>

Revision as of 22:00, 12 June 2023


Sample result

Press the button to play/pause

Adjust volume with slider


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