ihihiih

music-control.css

.music-control-105272cpr {
  position: fixed;
  top: calc(100vh - 100px);
  left: 20px;
  width: 240px;
  background-color: #000;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.3s ease, background-color 0.3s ease;
  cursor: move;
}
.music-control-105272cpr:hover {
  transform: scale(1.02);
}
.music-control-105272cpr .top-section {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.music-control-105272cpr .cover {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 8px;
  object-fit: cover;
  border: 1px solid #333;
}
.music-control-105272cpr .track-info {
  flex: 1;
}
.music-control-105272cpr .track-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 2px;
}
.music-control-105272cpr .track-artist {
  font-size: 12px;
  color: #ccc;
}
.music-control-105272cpr .controls {
  display: flex;
  align-items: center;
}
.music-control-105272cpr .play-pause {
  width: 28px;
  height: 28px;
  border: none;
  background-color: #fff;
  border-radius: 50%;
  color: #000;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.music-control-105272cpr .play-pause:hover,
.music-control-105272cpr .play-pause:focus {
  background-color: #ddd;
}
.music-control-105272cpr .volume-slider {
  flex: 1;
  cursor: pointer;
  appearance: none;
  height: 4px;
  background-color: #333;
  border-radius: 2px;
  outline: none;
  transition: background-color 0.3s ease;
}
.music-control-105272cpr .volume-slider:hover,
.music-control-105272cpr .volume-slider:focus {
  background-color: #444;
}
.music-control-105272cpr .volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.music-control-105272cpr .volume-slider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.music-control-105272cpr .equalizer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 40px;
  height: 20px;
  margin-left: 8px;
}
.music-control-105272cpr .equalizer-bar {
  width: 4px;
  height: 100%;
  background-color: #4CAF50;
  animation: equalize 1s infinite;
  animation-play-state: paused;
}
.music-control-105272cpr .equalizer.playing .equalizer-bar {
  animation-play-state: running;
}
.music-control-105272cpr .equalizer-bar:nth-child(1) { animation-delay: 0s; }
.music-control-105272cpr .equalizer-bar:nth-child(2) { animation-delay: 0.2s; }
.music-control-105272cpr .equalizer-bar:nth-child(3) { animation-delay: 0.4s; }
.music-control-105272cpr .equalizer-bar:nth-child(4) { animation-delay: 0.6s; }
.music-control-105272cpr .equalizer-bar:nth-child(5) { animation-delay: 0.8s; }
@keyframes equalize {
  0% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.3); }
}
@media (max-width: 480px) {
  .music-control-105272cpr {
    width: 200px;
    left: 10px;
    top: calc(100vh - 90px);
    padding: 8px;
  }
  .music-control-105272cpr .cover {
    width: 35px;
    height: 35px;
    margin-right: 6px;
  }
  .music-control-105272cpr .play-pause {
    width: 26px;
    height: 26px;
    margin-right: 6px;
  }
}

music-control.js

document.addEventListener("DOMContentLoaded", function(){
  var widgets = document.querySelectorAll(".music-control-105272cpr");
  widgets.forEach(function(widget){
    var audioSrc = widget.getAttribute("audiosrc");
    var trackArtist = widget.getAttribute("track-artist");
    var cover = widget.getAttribute("cover");
    var trackTitle = widget.getAttribute("track-title");
    widget.innerHTML =
      '<div class="top-section">' +
        '<img class="cover" src="' + cover + '" alt="Cover Image">' +
        '<div class="track-info">' +
          '<div class="track-title">' + trackTitle + '</div>' +
          '<div class="track-artist">' + trackArtist + '</div>' +
        '</div>' +
      '</div>' +
      '<div class="controls">' +
        '<button class="play-pause" title="Play" aria-label="Play">►</button>' +
        '<input type="range" class="volume-slider" min="0" max="100" value="100">' +
        '<div class="equalizer">' +
          '<div class="equalizer-bar"></div>' +
          '<div class="equalizer-bar"></div>' +
          '<div class="equalizer-bar"></div>' +
          '<div class="equalizer-bar"></div>' +
          '<div class="equalizer-bar"></div>' +
        '</div>' +
      '</div>' +
      '<audio src="' + audioSrc + '"></audio>';
    var audio = widget.querySelector("audio");
    var playPauseBtn = widget.querySelector(".play-pause");
    var volumeSlider = widget.querySelector(".volume-slider");
    var equalizer = widget.querySelector(".equalizer");
    function togglePlayPause(){
      if(audio.paused){
        audio.play().then(function(){
          playPauseBtn.textContent = '❚❚';
          playPauseBtn.title = 'Pause';
          playPauseBtn.setAttribute("aria-label", "Pause");
          equalizer.classList.add("playing");
        }).catch(function(error){ console.error(error); });
      } else {
        audio.pause();
        playPauseBtn.textContent = '►';
        playPauseBtn.title = 'Play';
        playPauseBtn.setAttribute("aria-label", "Play");
        equalizer.classList.remove("playing");
      }
    }
    playPauseBtn.addEventListener("click", togglePlayPause);
    volumeSlider.addEventListener("input", function(){
      audio.volume = volumeSlider.value / 100;
    });
    audio.addEventListener("ended", function(){
      playPauseBtn.textContent = '►';
      playPauseBtn.title = 'Play';
      playPauseBtn.setAttribute("aria-label", "Play");
      equalizer.classList.remove("playing");
    });
    function autoPlayHandler(){
      if(audio.paused){
        audio.play().then(function(){
          playPauseBtn.textContent = '❚❚';
          playPauseBtn.title = 'Pause';
          playPauseBtn.setAttribute("aria-label", "Pause");
          equalizer.classList.add("playing");
        }).catch(function(error){ console.error(error); });
      }
      document.removeEventListener("click", autoPlayHandler);
    }
    document.addEventListener("click", autoPlayHandler, { once: true });
    var isDragging = false, offsetX = 0, offsetY = 0;
    widget.addEventListener("mousedown", function(e){
      if(e.target.closest(".controls")) return;
      isDragging = true;
      widget.style.bottom = "auto";
      offsetX = e.clientX - widget.offsetLeft;
      offsetY = e.clientY - widget.offsetTop;
      document.addEventListener("mousemove", onDrag);
      document.addEventListener("mouseup", onStopDrag);
    });
    function onDrag(e){
      if(!isDragging) return;
      widget.style.left = (e.clientX - offsetX) + "px";
      widget.style.top = (e.clientY - offsetY) + "px";
    }
    function onStopDrag(){
      isDragging = false;
      document.removeEventListener("mousemove", onDrag);
      document.removeEventListener("mouseup", onStopDrag);
    }
  });
});