Widget:AudioPlayer2: Difference between revisions

From The Midnight Wiki
VisualWikitext
No edit summary
No edit summary
 
(92 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>


<includeonly>
<includeonly>
<html>
<html>
        <style>
<style>
            button {
.player {
                padding: 0;
  background: var(--tmw-after-gradient);
                border: 0;
  width: 330px;
                background: transparent;
  height: 190px;
                cursor: pointer;
  position: relative;
                outline: none;
  border-radius: 8px;
                width: 40px;
  box-shadow: -1px 4px 10px 5px hsl(216,100%,8%);
                height: 40px;
  filter: var(--tmw-drop-shadow);
                float: left;
  z-index: 1;
            }
}
            #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: 7px;
                font-family: Arial, Helvetica, sans-serif;
  left: 28px;
                --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 {
.record:after {
                position: absolute;
  position: absolute;
                content: '';
  content: "";
                width: calc(100% + 4px);
  border: 5px solid transparent;
                height: calc(100% + 4px);
  border-top-color: #2c2424;
                left: -2px;
  border-bottom-color: #2c2424;
                top: -2px;
  border-radius: 50%;
                background: linear-gradient(to left, #007db5, #ff8a00);
}
                z-index: -1;
.record:before {
            }
  height: 135px;
            p {
  width: 135px;
                position: absolute;
}
                top: -18px;
.record:after {
                right: 5%;
  height: 95px;
                padding: 0 5px;
  width: 95px;
                margin: 0;
}
                font-size: 28px;
.player-label {
                background: #fff;
  background-color: #181312;
            }
  height: 15px;
            #play-icon {
  width: 15px;
                margin: 20px 2.5% 10px 2.5%;
  border: 20px solid #fd184e;
            }
  border-radius: 50%;
            path {
}
                stroke: #007db5;
 
            }
.tone-arm {
            .time {
  height: 90px;
                display: inline-block;
  width: 6px;
                width: 37px;
  background-color: #ffffff;
                text-align: center;
  position: absolute;
                font-size: 20px;
  top: 25px;
                margin: 28.5px 0 18.5px 0;
  right: 95px;
                float: left;
  transition: 1s;
            }
  transform-origin: top;
            output {
}
                display: inline-block;
.control {
                width: 32px;
  background-color: #181312;
                text-align: center;
  height: 17px;
                font-size: 20px;
  width: 17px;
                margin: 10px 2.5% 0 5%;
  border: 10px solid #2c2c2c;
                float: left;
  border-radius: 50%;
                clear: left;
  position: absolute;
            }
  top: -16px;
            #volume-slider {
  left: -7px;
                margin: 10px 2.5%;
}
                width: 58%;
.tone-arm:before {
            }
  content: "";
            #volume-slider::-webkit-slider-runnable-track {
  height: 40px;
                background: rgba(0, 125, 181, 0.6);
  width: 6px;
            }
  background-color: #ffffff;
            #volume-slider::-moz-range-track {
  position: absolute;
                background: rgba(0, 125, 181, 0.6);
  transform: rotate(30deg);
            }
  bottom: -36px;
            #volume-slider::-ms-fill-upper {
  right: 10px;
                background: rgba(0, 125, 181, 0.6);
}
            }
.tone-arm:after {
            #volume-slider::before {
  content: "";
                width: var(--volume-before-width);
  position: absolute;
            }
  height: 0;
            #mute-icon {
  width: 10px;
                margin: 0 2.5%;
  border-top: 18px solid #b2aea6;
            }
  border-left: 2px solid transparent;
            input[type="range"] {
  border-right: 2px solid transparent;
                position: relative;
  top: 108px;
                -webkit-appearance: none;
  right: 14.5px;
                width: 48%;
  transform: rotate(30deg);
                margin: 0;
}
                padding: 0;
.btn {
                height: 19px;
  height: 28px;
                margin: 30px 2.5% 20px 2.5%;
  width: 28px;
                float: left;
  background-color: #d11b66;
                outline: none;
  border-radius: 50%;
            }
  position: absolute;
            input[type="range"]::-webkit-slider-runnable-track {
  bottom: 5px;
                width: 100%;
  left: 7px;
                height: 3px;
  border: 3.5px solid #95003d;
                cursor: pointer;
  outline: none;
                background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
  padding: 0 !important;
            }
  cursor: pointer;
            input[type="range"]::before {
}
                position: absolute;
