Because recently I was writing a music player and wanted to do a whole project to write a blog, but I couldn't restrain the power of the flood and famine in my body. In fact, I decided to sort out some knowledge points for fear of writing long.

Let's first look at the audio tags from HTML5

Definition of audio

The audio tag defines sound, such as music or other audio streams.

Common attributes of audio tags

• If this property appears in autoplay, the audio is played as soon as it is ready.

• If this property appears, controls, such as playback buttons, are displayed to the user.

• If loop appears, it restarts every time the audio ends.

• If this property appears in preload, the audio is loaded when the page is loaded and ready to play. If "autoplay" is used, this property is ignored.

• The URL of the audio to be played by src.

Common attributes of audio DOM

• autoplay Sets or Returns Whether to Play Audio/Video Immediately after Loading

• Control sets or returns whether the audio/video display controls (such as playback/pause, etc.)

• CurrtSrc returns the current audio/video URL

• CurrtTime sets or returns the current playback position in audio/video (in seconds)

• muted Sets or Returns Audio/Video Silence by Default

• duration returns the current audio/video length in seconds

• Ended returns whether the audio/video playback has ended

• paused setting or returning audio/video pause

• Played returns the TimeRanges object that represents the played part of the audio/video

Common methods of audio DOM

• load() reload audio / video elements

• play() starts playing audio / video

• pause() pauses the currently playing audio/video

• canPlayType() detects whether the browser can play the specified audio/video type

We have a general understanding of the use of audio, so how do we make our favorite progress bar?

Customize your favorite progress bar

To customize your favorite progress bar, we need the following steps:

Hide native audio controls

  <audio height="0" width="0" id="music" src="http://dl.stream.qqmusic.qq.com/C400003RCA7t0y6du5.m4a?vkey=6853C20C7E3DAA08D9D79173735CFB95EDF5E926D72FE3BA53CECCC48947127857C41890640C1AE69AAB050AA9B8874767A48AF5BF9066A0&guid=7984684460&uin=0&fromtag=66"></audio>

Representing progress bar components with a div

  <div class="progress">
    <span class="start"></span>
    <div class="progress-bar">
      <div class="now"></div>
    </div>
    <span class="end"></span>
  </div>

Styling progress bars

  * {
      margin: 0;
      padding: 0;
    }

    .progress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 380px;
      margin: 100px auto;
    }

    .progress-bar {
      position: relative;
      width: 70%;
      height: 5px;
      background-color: #eee;
      vertical-align: 2px;
      border-radius: 3px;
      cursor: pointer;
    }

    .now {
      position: absolute;
      left: 0;
      display: inline-block;
      height: 5px;
      width: 70%;
      background: #31c27c;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 3px;
      height: 7px;
      background-color: lightblue;
    }

Adding events to audio's click progress bar

  const audio = document.getElementById('music')
  const start = document.querySelector('.start')
  const end = document.querySelector('.end')
  const progressBar = document.querySelector('.progress-bar')
  const now = document.querySelector('.now')

  function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
  }

  audio.onloadedmetadata = function () {
    end.innerHTML = conversion(audio.duration)
    start.innerHTML = conversion(audio.currentTime)
  }

  progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    let p = (coordEnd - coordStart) / this.offsetWidth
    now.style.width = p.toFixed(3) * 100 + '%'

    audio.currentTime = p * audio.duration
    audio.play()
  })

  setInterval(() => {
    start.innerHTML = conversion(audio.currentTime)
    now.style.width = audio.currentTime / audio.duration.toFixed(3) * 100 + '%'
  }, 1000)

Here the progress bar is completed ~~