制作一个简单的音乐播放器的进度条

因为最近在写一个音乐播放器,本来想做完整个项目再写博客的,但抑制不住我体内的洪荒之力,其实是怕到时候写起来长,就决定把一些知识点梳理出来

先了解一下HTML5出的audio标签

audio的定义

audio标签定义声音,比如音乐或其他音频流

audio标签的常用属性

  • autoplay 如果出现该属性,则音频在就绪后马上播放。

  • controls 如果出现该属性,则向用户显示控件,比如播放按钮。

  • loop 如果出现该属性,则每当音频结束时重新开始播放。

  • preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

  • src 要播放的音频的 URL。

audio DOM的常用属性

  • autoplay 设置或返回是否在加载完成后随即播放音频/视频

  • controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)

  • currentSrc 返回当前音频/视频的 URL

  • currentTime 设置或返回音频/视频中的当前播放位置(以秒计)

  • muted 设置或返回音频/视频默认是否静音

  • duration 返回当前音频/视频的长度(以秒计)

  • ended 返回音频/视频的播放是否已结束

  • paused 设置或返回音频/视频是否暂停

  • played 返回表示音频/视频已播放部分的 TimeRanges 对象

audio DOM的常用方法

  • load() 重新加载音频/视频元素

  • play() 开始播放音频/视频

  • pause() 暂停当前播放的音频/视频

  • canPlayType() 检测浏览器是否能播放指定的音频/视频类型

audio的用法我们大致上了解了,那么怎么制作自己喜欢的进度条呢?

定制自己喜欢的进度条

定制自己喜欢的进度条,我们需要以下步骤:

将原生的audio控件隐藏
  <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>
用一个div表示进度条组件
  <div class="progress">
    <span class="start"></span>
    <div class="progress-bar">
      <div class="now"></div>
    </div>
    <span class="end"></span>
  </div>
给进度条添加样式
  * {
      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;
    }
为audio的点击进度条添加事件
  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)

到这里进度条就完成了~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值