<!---------------  Плеер в профиль топика by Vandra  --------------->
<script type="text/javascript" src="https://forumstatic.ru/files/001c/17/76/74570.js"></script>

   .audio-playervm {
  display: inline-block;
  position: relative;
  margin: 20px;
}

.audio-play-button {
  cursor: pointer;
  background: #cccccc94;
  backdrop-filter: blur(5px);
  border: none;
  border-radius: 30% !important;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.audio-play-button::before {
  content: '\f001';
  font-family: 'FontAwesome';
  font-size: 15px;
}

.audio-play-button.active {
  transform: scale(1.1);
  background: #ff6347;
}

.audio-play-button.active::before {
  content: '\f001';
  font-family: 'FontAwesome';
  font-size: 15px;
  animation: player-rotate 3s infinite both;
}

.audio-modalVM {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  background: #f9f9f94f;
  backdrop-filter: blur(5px);
  padding: 15px;
  border-radius: 10px;
  width: 20px;
  display: none;
  z-index: 10;
}

.audio-modalVM.visible {
  display: block;
  pointer-events: auto;
}

.audio-volume-slider {
  width: 100px;
  transform: rotate(-90deg);
  position: absolute;
  left: -62px;
  top: 58px;
}

.audio-modal-control {
  margin: 5px;
  cursor: pointer;
  padding: 5px;
  width: 23px;
  height: 23px;
  background: #fff;
  border: none;
  border-radius: 5px;
}

.audio-loop {
  background: #eee;
}

.audio-loop.active {
  background: #ff6347;
}

.audio-track-title {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f9f9f94f;
  backdrop-filter: blur(5px);
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 5px;
  text-shadow: 1px 1px 2px #000000a8, -1px -1px 2px #000000a8;
  display: none;
  white-space: nowrap;
}

.audio-track-title.active {
  display: block;
}

@keyframes player-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.audio-volume-slider {
  -webkit-appearance: none;
  width: 100px;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  background: transparent !important;
}

.audio-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #ff6347;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -4
}

.audio-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; 
  height: 12px; 
  background: #ff6347; 
  border-radius: 50%; 
  cursor: pointer;
  margin-top: -4px;

}

.audio-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #ff6347;
  border-radius: 50%;
  cursor: pointer;
  border: none; 
}

.audio-volume-slider::-webkit-slider-runnable-track {
  height: 4px; 
  background: linear-gradient(to right, #ff6347, #ccc); 
  border-radius: 2px; 
}

.audio-volume-slider::-moz-range-track {
  height: 4px;
  background: linear-gradient(to right, #ff6347, #ccc);
  border-radius: 2px;
}

.audio-volume-slider {
  padding: 0;
}

<div class="audio-playervm" data-tracks='[ //названия треков, не упускайте кавычки и другие символы!
{"url":"https://forumstatic.ru/files/001c/17/76/13202.mp3","title":"Kreeps - Bad Voodoo"},
{"url":"https://forumstatic.ru/files/001c/17/76/88984.mp3","title":"Radiohead - Karma Police"},
{"url":"https://forumstatic.ru/files/001c/17/76/55721.mp3","title":"Kreeps - Dead Man Walking"}]'>
//ниже ничего трогать не надо
<button class="audio-play-button"></button>
<div class="audio-track-title"></div>
<div class="audio-modalVM">
<button class="audio-modal-control audio-play-pause fa fa-play"></button>
<button class="audio-modal-control audio-loop fa fa-repeat"></button>
<button class="audio-modal-control audio-next-track fa fa-forward"></button>
<input class="audio-volume-slider" type="range" min="0" max="100" step="1"></div></div>

 [b][align=center]1231 123123[/align][/b]