亚伦影音工作室 发表于 2024-12-9 16:46

播放器控件

本帖最后由 亚伦影音工作室 于 2024-12-9 20:51 编辑 <br /><br />    <style>
      .father {
            margin: 100px;
            height: 4px;
            background-color: #899;
            width: 400px;
            overflow: hidden;
            border-radius: 5px;
      }

      .progress {
            background-color: #00FF00;
            /* width: 20%; */
            height: 100%;
      }

      .play_btn {
            width: 60px;
            height: 60px;
            
            line-height: 0px;
            background-color: orangered;
            color: #fff;font:400 16px/4em 华文隶书;
            border-radius: 50%;
            box-shadow: 2px 2px 5px #ccc;
            text-align: center;
            cursor: pointer;
      }
    </style>

    <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/b7/4d/a0/4da04054a721151e338e2f10b3c39c64/audio.mp3"autoplay loop></audio>
    <div class="play_btn">暂停</div>
    <div class="time"></div>
    <div class="father">
      <div class="progress"></div>
    </div>

    <script>
      function $(selector) { //将js获取节点封装成函数
            return document.querySelector(selector)
      }
      let progress = $('.progress')
      let player = $('#aud')
      let playBtn = $('.play_btn')
var progBar = document.getElementById('progress');
aud.addEventListener('timeupdate', () => {
         
            progBar.style.width = percent + '%';
      });
      let repairZero = function (num) { //不足两位，前面补零函数
            num = num.toString()
            return num ? num : ('0' + num)
      }

      let makeStr = function(){ //将时和分用：或者— 连接的函数
            let code = Array.prototype.shift.call(arguments)
            return Array.prototype.join.call(arguments,code)
      }

      let convertSec25tr = function(total){ //
            let min = repairZero(Math.floor(total / 60)) //转换为分钟，并取整补零
            let sec = repairZero(Math.floor(total % 60)) //转换为秒，并取整补零
            return makeStr(':',min,sec);
      }

      
      playBtn.onclick = function () {
            if (this.innerHTML === '播放') {
            aud.play() //音乐播放，详情参照w3c audio特性
                this.innerHTML = '暂停'
            } else {
                  aud.pause()//音乐暂停
                this.innerHTML = '播放'
            }
      }


         //aud.duration //获取音乐的长度，单位为s
         //aud.currentTime //音乐的播放进度，单位也是s

   
      let timer = setInterval(() => {
            let str = convertSec25tr(aud.currentTime) + '/' + convertSec25tr(aud.duration)
            $('.time').innerHTML = str
            progress.style.width = (aud.currentTime/aud.duration*100) + '%'
      }, 700)

    </script>

红影 发表于 2024-12-9 20:24

奇怪了，这个能点搜藏能点支持，就是点不动评分呢。也点不了表情。

红影 发表于 2024-12-9 20:25

这个进度条也不是能正确到达鼠标点击位置，暂停和播放可以正常点击。

红影 发表于 2024-12-9 20:26

这个贴子里不能点击表情，真奇怪。
页: [1]
查看完整版本: 播放器控件