论坛 › 音乐沙龙 › 该玩就玩该浪就浪 歌手：小琢 TO：亚伦

小辣椒 发表于 2024-5-3 21:37

该玩就玩该浪就浪 歌手：小琢 TO：亚伦

<style>#papa { margin: 120px 0 20px calc(50% - 720px);
        width: 1273px;
        height: 640px;
        background:#000000 ;
        no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;}
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#ff00ff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#ff00ff 90%,black 1%);}
#t{position: absolute;top:180px; left:480px; width: 400px; height: 250px;z-index:4;mix-blend-mode:lighten;}
#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;}

#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        top:83.6%; left:70.1%;
        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: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0px;
        height: 0px;
        left: 65px;
        border-width: 6px 7px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 3px;
        height: 11px;
                left: 39px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
         font: bold 18px/22px '微软雅黑',serif;
      color: #222;
         top:79%;
      left:71.4%;}

#prog {position: absolute;z-index: 91;
      width: 11%;
      height: 0.3%;
      cursor: pointer;
         top:83.6%;
color: #cccccc
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:70.5%;
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)contrast(140%)brightness(100%);}}
#bt{ --w: 0%; width: var(--w); overflow: hidden; color: #0129a5; position: absolute; left:23%;top:87%;font-size: 15px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">

<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt">李代沫 - 我最亲爱的</div>
<div id="t"><img id="tu" src="https://vvlk.oss-cn-hangzhou.aliyuncs.com/fhy.gif" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://xlaj.cn/assets/file/zp/20240503113207.gif" width="100%" height="100%"></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/60/35/be/9b9d25b5204b356c2222c9657a8b6751/audio.mp3" loop autoplay></audio>

<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#cccccc 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#cccccc -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:12%; left:15%;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: 45px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `该玩就玩该浪就浪
作词：刘红军
作曲：李春亮
演唱：小琢
编曲：DJ 小鹏
制作人：李春亮
OP：海豚音乐
人这一辈子不短也不长
有沟也有坎有风也有浪
活着就要潇洒活就活出个样
潇潇洒洒做自己做永远最棒
人活一辈子就那么一晃
一晃就老了时光太匆忙
该吃你就吃该唱就大声唱
人生越活越明白再玩把疯狂
该玩你就玩该浪你就浪
人生不过三万天人间走一趟
这趟单程票有来没有往
错过就是一辈子别悔断肝肠
该玩你就玩该浪你就浪
人生不过几个秋匆匆梦一场
活着就要开心烦恼丢一旁
做个人生大赢家不枉此生来一趟
。。。。。。
人活一辈子就那么一晃
一晃就老了时光太匆忙
该吃你就吃该唱就大声唱
人生越活越明白再玩把疯狂
该玩你就玩该浪你就浪
人生不过三万天人间走一趟
这趟单程票有来没有往
错过就是一辈子别悔断肝肠
该玩你就玩该浪你就浪
人生不过几个秋匆匆梦一场
活着就要开心烦恼丢一旁
做个人生大赢家不枉此生来一趟
该玩你就玩该浪你就浪
人生不过三万天人间走一趟
这趟单程票有来没有往
错过就是一辈子别悔断肝肠
该玩你就玩该浪你就浪
人生不过几个秋匆匆梦一场
活着就要开心烦恼丢一旁
做个人生大赢家不枉此生来一趟
谢谢欣赏

`;
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());
})();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg,#ffffff,#ffffff, #ffffff ' + aud.currentTime / aud.duration * 100 + '%, #999999 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-5-3 21:38

亚伦，小辣椒一直想给你做个透明的播放器，还是不会，今天这个播放器你肯定可以自己玩透明的了，不知道你会不会喜欢

亚伦影音工作室 发表于 2024-5-3 21:43

很漂亮，挺喜欢的！希望你发个透明的小频谱，我想在我设计的播放器里用用！

小辣椒 发表于 2024-5-3 21:45

亚伦影音工作室 发表于 2024-5-3 21:43
很漂亮，挺喜欢的！希望你发个透明的小频谱，我想在我设计的播放器里用用！

透明的小频谱，我自己没有，就岁月给我做了三个，这里有一个，前面发的也是有，你去看看

小辣椒 发表于 2024-5-3 21:48

一般swf频谱都是在软件里面as语句操作的，直接导出就是swf我看不见的，也不是动图了

马黑黑 发表于 2024-5-3 21:52

咦，俺的小U盘播放器肿么到小辣椒哪里去啦{:4_170:}

小辣椒 发表于 2024-5-3 21:56

马黑黑 发表于 2024-5-3 21:52
咦，俺的小U盘播放器肿么到小辣椒哪里去啦

哇塞，看起来小辣椒的技艺高超极了，居然黑黑的U盘秒偷了{:4_170:}

马黑黑 发表于 2024-5-3 21:57

小辣椒 发表于 2024-5-3 21:56
哇塞，看起来小辣椒的技艺高超极了，居然黑黑的U盘秒偷了

这个MP3小U盘播放器俺可是出国做学者访问时的赠品，不算受贿

小辣椒 发表于 2024-5-3 22:02

马黑黑 发表于 2024-5-3 21:57
这个MP3小U盘播放器俺可是出国做学者访问时的赠品，不算受贿

黑黑厉害，出国教学{:4_199:}

马黑黑 发表于 2024-5-3 22:07

小辣椒 发表于 2024-5-3 22:02
黑黑厉害，出国教学

养猪人都有机会的

小辣椒 发表于 2024-5-3 22:09

马黑黑 发表于 2024-5-3 22:07
养猪人都有机会的

你养的猪谁敢吃啊{:4_170:}

小辣椒 发表于 2024-5-3 22:15

亚伦影音工作室 发表于 2024-5-3 21:43
很漂亮，挺喜欢的！希望你发个透明的小频谱，我想在我设计的播放器里用用！

亚伦这个黑的播放器皮肤，后面有时间再送你一个红的皮肤，感谢亚伦的一键停止代码

南无月 发表于 2024-5-3 22:20

好漂亮的播放器。。。动感十足。。{:4_187:}

南无月 发表于 2024-5-3 22:21

右下角的带进度条，光盘旋转部分十分好看{:4_187:}

马黑黑 发表于 2024-5-3 22:22

小辣椒 发表于 2024-5-3 22:09
你养的猪谁敢吃啊

都往寺庙尼姑庵里送的

红影 发表于 2024-5-3 23:03

这个帖子很欢快，也很动感。小播放器很漂亮。
欣赏亲爱的好帖{:4_199:}

红影 发表于 2024-5-3 23:05

这个还带着岁月的小动图频谱，播放器里带进度和时间显示，亲爱的这个帖子真漂亮。
亚伦老师收礼开心{:4_199:}

梦油 发表于 2024-5-4 08:43

轻松、欢快的节奏也感染了我。

小辣椒 发表于 2024-5-4 21:22

南无月 发表于 2024-5-3 22:20
好漂亮的播放器。。。动感十足。。

谢谢月月欣赏，这个播放器是仿swf的按钮也是就打开停止，纯是玩玩的

小辣椒 发表于 2024-5-4 21:23

南无月 发表于 2024-5-3 22:21
右下角的带进度条，光盘旋转部分十分好看

swf的还要漂亮，只是现在做了看不见

查看完整版本: 该玩就玩该浪就浪 歌手：小琢 TO：亚伦