论坛 › 欢乐水吧 › 磁带播放器

亚伦影音工作室 发表于 2025-1-29 19:45

磁带播放器

本帖最后由 亚伦影音工作室 于 2025-4-5 13:17 编辑 <br /><br /><style>
#mplayer {
      margin: 20px auto;
      width: 200px;
      height: 120px;
background: linear-gradient(0deg, #555 39%, gray 49%,#555 59%);
      box-shadow:0px 0px 0px 15px#444 inset,0px 0px 0px 16px gray inset,0px 0px 0px 36px #444 inset,0px 0px 0px 37px gray inset;
      
border-radius: 2%;
      display: grid;
      place-items: center;
      position: relative;
      --prg: 25%; --state: paused;
}
#meihua{ position: absolute;background:#666;width: 180px;
      height: 140px;left: 10px;bottom: 0px; clip-path: polygon(20% 80%, 80% 80%, 85% 100%, 15% 100%);    }

#mplayer > span { position: absolute; }
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
}
#mplayer::before {
      left: 6px;
      top: 6px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: gray;
      box-shadow: 178px 0 0 gray, 0 98px 0 0 gray, 178px 98px 0 0 gray;
}
/*
#mplayer::after {
      width: 78px;
      height: 24px;
      border-radius: 24px;
      background: lightgray;
}
*/
#btnP1, #btnP2 {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid silver;
      display: grid;
      place-items: center;
      cursor: pointer;
      animation: rot 5s infinite linear var(--state);
}
#btnP1 {
      left: 20px;
      background: gray radial-gradient(
                transparent,
                transparent 20%,
                #444 calc(20% + 1px),
                #444 calc(100% - var(--prg)),
                transparent calc(100% - var(--prg) + 1px),
                transparent 0
      );
}
#btnP2 {
      right: 20px;
      background: gray radial-gradient(
                transparent,
                transparent 20%,
                #444 calc(20% + 1px),
                #444 var(--prg),
                transparent calc(var(--prg) + 1px),
                transparent 0
      );
}
#btnP1::after, #btnP2::after {
      position: absolute;
      content: '';
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 3px dotted rgba(250,250,250,.7);
}


@keyframes rot { to { transform: rotate(1turn); } }

#tmsg{position: absolute;width: 100px; height: 60px;font:100 10px sans-serif;color: #fff;top:20px;left: 70px;}

.lrc{
    width: 500px;
    height: 120px;
    overflow: hidden;
    display: block; position:relative;z-index: 5;
    margin: 50px auto;}
.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: 0px;
    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="mplayer">
<div id="meihua"></div>
      <div id="tmsg">00:00 | 00:00</div>
      <span id="btnP1"></span>
      <span id="btnP2"></span>
</div>
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>

    </div>

<audio id="aud" src="https://img3.oldkids.cn/upload/2025/01/26/blog_260848378_20250126133259556.mp3" loop autoplay></audio>

<script>

let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
      let prg = aud.currentTime / aud.duration * 100 + 20;
      mplayer.style.setProperty('--prg', prg + '%');
});
btnP1.onclick = btnP2.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };

</script>
<script >
var lrc = `来生再去拥抱你-陈依梦
作词：一只舟
作曲：一只舟
专辑：陈依梦歌选
演唱：陈依梦
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
世间多少个轮回
我们才能今生相遇
爱情没有想象中那样美丽
就像残花微微的叹息
爱已变得默默无语
再也找不到爱过的痕迹
如果我们有来生
我会好好陪着你
把你紧紧搂在我的怀里
用我一生一世去爱你
不让你再受到委屈
永永远远我们也不分离
亲爱的对不起
不是我不爱你
是我不忍看着你
泪流满面折磨自己
是我的爱把你伤的
伤的这样彻底
伤的是你痛的是我
我不该走进你心里
亲爱的对不起
不是我不珍惜
放弃了你不代表我
没有爱过你
既然我们今生注定
注定不能在一起
就把这份爱放心底
一点一点去忘记
(Music)
世间多少个轮回
我们才能今生相遇
爱情没有想象中那样美丽
就像残花微微的叹息
爱已变得默默无语
再也找不到爱过的痕迹
如果我们有来生
我会好好陪着你
把你紧紧搂在我的怀里
用我一生一世去爱你
不让你再受到委屈
永永远远我们也不分离
亲爱的对不起
不是我不爱你
是我不忍看着你
泪流满面折磨自己
是我的爱把你伤的
伤的这样彻底
伤的是你痛的是我
我不该走进你心里
亲爱的对不起
不是我不珍惜
放弃了你不代表我
没有爱过你
既然我们今生注定
注定不能在一起
就把这份爱放心底
一点一点去忘记
亲爱的对不起
不是我不爱你
是我不忍看着你
泪流满面折磨自己
是我的爱把你伤的
伤的这样彻底
伤的是你痛的是我
我不该走进你心里
亲爱的对不起
不是我不珍惜
放弃了你不代表我
没有爱过你
既然我们今生注定
注定不能在一起
就把这份爱放心底
一点一点去忘记
(Music)
☆★梅竹谢谢欣赏★☆
=End=

`;
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-29 20:39

谢谢您，春节快乐！

红影 发表于 2025-1-29 21:18

漂亮的磁带效果。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-1-29 21:19

好像有半截时间看不到了，放上面一格是不是更好点？{:4_204:}

小辣椒 发表于 2025-1-29 23:36

亚纶现在对播放器是越来越有兴趣了，层出不穷的，一个个出来{:4_199:}

小辣椒 发表于 2025-1-29 23:37

欣赏亚纶的漂亮歌词同步磁带播放器

老谟深虑 发表于 2025-1-30 08:57

         老师的磁带播放器很好，点赞！

查看完整版本: 磁带播放器