html + js + css 实现可拖拽音频播放器

最新推荐文章于 2023-10-31 20:11:40 发布

jojo付啾啾

最新推荐文章于 2023-10-31 20:11:40 发布

阅读量1.5k

点赞数 3

分类专栏： JS CSS html5 文章标签：可拖拽音频播放器 js实现可拖拽音频播放器

本文链接：https://blog.csdn.net/DreamFJ/article/details/106523145

版权

JS 同时被 3 个专栏收录

116 篇文章 1 订阅

订阅专栏

CSS

52 篇文章 1 订阅

订阅专栏

html5

38 篇文章 0 订阅

订阅专栏

效果图

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .audio-container{
      width:343px;
      height:44px;
      border-radius:22px;
      border:1px solid rgba(224,225,239,1);
      display: flex;
      align-items: center;
      padding: 0 12px;
    }
    .play-pause{
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
    .progress-container{
      flex: 1;
      display: flex;
      align-items: center;
    }
    .progress-box{
      flex: 1;
      height:2px;
      background:rgba(241,241,241,1);
      border-radius:5px;
    }
    .progress-bar{
      width: 0;
      height:2px;
      background:rgba(115,164,255,1);
      border-radius:5px;
      position: relative;
    }
    .progress-dragger{
      width: 14px;
      height: 14px;
      background: url('./circle.png') no-repeat;
      background-size: 100%;
      position: absolute;
      top: 50%;
      right: -9px;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .time{
      min-width: 43px;
      padding: 0 5px;
    }
  </style>
</head>
<body>
  <div class="audio-container">
    <audio src="https://mv.xesimg.com/test_library/audio/2017/07/03/t_791698_17181920.mp3?1499050517"></audio>
    <img class="play-pause" src="./play.png" alt="">
    <div class="progress-container">
      <span class="time current-time">00:00</span>
      <div class="progress-box">
        <div class="progress-bar">
            <div class="progress-dragger"></div>
        </div>
      </div>
      <span class="time duration">00:00</span>
    </div>
  </div>

  <div class="audio-container">
    <audio src="https://mv.xesimg.com/test_library/audio/2017/07/03/t_791698_17181920.mp3?1499050517"></audio>
    <img class="play-pause" src="./play.png" alt="">
    <div class="progress-container">
      <span class="time current-time">00:00</span>
      <div class="progress-box">
        <div class="progress-bar">
            <div class="progress-dragger"></div>
        </div>
      </div>
      <span class="time duration">00:00</span>
    </div>
  </div>

  <script>
    // 时间转换
    const secondsToMS = (seconds) => {
      const mm = (parseInt(seconds/60) + '').padStart(2, '0')
      const ss = (parseInt(seconds % 60) + '').padStart(2, '0')

      return `${mm}:${ss}`
    }

    const audioArr = document.querySelectorAll('audio')
    audioArr.forEach((audio) => {
      const duration = audio.parentNode.querySelector('.duration')
      let totalTime = 0
      audio.addEventListener('canplay', function() {
        totalTime = this.duration
        duration.innerText = secondsToMS(totalTime)
      })

      const currentDuration = audio.parentNode.querySelector('.current-time')
      const progressBar = audio.parentNode.querySelector('.progress-bar')
      audio.addEventListener('timeupdate', function(){
        const currentTime = this.currentTime
        currentDuration.innerText = secondsToMS(currentTime)
        progressBar.style.width = (currentTime / totalTime * 100) + '%' 
      })

      const img = audio.parentNode.querySelector('.play-pause')
      audio.addEventListener('ended', function() {
        img.src = './play.png'
      })
    })

    // 点击播放/暂停音频
    document.addEventListener('click', (e) => {
      const target = e.target
      if (target.tagName.toLowerCase() !== 'img') return
      const currentAudio = target.parentNode.querySelector('audio')
      if (!currentAudio || currentAudio.tagName.toLowerCase() !== 'audio') return

      if (!currentAudio.paused) {
        target.src = './play.png'
        currentAudio.pause()
      } else {
        audioArr.forEach((audio) => {
          const img = audio.parentNode.querySelector('.play-pause')
          img.src = './play.png'
          audio.pause()
        })

        target.src = './pause.png'
        currentAudio.play()
      }
    })

    let progressBar,progress,currentAudio
    // 拖动音频
    document.addEventListener('mousedown', (e) => {
      if (e.target.className.includes('progress-dragger')) {
        progressBar = e.target.parentNode
        progress = progressBar.parentNode
        currentAudio = progress.parentNode.parentNode.querySelector('audio')

        document.addEventListener('mousemove', dragHandler)

        document.addEventListener('mouseup', () => {
          document.removeEventListener('mousemove', dragHandler)
        })
      }
    })

    const dragHandler = (e) => {
      const progressClinetW = progress.clientWidth
      const startPos = progress.getBoundingClientRect().left
      const endPos = progress.getBoundingClientRect().right
      const pageX = e.pageX

      const width = Math.max(startPos, Math.min(pageX, endPos)) - startPos

      progressBar.style.width = width + 'px'

      const currentTime = width / progressClinetW * currentAudio.duration

      currentAudio.currentTime = currentTime
    }
  </script>
</body>
</html>

circle.png

pause.png

play.png

jojo付啾啾

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html + js + css 实现可拖拽音频播放器

效果图index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
复制链接

扫一扫