论坛 › 欢乐水吧 › 圆形播放器

亚伦影音工作室 发表于 2025-1-31 21:22

圆形播放器

本帖最后由 亚伦影音工作室 于 2025-5-12 14:09 编辑 <br /><br /><style>
#papa { margin:0 -300px; width:1286px; height: 720px; box-shadow: 3px 3px 20px #000; background: #800000 url('https://img2.oldkids.cn/upload/2020/11/23/photo_20201123133415772.jpg') no-repeat 0% 0%/100%;position: relative;overflow: hidden; }
#pa{margin: 160px 100px ;position:absolute;width: 200px; height: 150px; overflow: hidden;}
#bnt{ left:85px;top: 40%;z-index: 6;
position: absolute; cursor: pointer;}
#cndpt{position: absolute; width: 100%; height: 100%;display:block;
align-items: center; }
#enopg{ position: absolute;width: 100%; height: 100%; display:none;
align-items: center; }
.start{color: #fff;position: absolute; top:68px; left: 42px;}
.end{color: #fff;position: absolute;top:68px; right: 42px;}
#prog {position: absolute; display: grid; place-items: center; width: 140px; height: 140px; right: 32px; bottom: 5px;border-radius: 50%;-webkit-mask: radial-gradient( transparent 63%, #000 66%, #000 0);cursor: pointer; z-index: 5;}
.gc{position: absolute;
          top: 160px;
            left: 50%;
            text-align: center;
            list-style-type: none;
            height: 200px;
            line-height: 80px;
            }
.lrc{
    width: 500px;
    height: 140px;
    overflow: hidden;bottom: 80px;
    display: block; position:absolute;;z-index: 5;
    margin: 0px 80px;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 30px;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
</style>
<div id="papa">
<div id="pa">
<span class="end">00:00</span><div id="bnt">
<div id="cndpt" > <svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" />
    </svg></div>
<div id="enopg"><svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M18 12L0 24V0" />
    </svg></div>
</div>
<span class="start">00:00</span>
<div id="prog" title="播放进度条"></div>

</div>

<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>

<div class="gc">
<marquee id="marquee"scrollAmount=2 width=600 height=200 direction=up> <font face="heiti" size="6" color="#eee"><p style="text-align: center;">分手2024 <br>
词：马健涛<br>
曲：马健涛<br>
唱：马健涛<br>
出品：亚伦影音工作室<br>
</p></font></marquee>
         </div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/9d/c4/4c/dfca122a12e0d323f3050432b171bc9c/audio.mp3" autoplay loop></audio>
</div>

<br>


<script >
bnt.onclick = () => aud.paused ? (aud.play(),enopg.style.display= 'none',cndpt.style.display= 'block',marquee.start()) : (aud.pause(),enopg.style.display= 'block',cndpt.style.display='none', marquee.stop());
var marquee= document.getElementById('marquee');
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)
   
}, 1000)

prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
                }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
                });
      </script >
<script >
var lrc = `分手2024
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：羡然文化
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我能让你快乐
那么还有什么理由挽留呢
心如刀割
爱过我以后 你曾后悔过
离开我以后 你是否也难过
吻过我以后 幸福着你的快乐
夕阳落下后 我们不再手牵手
爱过你以后 我快乐足够
离开你以后 却更不自由
我不能左右 爱情的衣袖
忘也忘不掉 黄昏吻你的时候
你已经不用说 我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我 不管我的死活
往后的日子我又该怎么活
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我 能让你快乐
那么还有什么理由挽留呢
心如刀割
爱过你以后 我快乐足够
离开你以后 却更不自由
我不能左右 爱情的衣袖
忘也忘不掉 黄昏吻你的时候
你已经不用说 我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我 不管我的死活
往后的日子我又该怎么活
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我 能让你快乐
那么还有什么理由挽留呢
心如刀割
你已经不用说 我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我 不管我的死活
往后的日子我又该怎么活
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我 能让你快乐
那么还有什么理由挽留呢
心如刀割
`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
   var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
</script >

小辣椒 发表于 2025-1-31 22:06

亚纶一个接一个的单曲播放器，这种辛苦了{:4_187:}

小辣椒 发表于 2025-1-31 22:07

直接做帖里面多好{:4_173:}

庶民 发表于 2025-2-1 06:44

在这里欣赏。

红影 发表于 2025-2-1 13:52

漂亮的圆形进度条播放器，多行歌词也很漂亮。
欣赏亚伦老师好贴{:4_199:}

老谟深虑 发表于 2025-2-2 15:42

          欣赏老师佳作，点赞！

查看完整版本: 圆形播放器