.slider {
                content: "";
  -webkit-appearance: none;
                top: 8px;
  appearance: none;
                left: 0;
  transform: rotate(-90deg);
                width: var(--seek-before-width);
  width: 90px;
                height: 3px;
  height: 7px;
                background-color: #007db5;
  position: absolute;
                cursor: pointer;
  left: 252px;
            }
  top: 60px;
            input[type="range"]::-webkit-slider-thumb {
  background-color: #d11b66;
                position: relative;
  outline: none;
                -webkit-appearance: none;
  border-radius: 3px;
                box-sizing: content-box;
  border: 6px solid #95003d;
                border: 1px solid #007db5;
}
                height: 15px;
.slider::-webkit-slider-thumb {
                width: 15px;
  -webkit-appearance: none;
                border-radius: 50%;
  appearance: none;
                background-color: #fff;
  width: 10px;
                cursor: pointer;
  height: 12px;
                margin: -7px 0 0 0;
  background-color: #ffffff;
            }
  cursor: pointer;
            input[type="range"]:active::-webkit-slider-thumb {
}
                transform: scale(1.2);
.play {
                background: #007db5;
  transform: rotate(30deg);
            }
  transform-origin: top;
            input[type="range"]::-moz-range-track {
  transition: 1s;
                width: 100%;
}
                height: 3px;
.on {
                cursor: pointer;
  animation: spin 3s 1s linear infinite;
                background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
}
            }
@keyframes spin {
            input[type="range"]::-moz-range-progress {
  100% {
                background-color: #007db5;
    transform: rotate(360deg);
            }
  }
            input[type="range"]::-moz-focus-outer {
}
                border: 0;
 
            }
.player-wrapper .sign-logo {
            input[type="range"]::-moz-range-thumb {
    width: 120px;
                box-sizing: content-box;
    height: 50.14px;
                border: 1px solid #007db5;
    right: 6px;
                height: 15px;
    top: 131px;
                width: 15px;
    filter: none;
                border-radius: 50%;
}
                background-color: #fff;
 
                cursor: pointer;
.player-wrapper {
            }
    display: flex;
            input[type="range"]:active::-moz-range-thumb {
    flex-direction: column;
                transform: scale(1.2);
    align-items: center;
                background: #007db5;
}
            }
</style>
            input[type="range"]::-ms-track {
  <div class="player-wrapper">
                width: 100%;
    <div class="player">
                height: 3px;
      <div class="record">
                cursor: pointer;
        <div class="player-label"></div>
                background: transparent;
      </div>
                border: solid transparent;
      <div class="tone-arm">
                color: transparent;
        <div class="control"></div>
            }
      </div>
            input[type="range"]::-ms-fill-lower {
      <button class="btn"></button>
                background-color: #007db5;
      <div class="slider-container">
            }
        <input
            input[type="range"]::-ms-fill-upper {
          type="range"
                background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
          class="slider"
            }
          min="0"
            input[type="range"]::-ms-thumb {
          max="1"
                box-sizing: content-box;
          step="0.1"
                border: 1px solid #007db5;
          value="0.7"
                height: 15px;
        />
                width: 15px;
      </div>
                border-radius: 50%;
    <img alt="logo" width="347" height="145" class="sign-logo" src="https://themidnight.wiki/images/2/24/The_Midnight_Wiki_Logo_2023.png" />
                background-color: #fff;
    </div>
                cursor: pointer;
    <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>
            input[type="range"]:active::-ms-thumb {
  <p style="margin: 0;"><em>Adjust volume with slider</em></p>
                transform: scale(1.2);
  </div>
                background: #007db5;
            }
        </style>
        <div id="audio-player-container">
            <audio src="" preload="metadata" loop></audio>
            <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>
            <output id="volume-output">100</output>
            <input type="range" id="volume-slider" max="100" value="100">
            <button id="mute-icon"></button>
        </div>
<audio-player data-src="<!--{$mp3|escape:'urlpathinfo'}-->"></audio-player>
</html>
</html>
</includeonly>
</includeonly>

Latest revision as of 00:07, 24 December 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=15185"