Как настроить аудиоплеер?

Question

Я пытаюсь скопировать этот аудиоплеер:

https://medium.com/s/story/the-law-of-least-effort-is-the-success-secret-nobody-talks-about-c713eeab8ade)

с серой линией прогресса, но я не могу понять следующие 4 вещи:

1. Как поставить индикатор выполнения рядом с кнопкой воспроизведения / паузы?
2. Как получить 2 десятичных знака для общей цифры времени? (48 секунд)
3. Как получить 2 десятичных знака для currentTimer? (Первые 9 секунд)
4. Как разместить таймеры в начале и в конце?

var barSize = 640;
var bar = document.getElementById('defaultBar');
var progressBar = document.getElementById('progressBar');

mytrack.addEventListener("loadedmetadata", function() {
  var minutes = parseInt(mytrack.duration / 60);
  var seconds = parseInt(mytrack.duration % 60);
  duration.innerHTML = minutes + ':' + seconds;
})

duration.innerHTML = mytrack.duration;

playButton.addEventListener('click', playOrPause, false);
bar.addEventListener('click', clickedBar, false);

#progressBar {
  position: absolute;
  height: 2px;
  background-color: #C6C6C6;
  width: 0px;
  float: left;
}

#playButton {
  background-color: #FFFFFF;
  border: none;
  outline: none;
  height: 60px;
  width: 60px;
  background-image: url(../Desktop/Play%20button.png);
  background-repeat: no-repeat;
  background-position: center;
}

#player {
  background-color: #FFFFFF;
  width: 400px;
  margin-left: 300px;
  padding: 5px;
  box-sizing: border-box;
}

<div id="wrapper">

  <audio id="mytrack">
    <source src="file:///Users/Pier/Desktop/Narrated%20Story%20-%20Example.m4a" type="audio/mp3"/>
  </audio>

  <nav>
    <div id="defaultBar">
      <div id="progressBar"></div>
    </div>
    <div id="buttons">
      <button type="button" id="playButton"></button>
      <span id="currentTime">0:00</span>
      <span id="fullDuration">0:00</span>
    </div>
  </nav>

</div>

Answer 1

Страница, на которую вы ссылаетесь, использует flexbox для макета. Вы могли бы рассмотреть аналогичный подход.

Ниже я реструктурировал ваш HTML и сделал каждый элемент управления элементом flexbox.
Я также центрировал все элементы по вертикали с помощью align-items:center.

var myTrack = document.getElementById('myTrack');
var progressBar = document.getElementById('progressBar');
var currentTime = document.getElementById('currentTime');
var fullDuration = document.getElementById('fullDuration');

function zeroPad(s) {
  return ('00' + s).slice(-2);
}

function formatTime(t) {
  var m = Math.floor(t / 60);
  var s = Math.floor(t % 60);
  return zeroPad(m) + ':' + zeroPad(s);
}

function playOrPause() {
  myTrack.paused ? myTrack.play() : myTrack.pause();
}

myTrack.addEventListener("loadedmetadata", function() {
  fullDuration.innerHTML = formatTime(this.duration);
});

myTrack.addEventListener("timeupdate", function() {
  var thisTime = this.currentTime;
  var duration = this.duration;
  progressBar.style.width = thisTime / duration * 100 + '%';
  currentTime.innerHTML = formatTime(thisTime);
});

playButton.addEventListener('click', playOrPause, false);

#audioControls {
  display: flex;
  align-items: center;
}

.controlTime {
  margin: 0 1em;
}

#progressWrap {
  /* Allow this element to grow */
  flex: 1 0 auto;
  border: 1px solid #EEE;
  border-radius: 0.5em;
  overflow: hidden;
}

#progressBar {
  height: 0.5em;
  background-color: #55AA55;
  width: 0;
}

#playButton {
  background-color: #FFFFFF;
  border: 1px solid #CCC;
  border-radius: 3px;
  padding: 0.7em 1em;
  outline: none;
  cursor: pointer;
}

#playButton:hover {
  background-color: darkgray;
  color: white;
}

<div id="wrapper">

  <audio id="myTrack">
    <source src="https://example-files.online-convert.com/audio/m4a/example.m4a" type="audio/mp3"/>
  </audio>

  <nav id="audioControls">
    <button type="button" id="playButton">play</button>
    <span class="controlTime" id="currentTime">00:00</span>
    <div id="progressWrap">
      <div id="progressBar"></div>
    </div>
    <span class="controlTime" id="fullDuration">00:00</span>
  </nav>

</div>