论坛 › 欢乐水吧 › 仿频谱 仿播放器控件

亚伦影音工作室 发表于 2024-4-22 22:04

仿频谱 仿播放器控件

本帖最后由 亚伦影音工作室 于 2024-4-23 21:20 编辑 <br /><br /><style>
#papa {margin: 140px -300px;
        width: 1164px;
        height: 640px;
        background:url(https://pic.imgdb.cn/item/6600e7829f345e8d03a9a674.jpg)no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}

#dt{position: absolute;top:80px; left:30px;width: 500px;height: 500px;z-index:4;mix-blend-mode:lighten;}
#dt img{width: 100%;}
#t1{position: absolute;top:87.5%; left:1%;width: 530px;height: 58px;z-index:3; mix-blend-mode: lighten; }
#t1 img{width: 100%;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        top:88.8%; left:22.5%;
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 0px solid #cccccc;
        border-radius: 0%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #eeeeee;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 37px;bottom: 13px;
        border-width: 5px 5px;
        border-color: transparent transparent transparent #eeeeee;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 8px;bottom: 13px;
                left: 21px;
        border-width: 0 2px 0 2px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 5px sans-serif;
      color: #ffffff;
         top:87.5%;
      left:8.5%;}

#prog {position: absolute;z-index: 91;
      width: 15%;
      height: 0.5px;
      cursor: pointer;
         top:90.6%;
color: #0000000;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:7.2%;
border-radius: 2px;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)con6trast(140%)brightness(100%);}}
#bt{ --w: 28%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:17%;top:92.5%;font-size: 14px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 10s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">
<div id="bt">等我不再去打扰 (Live合唱版) 歌手：王一佳</div>
<div id="dt"><img id="tu"
src="https://pic.imgdb.cn/item/6562dc6bc458853aefee7156.gif" ></div>
<div id="t1"><img id="tu1" src="https://pic.imgdb.cn/item/66265ce40ea9cb1403e8c008.gif" ></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/8e/8d/eb/85b016270aa4a6658176936dba70db59/audio.mp3" loop autoplay></audio>

<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:71%; left:-27%;z-index: 5;
    margin: 0 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: 34px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `等我不再去打扰 (Live合唱版)
歌手：王一佳
作词：班安华
作曲：灵魂Kk
编曲：滨滨
混音：冯鑫阳
合唱：毅然合唱团
等我不再怕天黑
等我对爱淡如水
等我流干了眼泪
等我忘记你是谁
等我回忆烧成灰
等我把曾经销毁
等我治愈了伤悲
等我潇洒的后退
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬
。。。。。。
等我不再怕天黑
等我对爱淡如水
等我流干了眼泪
等我忘记你是谁
等我回忆烧成灰
等我把曾经销毁
等我治愈了伤悲
等我潇洒的后退
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬
等我不再去打扰
爱恨都一笔勾销
既然我对你不重要
又何必费力去讨好
等我不再去打扰
收回了心不再闹
往事让它随风飘
从此不为谁煎熬


`;
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;
    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;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';});
                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;
      };

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';image1.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script>

红影 发表于 2024-4-22 22:24

漂亮，很精致的播放器系列设计，仿频谱的效果也很漂亮。
欣赏亚伦老师好帖{:4_199:}

愤怒的葡萄 发表于 2024-4-23 08:44

欣赏亚伦老师好帖

查看完整版本: 仿频谱 仿播放器控件