论坛 › 欢乐水吧 › +++++++++播放器基本功能设置解析+++++++++++

亚伦影音工作室 发表于 2025-10-11 19:50

+++++++++播放器基本功能设置解析+++++++++++

本帖最后由 亚伦影音工作室 于 2025-11-9 11:55 编辑 <br /><br />                <style>

                        #progressBar{width:600px;background:#ddd;position:relative;border-radius: 20px;cursor: pointer;}
                        #playProgressBar{position: relative;left:0;background:#880000;height:6px;width:100%;border-radius: 20px; cursor: pointer;}
.now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 4px;border-radius: 20px;
      width: 100%; cursor: pointer;
      background: #880000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 12px;margin: -3px -2px;
      height: 12px;border-radius: 20px;
      background-color: #880000;
    }
.start{color: #000; font: 400 14px sans-serif;position: relative;margin: 0px 0px;
       }
.end{color: #000; font: 400 14px sans-serif;position: relative;margin: 0px 0px;
      }
                        #ptxt{width:40px;height:20px;color: #000; font: 400 14px sans-serif;position: relative;margin: 0px 0px;}
                </style>
       
               
                <button onclick="pause()">暂停</button>
       
       
                <button onclick="play()">播放</button>       
</br></br>
<span class="end">00:00</span>/<span class="start">00:00</span>/<span id="ptxt">0%</span>
</br></br>
                <div id="progressBar">
                        <div id="playProgressBar"><div class="now"></div></div>
                </div>
</br></br>



                </br></br></br></br>

                <audioid="aud"autoplay src="https://s2.ananas.chaoxing.com/sv-w7/audio/e6/09/98/6e1ebeeca17bb7f13a4baa9eb5e31982/audio.mp3" loop></audio>

               
                <script>
                       
               
                       
                        //监听 Audio 的 timeupdate方法来实时获取播放进度
                        aud.addEventListener("timeupdate",function(){
                               
                                //获取当前播放的百分比当前进度/总进度
                                var percent= aud.currentTime / aud.duration
                               
                                //计算进度条的因子,百分比需要*该因子,最后才能到100%
                                var sp = 600 / 100 ;
                               
                                //拼接进度条的width
                                var swidth =(percent * 100 * sp) + "px";
                                console.log(percent*100,swidth)
                               
                                //设置进度条
                                document.getElementById("playProgressBar").style.width = swidth;
                                const now = document.querySelector('.now')//滑块
progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    now.style.width = p.toFixed(3) * 100 + '%'
})

        progressBar.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / progressBar.offsetWidth; }//拖拽})
                                //保留2位小数
                                document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
        })                       
                       
                //时间       
        const start = document.querySelector('.start')
const end = document.querySelector('.end')

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}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
               
                        //播放按钮
                        function play(){
                                aud.play();
                        }
                       
                       
                        //暂停按钮
                        function pause(){
                                aud.pause()
                        }
                       
                console.dir(aud)
                       </script>

樵歌 发表于 2025-10-11 21:02

新颖的播放器。{:4_199:}

杨帆 发表于 2025-10-11 22:05

顺畅、简洁、高效，谢谢亚伦老师经典分享{:4_191:}

小辣椒 发表于 2025-10-11 22:19

亚纶这个以后准备做帖里面？

查看完整版本: +++++++++播放器基本功能设置解析+++++++++++