炫酷播放器！！！！！

最新推荐文章于 2024-09-30 14:28:41 发布

一直是个鸵鸟

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量306

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_42903591/article/details/108011224

版权

效果图
在这里插入图片描述
html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./test.js"></script>
  <link rel="stylesheet" href="./test.css">
</head>

<body>
  <div class="mixerContainer">
    <div id="master" class="controllerBox">
      <h3 class="title">Master</h3>
      <div class="box">
        <div class="row a">
          <div class="radialSlider volumeContainer">
            <input type="range" min="0" max="11" step="0.1" value="10" id="master-volume">
            <label for="master-volume">Volume</label>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 83.73 83.82">
              <g class="jogContainer">
                <circle class="jog" cx="41.42" cy="41.42" r="33.84" />
                <circle class="thumb" cx="42" cy="22" r="4.29" />
              </g>
              <path class="bar"
                d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
              <path class="barActive"
                d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
            </svg>
            <div class="dotDisplay">--</div>
          </div>
          <a href="https://github.com/EkoLabs/sonorous" target="_blank" class="sonorousLink">Sonorous</a>
          <div class="radialSlider rateContainer">
            <input type="range" min="0.5" max="1.5" step="0.1" value="1" id="master-rate">
            <label for="master-rate">Speed</label>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 83.73 83.82">
              <g class="jogContainer">
                <circle class="jog" cx="41.42" cy="41.42" r="33.84" />
                <circle class="thumb" cx="42" cy="22" r="4.29" />
              </g>
              <path class="bar"
                d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
              <path class="barActive"
                d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
            </svg>
            <div class="dotDisplay">--</div>
          </div>
        </div>
        <div class="dotDisplay songName"><a href="http://tillian.band" target="_blank">Tillian / Reborn &gt;&gt;&gt;
            Click to hear more</a></div>
        <div class="progressSlider">
          <span class="timeElapsed">--:--</span>
          <input type="range" min="0" max="100" step="1" value="0" id="master-progress">
          <span class="timeLeft">--:--</span>
        </div>
        <div class="row">
          <div class="buttonContainer">
            <button class="play" id="play-btn">
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                y="0px" viewBox="0 0 10 10" xml:space="preserve">
                <path class="st0"
                  d="M0,0.81v8.03c0,0.63,0.67,1,1.22,0.7l6.84-4.03c0.52-0.3,0.52-1.07,0-1.39L1.22,0.09C0.67-0.19,0,0.2,0,0.81z">
                </path>
              </svg>
            </button>
            <button class="stop" id="stop-btn">
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                y="0px" viewBox="0 0 10.69 10.69" xml:space="preserve">
                <path class="st0"
                  d="M8.8,10.34H1.9c-0.85,0-1.55-0.7-1.55-1.55V1.9c0-0.85,0.7-1.55,1.55-1.55h6.9c0.85,0,1.55,0.7,1.55,1.55v6.9C10.34,9.67,9.65,10.34,8.8,10.34z" />
              </svg>
            </button>
            <button class="loop" id="master-loop">
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                y="0px" viewBox="0 0 17.25 13.54" xml:space="preserve">
                <g>
                  <path
                    d="M10.96,11.08c-0.71,0.39-1.5,0.59-2.3,0.59C5.95,11.69,3.74,9.5,3.73,6.8l0-0.18L5,6.61c0.22,0,0.42-0.11,0.51-0.31
                                        c0.11-0.18,0.09-0.42-0.02-0.6L3.27,2.28C3.16,2.12,2.97,2.01,2.77,2.01c-0.2,0-0.38,0.11-0.49,0.27l-2.2,3.44
                                        c-0.11,0.18-0.12,0.4-0.01,0.6c0.11,0.18,0.29,0.31,0.51,0.31l1.27-0.01l0,0.18c0.02,3.74,3.07,6.75,6.81,6.73
                                        c1.11-0.01,2.21-0.28,3.17-0.82c0.45-0.24,0.63-0.82,0.37-1.27C11.97,11.02,11.41,10.84,10.96,11.08z" />
                  <path d="M17.18,7.21c-0.11-0.18-0.29-0.31-0.51-0.31L15.4,6.91l0-0.18C15.38,2.99,12.33-0.02,8.59,0C7.48,0.01,6.38,0.28,5.42,0.82
                                        C4.96,1.05,4.79,1.64,5.04,2.09C5.28,2.54,5.86,2.7,6.32,2.46C7,2.08,7.8,1.87,8.6,1.87c2.7-0.01,4.91,2.17,4.93,4.87l0,0.18
                                        l-1.27,0.01c-0.22,0-0.42,0.11-0.51,0.31c-0.11,0.18-0.09,0.42,0.02,0.6l2.22,3.42c0.11,0.16,0.29,0.27,0.49,0.27
                                        c0.2,0,0.38-0.11,0.49-0.27l2.2-3.44C17.27,7.63,17.29,7.41,17.18,7.21z" />
                </g>
              </svg>
            </button>
          </div>
          <div class="toggleContainer">
            <div class="title">Mute all</div>
            <input type="checkbox" id="master-mute" class="toggle">
            <label for="master-mute"></label>
          </div>
        </div>
        <div class="shoutout">Trivia bit: <a href="http://tillian.band" target="_blank">Tillian's</a> guitarist is an <a
            href="https://eko.engineering" target="_blank">eko dev</a>!</div>
      </div>
    </div>
    <div id="track-vocals" class="controllerBox track">
      <h3 class="title">Vocals</h3>
      <div class="box">
        <div class="radialSlider">
          <input type="range" min="0" max="11" step="0.1" value="10" id="track-vocals-volume">
          <label for="track-vocals-volume">Volume</label>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 83.73 83.82">
            <g class="jogContainer">
              <circle class="jog" cx="41.42" cy="41.42" r="33.84" />
              <circle class="thumb" cx="42" cy="22" r="4.29" />
            </g>
            <path class="bar"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
            <path class="barActive"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
          </svg>
          <div class="dotDisplay">--</div>
        </div>
        <div class="toggleContainer">
          <div class="title">Solo</div>
          <input type="checkbox" id="track-vocals-solo" class="toggle">
          <label for="track-vocals-solo"></label>
        </div>
        <div class="toggleContainer">
          <div class="title">Mute</div>
          <input type="checkbox" id="track-vocals-mute" class="toggle">
          <label for="track-vocals-mute"></label>
        </div>
        <div class="buttonContainer">
          <button class="fadeIn" id="track-vocals-fadeIn" title="Fade in">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M12.11,0.87c0.33,0,0.6,0.25,0.6,0.56c0,0.31-0.27,0.56-0.6,0.56c-3.36,0-5.38,1.57-7.06,4.69
                                                    C4.69,7.36,3.66,9.56,3.5,9.88c-0.58,1.12-1.09,1.74-1.81,2c-0.07,0.03-0.14,0.04-0.22,0.04c-0.24,0-0.47-0.14-0.56-0.36
                                                    c-0.12-0.29,0.03-0.61,0.34-0.73c0.34-0.12,0.71-0.57,1.16-1.44C2.57,9.1,3.6,6.89,3.98,6.18C5.84,2.72,8.22,0.87,12.11,0.87
                                                    C12.11,0.87,12.11,0.87,12.11,0.87 M12.11,0L12.11,0C8.1,0,5.36,1.78,3.22,5.77C2.96,6.24,2.44,7.34,2.06,8.13
                                                    C1.86,8.55,1.7,8.89,1.65,8.99c-0.46,0.88-0.68,1.02-0.7,1.04c-0.36,0.13-0.66,0.41-0.82,0.77c-0.16,0.35-0.16,0.74-0.01,1.1
                                                    c0.22,0.55,0.76,0.9,1.36,0.9c0.17,0,0.35-0.03,0.51-0.09c1.11-0.4,1.75-1.4,2.29-2.42c0.06-0.12,0.25-0.51,0.48-0.98
                                                    C5.11,8.54,5.6,7.5,5.82,7.1c1.62-3.01,3.44-4.23,6.29-4.23c0.38,0,0.74-0.14,1.02-0.4c0.29-0.27,0.45-0.64,0.45-1.03
                                                    C13.58,0.64,12.92,0,12.11,0L12.11,0z" />
            </svg>
          </button>
          <button class="fadeOut" id="track-vocals-fadeOut" title="Fade out">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M1.47,0.87c3.89,0,6.27,1.85,8.13,5.3c0.38,0.7,1.42,2.92,1.57,3.21c0.46,0.87,0.82,1.32,1.16,1.44
                                                c0.31,0.11,0.46,0.44,0.34,0.73c-0.09,0.22-0.32,0.36-0.56,0.36c-0.07,0-0.14-0.01-0.22-0.04c-0.71-0.26-1.23-0.88-1.81-2
                                                c-0.17-0.32-1.2-2.53-1.56-3.2c-1.68-3.12-3.7-4.69-7.06-4.69c0,0,0,0,0,0c0,0,0,0,0,0c-0.33,0-0.6-0.25-0.6-0.56
                                                C0.87,1.12,1.14,0.87,1.47,0.87C1.47,0.87,1.47,0.87,1.47,0.87 M1.47,0L1.47,0L1.47,0C1.09,0,0.73,0.14,0.45,0.4
                                                C0.16,0.67,0,1.04,0,1.43c0,0.79,0.66,1.43,1.47,1.43c2.85,0,4.68,1.23,6.29,4.23c0.22,0.4,0.71,1.44,1.08,2.2
                                                c0.23,0.48,0.41,0.86,0.48,0.99c0.53,1.02,1.18,2.02,2.29,2.42c0.16,0.06,0.34,0.09,0.51,0.09c0.6,0,1.14-0.35,1.37-0.9
                                                c0.15-0.36,0.14-0.75-0.02-1.1c-0.16-0.36-0.46-0.64-0.84-0.77c0-0.01-0.23-0.15-0.69-1.03c-0.05-0.1-0.21-0.43-0.41-0.85
                                                c-0.38-0.8-0.91-1.89-1.16-2.37C8.22,1.78,5.48,0,1.47,0L1.47,0z" />
            </svg>
          </button>
        </div>

      </div>
    </div>
    <div id="track-guitars" class="controllerBox track">
      <h3 class="title">guitars</h3>
      <div class="box">
        <div class="radialSlider">
          <input type="range" min="0" max="11" step="0.1" value="10" id="track-guitars-volume">
          <label for="track-guitars-volume">Volume</label>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 83.73 83.82">
            <g class="jogContainer">
              <circle class="jog" cx="41.42" cy="41.42" r="33.84" />
              <circle class="thumb" cx="42" cy="22" r="4.29" />
            </g>
            <path class="bar"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
            <path class="barActive"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
          </svg>
          <div class="dotDisplay">--</div>
        </div>
        <div class="toggleContainer">
          <div class="title">Solo</div>
          <input type="checkbox" id="track-guitars-solo" class="toggle">
          <label for="track-guitars-solo"></label>
        </div>
        <div class="toggleContainer">
          <div class="title">Mute</div>
          <input type="checkbox" id="track-guitars-mute" class="toggle">
          <label for="track-guitars-mute"></label>
        </div>
        <div class="buttonContainer">
          <button class="fadeIn" id="track-guitars-fadeIn" title="Fade in">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M12.11,0.87c0.33,0,0.6,0.25,0.6,0.56c0,0.31-0.27,0.56-0.6,0.56c-3.36,0-5.38,1.57-7.06,4.69
                                                    C4.69,7.36,3.66,9.56,3.5,9.88c-0.58,1.12-1.09,1.74-1.81,2c-0.07,0.03-0.14,0.04-0.22,0.04c-0.24,0-0.47-0.14-0.56-0.36
                                                    c-0.12-0.29,0.03-0.61,0.34-0.73c0.34-0.12,0.71-0.57,1.16-1.44C2.57,9.1,3.6,6.89,3.98,6.18C5.84,2.72,8.22,0.87,12.11,0.87
                                                    C12.11,0.87,12.11,0.87,12.11,0.87 M12.11,0L12.11,0C8.1,0,5.36,1.78,3.22,5.77C2.96,6.24,2.44,7.34,2.06,8.13
                                                    C1.86,8.55,1.7,8.89,1.65,8.99c-0.46,0.88-0.68,1.02-0.7,1.04c-0.36,0.13-0.66,0.41-0.82,0.77c-0.16,0.35-0.16,0.74-0.01,1.1
                                                    c0.22,0.55,0.76,0.9,1.36,0.9c0.17,0,0.35-0.03,0.51-0.09c1.11-0.4,1.75-1.4,2.29-2.42c0.06-0.12,0.25-0.51,0.48-0.98
                                                    C5.11,8.54,5.6,7.5,5.82,7.1c1.62-3.01,3.44-4.23,6.29-4.23c0.38,0,0.74-0.14,1.02-0.4c0.29-0.27,0.45-0.64,0.45-1.03
                                                    C13.58,0.64,12.92,0,12.11,0L12.11,0z" />
            </svg>
          </button>
          <button class="fadeOut" id="track-guitars-fadeOut" title="Fade out">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M1.47,0.87c3.89,0,6.27,1.85,8.13,5.3c0.38,0.7,1.42,2.92,1.57,3.21c0.46,0.87,0.82,1.32,1.16,1.44
                                                c0.31,0.11,0.46,0.44,0.34,0.73c-0.09,0.22-0.32,0.36-0.56,0.36c-0.07,0-0.14-0.01-0.22-0.04c-0.71-0.26-1.23-0.88-1.81-2
                                                c-0.17-0.32-1.2-2.53-1.56-3.2c-1.68-3.12-3.7-4.69-7.06-4.69c0,0,0,0,0,0c0,0,0,0,0,0c-0.33,0-0.6-0.25-0.6-0.56
                                                C0.87,1.12,1.14,0.87,1.47,0.87C1.47,0.87,1.47,0.87,1.47,0.87 M1.47,0L1.47,0L1.47,0C1.09,0,0.73,0.14,0.45,0.4
                                                C0.16,0.67,0,1.04,0,1.43c0,0.79,0.66,1.43,1.47,1.43c2.85,0,4.68,1.23,6.29,4.23c0.22,0.4,0.71,1.44,1.08,2.2
                                                c0.23,0.48,0.41,0.86,0.48,0.99c0.53,1.02,1.18,2.02,2.29,2.42c0.16,0.06,0.34,0.09,0.51,0.09c0.6,0,1.14-0.35,1.37-0.9
                                                c0.15-0.36,0.14-0.75-0.02-1.1c-0.16-0.36-0.46-0.64-0.84-0.77c0-0.01-0.23-0.15-0.69-1.03c-0.05-0.1-0.21-0.43-0.41-0.85
                                                c-0.38-0.8-0.91-1.89-1.16-2.37C8.22,1.78,5.48,0,1.47,0L1.47,0z" />
            </svg>
          </button>
        </div>

      </div>
    </div>
    <div id="track-cello" class="controllerBox track">
      <h3 class="title">cello</h3>
      <div class="box">
        <div class="radialSlider">
          <input type="range" min="0" max="11" step="0.1" value="10" id="track-cello-volume">
          <label for="track-cello-volume">Volume</label>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 83.73 83.82">
            <g class="jogContainer">
              <circle class="jog" cx="41.42" cy="41.42" r="33.84" />
              <circle class="thumb" cx="42" cy="22" r="4.29" />
            </g>
            <path class="bar"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
            <path class="barActive"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
          </svg>
          <div class="dotDisplay">--</div>
        </div>
        <div class="toggleContainer">
          <div class="title">Solo</div>
          <input type="checkbox" id="track-cello-solo" class="toggle">
          <label for="track-cello-solo"></label>
        </div>
        <div class="toggleContainer">
          <div class="title">Mute</div>
          <input type="checkbox" id="track-cello-mute" class="toggle">
          <label for="track-cello-mute"></label>
        </div>
        <div class="buttonContainer">
          <button class="fadeIn" id="track-cello-fadeIn" title="Fade in">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M12.11,0.87c0.33,0,0.6,0.25,0.6,0.56c0,0.31-0.27,0.56-0.6,0.56c-3.36,0-5.38,1.57-7.06,4.69
                                                    C4.69,7.36,3.66,9.56,3.5,9.88c-0.58,1.12-1.09,1.74-1.81,2c-0.07,0.03-0.14,0.04-0.22,0.04c-0.24,0-0.47-0.14-0.56-0.36
                                                    c-0.12-0.29,0.03-0.61,0.34-0.73c0.34-0.12,0.71-0.57,1.16-1.44C2.57,9.1,3.6,6.89,3.98,6.18C5.84,2.72,8.22,0.87,12.11,0.87
                                                    C12.11,0.87,12.11,0.87,12.11,0.87 M12.11,0L12.11,0C8.1,0,5.36,1.78,3.22,5.77C2.96,6.24,2.44,7.34,2.06,8.13
                                                    C1.86,8.55,1.7,8.89,1.65,8.99c-0.46,0.88-0.68,1.02-0.7,1.04c-0.36,0.13-0.66,0.41-0.82,0.77c-0.16,0.35-0.16,0.74-0.01,1.1
                                                    c0.22,0.55,0.76,0.9,1.36,0.9c0.17,0,0.35-0.03,0.51-0.09c1.11-0.4,1.75-1.4,2.29-2.42c0.06-0.12,0.25-0.51,0.48-0.98
                                                    C5.11,8.54,5.6,7.5,5.82,7.1c1.62-3.01,3.44-4.23,6.29-4.23c0.38,0,0.74-0.14,1.02-0.4c0.29-0.27,0.45-0.64,0.45-1.03
                                                    C13.58,0.64,12.92,0,12.11,0L12.11,0z" />
            </svg>
          </button>
          <button class="fadeOut" id="track-cello-fadeOut" title="Fade out">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M1.47,0.87c3.89,0,6.27,1.85,8.13,5.3c0.38,0.7,1.42,2.92,1.57,3.21c0.46,0.87,0.82,1.32,1.16,1.44
                                                c0.31,0.11,0.46,0.44,0.34,0.73c-0.09,0.22-0.32,0.36-0.56,0.36c-0.07,0-0.14-0.01-0.22-0.04c-0.71-0.26-1.23-0.88-1.81-2
                                                c-0.17-0.32-1.2-2.53-1.56-3.2c-1.68-3.12-3.7-4.69-7.06-4.69c0,0,0,0,0,0c0,0,0,0,0,0c-0.33,0-0.6-0.25-0.6-0.56
                                                C0.87,1.12,1.14,0.87,1.47,0.87C1.47,0.87,1.47,0.87,1.47,0.87 M1.47,0L1.47,0L1.47,0C1.09,0,0.73,0.14,0.45,0.4
                                                C0.16,0.67,0,1.04,0,1.43c0,0.79,0.66,1.43,1.47,1.43c2.85,0,4.68,1.23,6.29,4.23c0.22,0.4,0.71,1.44,1.08,2.2
                                                c0.23,0.48,0.41,0.86,0.48,0.99c0.53,1.02,1.18,2.02,2.29,2.42c0.16,0.06,0.34,0.09,0.51,0.09c0.6,0,1.14-0.35,1.37-0.9
                                                c0.15-0.36,0.14-0.75-0.02-1.1c-0.16-0.36-0.46-0.64-0.84-0.77c0-0.01-0.23-0.15-0.69-1.03c-0.05-0.1-0.21-0.43-0.41-0.85
                                                c-0.38-0.8-0.91-1.89-1.16-2.37C8.22,1.78,5.48,0,1.47,0L1.47,0z" />
            </svg>
          </button>
        </div>

      </div>
    </div>
    <div id="track-keys" class="controllerBox track">
      <h3 class="title">keys</h3>
      <div class="box">
        <div class="radialSlider">
          <input type="range" min="0" max="11" step="0.1" value="10" id="track-keys-volume">
          <label for="track-keys-volume">Volume</label>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 83.73 83.82">
            <g class="jogContainer">
              <circle class="jog" cx="41.42" cy="41.42" r="33.84" />
              <circle class="thumb" cx="42" cy="22" r="4.29" />
            </g>
            <path class="bar"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
            <path class="barActive"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
          </svg>
          <div class="dotDisplay">--</div>
        </div>
        <div class="toggleContainer">
          <div class="title">Solo</div>
          <input type="checkbox" id="track-keys-solo" class="toggle">
          <label for="track-keys-solo"></label>
        </div>
        <div class="toggleContainer">
          <div class="title">Mute</div>
          <input type="checkbox" id="track-keys-mute" class="toggle">
          <label for="track-keys-mute"></label>
        </div>
        <div class="buttonContainer">
          <button class="fadeIn" id="track-keys-fadeIn" title="Fade in">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M12.11,0.87c0.33,0,0.6,0.25,0.6,0.56c0,0.31-0.27,0.56-0.6,0.56c-3.36,0-5.38,1.57-7.06,4.69
                                                    C4.69,7.36,3.66,9.56,3.5,9.88c-0.58,1.12-1.09,1.74-1.81,2c-0.07,0.03-0.14,0.04-0.22,0.04c-0.24,0-0.47-0.14-0.56-0.36
                                                    c-0.12-0.29,0.03-0.61,0.34-0.73c0.34-0.12,0.71-0.57,1.16-1.44C2.57,9.1,3.6,6.89,3.98,6.18C5.84,2.72,8.22,0.87,12.11,0.87
                                                    C12.11,0.87,12.11,0.87,12.11,0.87 M12.11,0L12.11,0C8.1,0,5.36,1.78,3.22,5.77C2.96,6.24,2.44,7.34,2.06,8.13
                                                    C1.86,8.55,1.7,8.89,1.65,8.99c-0.46,0.88-0.68,1.02-0.7,1.04c-0.36,0.13-0.66,0.41-0.82,0.77c-0.16,0.35-0.16,0.74-0.01,1.1
                                                    c0.22,0.55,0.76,0.9,1.36,0.9c0.17,0,0.35-0.03,0.51-0.09c1.11-0.4,1.75-1.4,2.29-2.42c0.06-0.12,0.25-0.51,0.48-0.98
                                                    C5.11,8.54,5.6,7.5,5.82,7.1c1.62-3.01,3.44-4.23,6.29-4.23c0.38,0,0.74-0.14,1.02-0.4c0.29-0.27,0.45-0.64,0.45-1.03
                                                    C13.58,0.64,12.92,0,12.11,0L12.11,0z" />
            </svg>
          </button>
          <button class="fadeOut" id="track-keys-fadeOut" title="Fade out">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M1.47,0.87c3.89,0,6.27,1.85,8.13,5.3c0.38,0.7,1.42,2.92,1.57,3.21c0.46,0.87,0.82,1.32,1.16,1.44
                                                c0.31,0.11,0.46,0.44,0.34,0.73c-0.09,0.22-0.32,0.36-0.56,0.36c-0.07,0-0.14-0.01-0.22-0.04c-0.71-0.26-1.23-0.88-1.81-2
                                                c-0.17-0.32-1.2-2.53-1.56-3.2c-1.68-3.12-3.7-4.69-7.06-4.69c0,0,0,0,0,0c0,0,0,0,0,0c-0.33,0-0.6-0.25-0.6-0.56
                                                C0.87,1.12,1.14,0.87,1.47,0.87C1.47,0.87,1.47,0.87,1.47,0.87 M1.47,0L1.47,0L1.47,0C1.09,0,0.73,0.14,0.45,0.4
                                                C0.16,0.67,0,1.04,0,1.43c0,0.79,0.66,1.43,1.47,1.43c2.85,0,4.68,1.23,6.29,4.23c0.22,0.4,0.71,1.44,1.08,2.2
                                                c0.23,0.48,0.41,0.86,0.48,0.99c0.53,1.02,1.18,2.02,2.29,2.42c0.16,0.06,0.34,0.09,0.51,0.09c0.6,0,1.14-0.35,1.37-0.9
                                                c0.15-0.36,0.14-0.75-0.02-1.1c-0.16-0.36-0.46-0.64-0.84-0.77c0-0.01-0.23-0.15-0.69-1.03c-0.05-0.1-0.21-0.43-0.41-0.85
                                                c-0.38-0.8-0.91-1.89-1.16-2.37C8.22,1.78,5.48,0,1.47,0L1.47,0z" />
            </svg>
          </button>
        </div>

      </div>
    </div>
    <div id="track-drums" class="controllerBox track">
      <h3 class="title">drums</h3>
      <div class="box">
        <div class="radialSlider">
          <input type="range" min="0" max="11" step="0.1" value="10" id="track-drums-volume">
          <label for="track-drums-volume">Volume</label>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 83.73 83.82">
            <g class="jogContainer">
              <circle class="jog" cx="41.42" cy="41.42" r="33.84" />
              <circle class="thumb" cx="42" cy="22" r="4.29" />
            </g>
            <path class="bar"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
            <path class="barActive"
              d="M12.66,70.19c-3.69-3.68-6.67-8.07-8.73-12.94S0.72,47.04,0.72,41.43s1.14-10.96,3.2-15.83
                     s5.04-9.25,8.73-12.94s8.07-6.67,12.94-8.73S35.8,0.72,41.41,0.72s10.96,1.14,15.83,3.2s9.25,5.04,12.94,8.73
                     s6.67,8.07,8.73,12.94c2.06,4.87,3.21,10.22,3.21,15.83s-1.14,10.96-3.2,15.83c-2.06,4.87-5.04,9.25-8.73,12.94" />
          </svg>
          <div class="dotDisplay">--</div>
        </div>
        <div class="toggleContainer">
          <div class="title">Solo</div>
          <input type="checkbox" id="track-drums-solo" class="toggle">
          <label for="track-drums-solo"></label>
        </div>
        <div class="toggleContainer">
          <div class="title">Mute</div>
          <input type="checkbox" id="track-drums-mute" class="toggle">
          <label for="track-drums-mute"></label>
        </div>
        <div class="buttonContainer">
          <button class="fadeIn" id="track-drums-fadeIn" title="Fade in">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M12.11,0.87c0.33,0,0.6,0.25,0.6,0.56c0,0.31-0.27,0.56-0.6,0.56c-3.36,0-5.38,1.57-7.06,4.69
                                                    C4.69,7.36,3.66,9.56,3.5,9.88c-0.58,1.12-1.09,1.74-1.81,2c-0.07,0.03-0.14,0.04-0.22,0.04c-0.24,0-0.47-0.14-0.56-0.36
                                                    c-0.12-0.29,0.03-0.61,0.34-0.73c0.34-0.12,0.71-0.57,1.16-1.44C2.57,9.1,3.6,6.89,3.98,6.18C5.84,2.72,8.22,0.87,12.11,0.87
                                                    C12.11,0.87,12.11,0.87,12.11,0.87 M12.11,0L12.11,0C8.1,0,5.36,1.78,3.22,5.77C2.96,6.24,2.44,7.34,2.06,8.13
                                                    C1.86,8.55,1.7,8.89,1.65,8.99c-0.46,0.88-0.68,1.02-0.7,1.04c-0.36,0.13-0.66,0.41-0.82,0.77c-0.16,0.35-0.16,0.74-0.01,1.1
                                                    c0.22,0.55,0.76,0.9,1.36,0.9c0.17,0,0.35-0.03,0.51-0.09c1.11-0.4,1.75-1.4,2.29-2.42c0.06-0.12,0.25-0.51,0.48-0.98
                                                    C5.11,8.54,5.6,7.5,5.82,7.1c1.62-3.01,3.44-4.23,6.29-4.23c0.38,0,0.74-0.14,1.02-0.4c0.29-0.27,0.45-0.64,0.45-1.03
                                                    C13.58,0.64,12.92,0,12.11,0L12.11,0z" />
            </svg>
          </button>
          <button class="fadeOut" id="track-drums-fadeOut" title="Fade out">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 14 13.54" xml:space="preserve">
              <path d="M1.47,0.87c3.89,0,6.27,1.85,8.13,5.3c0.38,0.7,1.42,2.92,1.57,3.21c0.46,0.87,0.82,1.32,1.16,1.44
                                                c0.31,0.11,0.46,0.44,0.34,0.73c-0.09,0.22-0.32,0.36-0.56,0.36c-0.07,0-0.14-0.01-0.22-0.04c-0.71-0.26-1.23-0.88-1.81-2
                                                c-0.17-0.32-1.2-2.53-1.56-3.2c-1.68-3.12-3.7-4.69-7.06-4.69c0,0,0,0,0,0c0,0,0,0,0,0c-0.33,0-0.6-0.25-0.6-0.56
                                                C0.87,1.12,1.14,0.87,1.47,0.87C1.47,0.87,1.47,0.87,1.47,0.87 M1.47,0L1.47,0L1.47,0C1.09,0,0.73,0.14,0.45,0.4
                                                C0.16,0.67,0,1.04,0,1.43c0,0.79,0.66,1.43,1.47,1.43c2.85,0,4.68,1.23,6.29,4.23c0.22,0.4,0.71,1.44,1.08,2.2
                                                c0.23,0.48,0.41,0.86,0.48,0.99c0.53,1.02,1.18,2.02,2.29,2.42c0.16,0.06,0.34,0.09,0.51,0.09c0.6,0,1.14-0.35,1.37-0.9
                                                c0.15-0.36,0.14-0.75-0.02-1.1c-0.16-0.36-0.46-0.64-0.84-0.77c0-0.01-0.23-0.15-0.69-1.03c-0.05-0.1-0.21-0.43-0.41-0.85
                                                c-0.38-0.8-0.91-1.89-1.16-2.37C8.22,1.78,5.48,0,1.47,0L1.47,0z" />
            </svg>
          </button>
        </div>

      </div>
    </div>
  </div>
  <svg>
    <linearGradient id="jogGradient" gradientUnits="userSpaceOnUse" x1="22.9189" y1="76.1371" x2="90.5909" y2="76.1371"
      gradientTransform="matrix(1 -2.775030e-04 2.775030e-04 1 -15.3562 -34.7017)">
      <stop offset="0" style="stop-color:#232323" />
      <stop offset="0.4624" style="stop-color:#100E0F" />
      <stop offset="0.7146" style="stop-color:#121011" />
      <stop offset="0.8573" style="stop-color:#1A1919" />
      <stop offset="0.9723" style="stop-color:#272627" />
      <stop offset="1" style="stop-color:#2B2B2B" />
    </linearGradient>
  </svg>

  <a href="https://github.com/EkoLabs/sonorous" class="github-corner" aria-label="Sonorous on GitHub"
    target="_blank"><svg width="80" height="80" viewBox="0 0 250 250"
      style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path
        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path
        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
        fill="currentColor" class="octo-body"></path>
    </svg></a>
  <style>
    .github-corner:hover .octo-arm {
      animation: octocat-wave 560ms ease-in-out
    }

    @keyframes octocat-wave {

      0%,
      100% {
        transform: rotate(0)
      }

      20%,
      60% {
        transform: rotate(-25deg)
      }

      40%,
      80% {
        transform: rotate(10deg)
      }
    }

    @media (max-width:500px) {
      .github-corner:hover .octo-arm {
        animation: none
      }

      .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
      }
    }
  </style>
