Question

我要编辑默认音频标签。或至少

.sqs-audio-player-content{
       background-color: #b3b3b3 !important;
       background-image: linear-gradient(#eaeaea, #eaeaea) !important;
       background: -webkit-linear-gradient(#b3b3b3, #eaeaea) !important;
       border: 0px solid #b3b3b3 !important;
       border-radius: 0px 0px 0px 0px;
       color: #6B6B6B;
     }
     .audio-author {
       color: red !important;
     }
     .audio-title {
       color: #ffffff !important;
     }
     .volume .bar.active {
       border-right-color: #36b3a8 !important;
     }
     .volume .bar {
       border-right-color: pink !important;
     }
     .progress {
       background: none repeat scroll 0 0 #707070 !important;
     }
     .controls {
       color: #707070 !important;
     }

删除暂停和静音静音。尝试将其添加到CSS中，但不起作用

Answer 1

带有控件的定制音频播放器。如果您正在寻找类似的东西，这可能会帮助您解决问题。

function $(id) { return document.getElementById(id); };
const media = document.getElementById('audio');

let ui = {
  play: 'playAudio',
  audio: 'audio',
  percentage: 'percentage',
  seekObj: 'seekObj',
  currentTime: 'currentTime'
};

function togglePlay() {
  if (media.paused === false) {
    media.pause();
    $(ui.play).classList.remove('pause');
  } else {
    media.play();
    $(ui.play).classList.add('pause');
  }
}

function calculatePercentPlayed() {
  let percentage = (media.currentTime / media.duration).toFixed(2) * 100;
  $(ui.percentage).style.width = `${percentage}%`;
}

function calculateCurrentValue(currentTime) {
  const currentMinute = parseInt(currentTime / 60) % 60;
  const currentSecondsLong = currentTime % 60;
  const currentSeconds = currentSecondsLong.toFixed();
  const currentTimeFormatted = `${currentMinute < 10 ? `0${currentMinute}` : currentMinute}:${
  currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds
  }`;
  
  return currentTimeFormatted;
}

function initProgressBar() {
  const currentTime = calculateCurrentValue(media.currentTime);
  $(ui.currentTime).innerHTML = currentTime;
  $(ui.seekObj).addEventListener('click', seek);

  media.onended = () => {
    $(ui.play).classList.remove('pause');
    $(ui.percentage).style.width = 0;
    $(ui.currentTime).innerHTML = '00:00';
  };

  function seek(e) {
    const percent = e.offsetX / this.offsetWidth;
    media.currentTime = percent * media.duration;
  }
  
  calculatePercentPlayed();
}

$(ui.play).addEventListener('click', togglePlay)
$(ui.audio).addEventListener('timeupdate', initProgressBar);

* {
  box-sizing: border-box;
}

body {
  background-size: 6px 6px !important;
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 46%, coral 49%, coral 51%, rgba(0, 0, 0, 0) 55%);
  background-color: white;
  padding-top: 60px;
}

.audio-player {
  width: 470px;
  padding: 35px 20px;
  margin: auto;
  background-color: white;
  border: 1px solid black;
}
.audio-player .player-controls {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.audio-player #radioIcon {
  width: 30px;
  height: 30px;
  background: url("https://image.flaticon.com/icons/svg/149/149429.svg") no-repeat center;
}
.audio-player #playAudio {
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  border: none;
  width: 30px;
  height: 30px;
  background: url("https://image.flaticon.com/icons/svg/149/149125.svg") no-repeat center;
  background-size: contain;
}
.audio-player #playAudio.pause {
  
  background-size: contain;
}
.audio-player p {
  margin: 0 0 0 5px;
  line-height: 1;
  display: inline-flex;
}
.audio-player p small {
  font-size: 10px;
}
.audio-player #seekObjContainer {
  position: relative;
  width: 300px;
  margin: 0 5px;
  height: 5px;
}
.audio-player #seekObjContainer #seekObj {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #e3e3e3;
  border: 1px solid black;
}
.audio-player #seekObjContainer #seekObj #percentage {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: coral;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="audio-player">

  <audio id="audio">
    <source src="https://thenewcode.com/assets/audio/24-ghosts-III.mp3" type="audio/mp3">
  </audio>

  <div class="player-controls">

    <div id="radioIcon"></div>

    <button id="playAudio"></button>

    <div id="seekObjContainer">
      <div id="seekObj">
        <div id="percentage"></div>
      </div>
    </div>

    <p><small id="currentTime">00:00</small></p>

  </div>
</div>
</body>
</html>

源代码来自：谢谢/AliKlein

音频标签CSS编辑

1 个答案: