Widget:AudioPlayer2: Difference between revisions

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