</body>

</html>

css

html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body{
  background : #606060;
  display: flex;
  align-items: center;
  justify-content: center;
}

body > svg{
  display: none;
}

@font-face {
  font-family: 'ChessType';
  font-style: normal;
  font-weight: normal;
  src: local('ChessType'), url('https://eko.com/s/sonorous/demos/track_mixer/ChessType.woff') format('woff');
}

.controllerBox{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --main-color: #f6b018;
  --secondary-color: #fff686;
  display: flex;
  flex-direction: column;
}

.controllerBox h3.title {
  box-sizing: border-box;
  font-size: 18px;
  background: #161616;
  border-radius: 5px 5px 0px 0px;
  color: #8E8E8E;
  margin: 0;
  padding: 10px;
  padding-bottom: 9px;
  text-transform: uppercase;
  background-repeat: no-repeat;
  background-position: right 10px top 10px;
  background-size: 16px;
}

.controllerBox .box {
  box-sizing: border-box;
  flex-grow: 1;
  padding: 18px 18px 10px 18px;
  background : linear-gradient(90deg, rgba(43, 43, 43, 1) 0%, rgba(31, 31, 31, 1) 100%);
  border-radius : 0 0 6px 6px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.controllerBox .dotDisplay,
.controllerBox .progressSlider,
.controllerBox .buttonContainer,
.controllerBox .toggle + label
{
  border-top: 3px solid #100e0f;
  border-bottom: 2px solid #3b393a;
  background: #100e0f;
  padding: 6px 10px;
  margin: 10px;
  border-radius: 6px;
}

.controllerBox .dotDisplay{
  position: relative;
  font-family: ChessType;
  color: var(--main-color);
  text-transform: lowercase;
  display: inline-block;
}

.songName{
  overflow: hidden;
  white-space: nowrap;
  max-width: 300px;
}

.songName a{
  display: block;
  animation: scroll 10s steps(14, end) infinite;
  text-decoration: none;
  color: var(--main-color);
  transition: all 0.3s linear;

}

.songName a:hover{
  color: var(--secondary-color);
}

@keyframes scroll {
  0% { transform: translateX(0%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.controllerBox .progressSlider{
  display: flex;
  padding: 4px 10px;
  padding-bottom: 5px;
  border-radius: 12px;
  margin-top: 0;

}

.progressSlider span{
  display: inline-block;
  color: #7a7a7a;
  font-size: 10px;
  margin-top: 1px;
}

.progressSlider input[type=range] {
  flex: 1;
  margin: 0 10px;
  border: 1px solid #565656;
}

.progressSlider input[type=range] {
  -webkit-appearance: none;
  -moz-apperance: none;
  border-radius: 6px;
  height: 10px;
  --progress-percent: 0%;

  background-image: linear-gradient(90deg,
  var(--main-color) var(--progress-percent),
  black var(--progress-percent)
  );

  transition: all 0.3s linear;
  cursor: pointer;
}

.progressSlider input[type="range"]::-moz-range-track {
  /*border: none;*/
  background: none;
  outline: none;
}

.progressSlider input[type=range]:focus {
  outline: none;
  /*border: none;*/
}

.progressSlider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background-color: #df7164;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  visibility: hidden;
}

.progressSlider .progressSlider input[type=range]::-moz-range-thumb {
  -moz-appearance: none !important;
  background-color: #df7164;
  border: none;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  visibility: hidden;
}

/*radial slider*/


.radialSlider {
  position: relative;
  width: 100px;
  min-width: 100px;
  display: flex;
  flex-direction: column;
}

.radialSlider svg{
  pointer-events: none;
}

.radialSlider .jogContainer {
  transform-origin: center;
  cursor: pointer;
  pointer-events: all;
  touch-action: none;
}

.radialSlider input { display: none}

.radialSlider label{
  display: block;
  color: #8E8E8E;
  margin: 0;
  padding: 0px;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
}

.radialSlider svg {
  margin-top: 8px;
}

.radialSlider .jog {
  fill: url(#jogGradient);
  stroke: #545454;
  stroke-width: 1.3855;
  stroke-miterlimit: 10;
}

.radialSlider .bar,  .radialSlider .barActive{
  fill: none;
  stroke: #FFA412;
  stroke-width: 1.4431;
  stroke-miterlimit: 10;
  stroke-dasharray: 191;
}

.radialSlider .bar{
  stroke: #7A7A7A;
}

.radialSlider .thumb{
  fill: #FFA412;
}

.radialSlider .dotDisplay {
  align-self: center;
  margin-top: 3px;
  text-align: center;
  width: 30px;
}

/*main button container*/

.controllerBox .buttonContainer {
  display: inline-flex;
  padding: 0px 3px 3px 4px;
  height: 36px;
  margin: 0;
}

.buttonContainer button{
  border: 0;
  width: 36px;
  height: 36px;
  background : linear-gradient(180deg, rgba(35, 35, 35, 1) 0%, rgba(16, 14, 15, 1) 46.24%, rgba(18, 16, 17, 1) 71.46%, rgba(26, 25, 25, 1) 85.73%, rgba(39, 38, 39, 1) 97.23%, rgba(43, 43, 43, 1) 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.buttonContainer button:hover{
  background: var(--secondary-color);
}

.buttonContainer button.active{
  background: var(--main-color);
}

.buttonContainer button.active path, .buttonContainer button:hover path  {
  stroke: none;
  fill: black;
}


.buttonContainer button svg{
  width: 60%;
  height: 60%;
}

.buttonContainer button path{
  fill:none;
  stroke:#666666;
  stroke-width:0.7003;
  stroke-miterlimit:10;
}

button.loop svg {
  width: 100%;
  height: 100%;
}

button.fadeIn svg, button.fadeOut svg{
  width: 90%;
  height: 90%;
}


.controllerBox .toggle {
  display: none;
}

.controllerBox .toggle {
  display: none;
}

.row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 15px 0;
}

.row.a{
  margin-top: 0;
  margin-bottom: 0;
}

.toggleContainer{
  display: flex;
  flex-direction: column;
}

.toggleContainer .title{
  color: #8E8E8E;
  margin: 0;
  padding: 0px;
  text-align: center;
  text-transform: uppercase;
}

.controllerBox .toggle + label{
  display: inline-block;
  position: relative;
  width: 80px;
  height: 27px;
  border-radius: 50px;
  cursor: pointer;
  margin: 0;
  margin-top: 8px;
}

.toggle + label:before{
  position: absolute;
  top: 0;
  left: 3px;
  content: "";
  width: 57px;
  height:  36px;
  background : linear-gradient(90deg, rgba(35, 35, 35, 1) 0%, rgba(16, 14, 15, 1) 46.24%, rgba(18, 16, 17, 1) 71.46%, rgba(26, 25, 25, 1) 85.73%, rgba(39, 38, 39, 1) 97.23%, rgba(43, 43, 43, 1) 100%);
  border-radius : 50px;
  transition: all 0.2s ease-out;
}

.toggle:checked + label:before{
  left: 39px;
  background: var(--main-color);
}


/*layout */

.mixerContainer{
  display: flex;
  align-items: stretch;
}

.track {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.track .toggleContainer{
  margin-top: 20px;
}

.track .buttonContainer {
  margin-top: 20px;
}

#track-vocals > .title{
  background-image: url(https://eko.com/s/sonorous/demos/track_mixer/vocals.svg);
}

#track-guitars > .title{
  background-image: url(https://eko.com/s/sonorous/demos/track_mixer/guitars.svg);
  background-size: 20px;
}

#track-cello > .title{
  background-image: url(https://eko.com/s/sonorous/demos/track_mixer/cello.svg);
  background-size: 20px;
}

#track-keys > .title{
  background-image: url(https://eko.com/s/sonorous/demos/track_mixer/keys.svg);
  background-size: 20px;
}

#track-drums > .title{
  background-image: url(https://eko.com/s/sonorous/demos/track_mixer/drums.svg);
  background-size: 20px;
}

#master .box{
  align-items: stretch;
}

.sonorousLink{
  display: block;
  width: 100px;
  background-image: url(https://eko.com/s/sonorous/demos/track_mixer/sonorous.svg);
  background-repeat: no-repeat;
  background-position: top center;
  text-align: center;
  text-decoration: none;
  color: #626262;
  margin: 0 20px;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  padding-top: 48px;
  align-self: center;
}

.shoutout{
color: #bbbbbb;
text-align: center;
font-size: 12px;
margin-top: auto;
}

.shoutout a{
color: #cccccc;
}

// UI logic

let progressInput = document.querySelector("#master-progress");
let timeElapsed = document.querySelector(".timeElapsed");
let timeLeft = document.querySelector(".timeLeft");

function addMasterControls() {
  // master volume
  setupRadialSlider(document.querySelector(`#master .volumeContainer`),
    // volume is 0-11, map it to 0-1
    value => {
      Sonorous.masterVolume = value / 11
    });

  setupRadialSlider(document.querySelector(`#master .rateContainer`),
    // rate is 0.5 to 2
    value => {
      Sonorous.sonors.forEach(sonor => sonor.playbackRate = value);
    });

  // play
  document.getElementById('play-btn').addEventListener('click', e => {
    let isPlaying = e.currentTarget.classList.contains('active');
    if (isPlaying) {
      e.currentTarget.classList.remove('active');
      Sonorous.sonors.forEach(sonor => {
        sonor.pause();
      });
    } else {
      e.currentTarget.classList.add('active');
      Sonorous.sonors.forEach(sonor => {
        sonor.play();
        sonor.volume = parseFloat(document.getElementById(`${sonor.id}-volume`).value) / 11;
      });
    }
  });

  // stop
  document.getElementById('stop-btn').addEventListener('click', () => {
    document.querySelector("#play-btn").classList.remove('active');
    Sonorous.sonors.forEach(sonor => {
      sonor.stop();
    });
  });

  // loop
  document.getElementById(`master-loop`).addEventListener('click', e => {
    Sonorous.sonors.forEach(sonor => sonor.loop = !sonor.loop);
    e.currentTarget.classList.toggle('active');
  });

  //master mute
  document.getElementById('master-mute').addEventListener('click', () => {
    Sonorous.muteAll = !Sonorous.muteAll;
  });

  let progressSonor = Sonorous.get('track-vocals');
  // update progress on playback
  setInterval(() => {
    if (progressSonor.isPlaying && progressSonor.duration !== 0) {
      let currentTime = progressSonor.playbackPosition;
      let percentComplete = currentTime / progressSonor.duration;
      updateProgressUI(percentComplete, progressSonor.duration);
    } else {
      updateProgressUI(0, null);
    }
  }, 100);

  // progress bar seeking
  progressInput.addEventListener('change', e => {
    let newValue = e.currentTarget.value;
    if (progressSonor.isPlaying) {
      Sonorous.sonors.forEach(sonor => {
        sonor.seek(sonor.duration * newValue / 100)
      })
    }
  });

}

function setupTrackControls(sonor, trackId) {
  // Create volume listener
  setupRadialSlider(document.getElementById(`${trackId}`),
    // volume is 0-11, map it to 0-1
    value => {
      sonor.volume = value / 11
    });

  // Create mute listener
  document.getElementById(`${trackId}-mute`).addEventListener('click', () => {
    // when other tracks are soloed, mute has no immediate effect
    if (getSoloToggles().length == 0) {
      sonor.muted = !sonor.muted;
    }
  });

  // Create solo listener
  document.getElementById(`${trackId}-solo`).addEventListener('click', () => {
    //get an array of track ids for all checked solo toggles
    let soloToggles = getSoloToggles();

    // we have at least one soloed track, ignore mutes
    if (soloToggles.length > 0) {
      Sonorous.sonors.forEach(sonor => sonor.muted = !soloToggles.includes(sonor.id));
    } else {
      // no soloed track, revert mute status
      Sonorous.sonors.forEach(
        sonor => sonor.muted = document.querySelector(`#${sonor.id}-mute:checked`) !== null
      );
    }
  });


  // Create fadeIn listener
  document.getElementById(`${trackId}-fadeIn`).addEventListener('click', () => {
    let volumeInput = document.getElementById(`${trackId}-volume`);
    let fadeStartTime = Date.now();
    let fadeStartVolume = sonor.volume;

    // we want to update the knobs with the fade
    // note: this is a temp hacky way
    let fadeInterval = setInterval(() => {
      let volumePercent = (Date.now() - fadeStartTime) / 1000;
      if (volumePercent >= 0 && volumePercent <= 1) {
        volumeInput.value = fadeStartVolume * 11 + volumePercent * (10 - fadeStartVolume * 11);
        volumeInput.dispatchEvent(new Event('change'));
      } else if (volumePercent >= 0) {
        volumeInput.value = 10;
        volumeInput.dispatchEvent(new Event('change'));
        clearInterval(fadeInterval)
      }

    }, 30);

    sonor.fade(10 / 11, 1);
  });

  // Create fadeOut listener
  document.getElementById(`${trackId}-fadeOut`).addEventListener('click', () => {
    let volumeInput = document.getElementById(`${trackId}-volume`);
    let fadeStartTime = Date.now();
    let fadeStartVolume = sonor.volume;

    // we want to update the knobs with the fade
    // note: this is a temp hacky way
    let fadeInterval = setInterval(() => {
      let volumePercent = 1 - (Date.now() - fadeStartTime) / 1000;
      if (volumePercent >= 0 && volumePercent <= 1) {
        volumeInput.value = volumePercent * fadeStartVolume * 11;
        volumeInput.dispatchEvent(new Event('change'));
      } else if (volumePercent < 0) {
        volumeInput.value = 0;
        volumeInput.dispatchEvent(new Event('change'));
        clearInterval(fadeInterval)
      }

    }, 30);
  });

  sonor.fade(0, 1);
}

function setupRadialSlider(parentElement, onChange) {
  let input = parentElement.querySelector('input[type=range]');
  let knobJog = parentElement.querySelector('.jogContainer');
  let barActive = parentElement.querySelector('.barActive');
  let text = parentElement.querySelector('.dotDisplay');

  let rangeStart = parseFloat(input.getAttribute("min"));
  let rangeEnd = parseFloat(input.getAttribute("max"));

  knob(input, knobJog, {
    rangeInDegrees: 270,
    rangeStartDegree: 220,
    onUpdate: value => {
      let progress = (value - rangeStart) / (rangeEnd - rangeStart);
      let degrees = progress * 270 + 220;
      knobJog.style.transform = `rotate(${degrees}deg)`;
      // this magic number is the path length. Why recalculate it when it's constant?
      barActive.style.strokeDashoffset = (1 - progress) * 191;
      text.innerHTML = value.toFixed(1);
      onChange(value);
    }
  });
}



function updateProgressUI(percentComplete, duration) {
  let timeElapsedNumber;
  let timeLeftNumber;
  if (duration) {
    // luckily our audio demo is shorter than one minute
    timeElapsedNumber = String(parseInt(percentComplete * duration)).padStart(2, '0');
    timeLeftNumber = String(parseInt(duration - duration * percentComplete)).padStart(2, '0');
    timeElapsed.innerHTML = `00:${timeElapsedNumber}`;
    timeLeft.innerHTML = `-00:${timeLeftNumber}`;
  } else {
    timeElapsed.innerHTML = '--:--';
    timeLeft.innerHTML = '--:--';
  }

  progressInput.style.setProperty('--progress-percent', `${percentComplete*100}%`);
}

// returns an array of track ids for all checked solo toggles
function getSoloToggles() {
  return Array.from(document.querySelectorAll('input[id$="solo"]:checked'))
    .map(el => el.id.substring(0, el.id.length - 5));
}

if (Sonorous && Sonorous.isSupported()) {
  let trackMap = {
    'track-vocals': 'https://eko.com/s/sonorous/demos/track_mixer/Tillian_Reborn_Vocals.mp3',
    'track-guitars': 'https://eko.com/s/sonorous/demos/track_mixer/Tillian_Reborn_Guitars.mp3',
    'track-keys': 'https://eko.com/s/sonorous/demos/track_mixer/Tillian_Reborn_Keys.mp3',
    'track-cello': 'https://eko.com/s/sonorous/demos/track_mixer/Tillian_Reborn_Cello.mp3',
    'track-drums': 'https://eko.com/s/sonorous/demos/track_mixer/Tillian_Reborn_Drums.mp3',
  };

  Object.keys(trackMap).forEach((trackId) => {
    let sonor = Sonorous.addSonor(trackMap[trackId], {
      id: trackId
    });
    setupTrackControls(sonor, trackId);
  });

  addMasterControls();
}