论坛 › 欢乐水吧 › 《罗刹海市》刀郎【七拼八凑】

亚伦影音工作室 发表于 2023-8-1 18:51

《罗刹海市》刀郎【七拼八凑】

本帖最后由 亚伦影音工作室 于 2023-8-1 19:16 编辑 <br /><br /><style>
#papa { margin: 10px -350px ;width: 1288px; height: 754px; background:#000000 url('') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; top:10px; display: grid; place-items: center; overflow: hidden; user-select: none; z-index: 1;}
#dt{ position: absolute; width: 1288px; height: 754px; top: 0px; left: 0px; }
#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 8px 4px;display: grid;place-items: end center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--bgColor: linear-gradient(to right, var(--prog) 0%, var(--prog) 0%, var(--track) 0%, var(--track));--ww: 900px;--color: hsla(100,10%,80%,.95);--track: hsla(90, 100%, 95%, .65);--prog: hsla(50,50%,50%,.65);--btn_size: 40px;}
#btnplay {--dis1: block;--dis2: none;grid-area: btnplay;width: 35px;height: 35px;border: 3px solid var(--color);border-radius: 50%;opacity: .95;cursor: pointer;transition: .3s;position: relative;}
#btnplay:hover { opacity: 1; box-shadow: 0 0 5px var(--color), inset 0 0 5px var(--color); }
#btnplay:hover::before, #btnplay:hover::after { opacity: 1; }
#btnplay::before, #btnplay::after {position: absolute;content: '';width: 100%;height: 100%;background: var(--color);opacity: .85;}
#btnplay::before { display: var(--dis1); clip-path: polygon(35% 30%, 75% 50%, 35% 70%); }
#btnplay::after {display: var(--dis2);clip-path: polygon(35% 30%, 45% 30%, 45% 70%, 35% 70%, 55% 70%, 65% 70%, 65% 30%, 55% 30%, 55% 70%, 35% 70%);}
#prog {grid-area: prog;-webkit-appearance: none;width: var(--ww);outline: none;background: none;position: relative;}
#prog::-webkit-slider-thumb {-webkit-appearance: none;position: relative;width: 20px;height: 20px;border: 6px solid var(--color);border-radius: 50%;background: var(--prog);top: calc(50% - 10px);cursor: pointer;z-index: 8;}
#prog::-moz-range-thumb {-webkit-appearance: none;width: 4px;height: 4px;border: 6px solid var(--color);border-radius: 50%;background: var(--prog);cursor: pointer;z-index: 888;}
#prog::-webkit-slider-runnable-track { height: 4px; border-radius: 10px; background: var(--bgColor); }
#prog::-moz-range-track { height: 4px; border-radius: 10px; background: var(--bgColor); }
#cur { grid-area: cur; color: var(--color); position: absolute;left:0%;}
#dur { grid-area: dur; color: var(--color);position: absolute; left:90%;}
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000)no-repeat center/cover;
        position: absolute;
        left: 50%;z-index: 20;
        transform: translate(-50%);
        top: 75%;
        font:normal 3.2em 华文隶书;
        color: #0000;
        white-space: pre;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1{ 0% { width: 0%;letter-spacing: 15px; color:#000090;}100% { width: 350%; letter-spacing: 0px;color:#ff0000; }   }
@keyframes cover2 {0% { width: 0%;letter-spacing: 0px; color:#00ff00;}100% { width: 350%; letter-spacing: 15px;color:#ff0000; }}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 3em华文隶书; opacity: 1; cursor: pointer; z-index: 111}
</style>


<div id="papa">
      <img id="dt" src="https://xlaj.cn/assets/file/zp/20230722152614.gif" alt="" style=" " />
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>
<div id="mplayer">
<input type="range" id="prog" step="0.1" max="100" value="0" /><span id="btnplay"></span><span id="cur">00:00</span><span id="dur">00:00</span>
</div>
        <audio id="aud" src="https://www.qqmc.com/mp3/music288010178.mp3" autoplay loop></audio>
   </div>
<script>
(function(mkPlayer) {let defaults ={player_css: `bottom: 40px;left: 20%; --color: white; --ww: 900px; --track: snow; --prog: purple;`};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onmousedown = () =>mDrag =true;prog.onmouseout = () => mDrag = false;prog.onchange = () => { aud.currentTime = aud.duration * prog.value / 100; mDrag = false; };prog.onmousemove = () => prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);if(mDrag===false) prog.value = aud.currentTime / aud.duration * 100;for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--dis1','block'), btnplay.style.setProperty('--dis2','none')): (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--dis1','none'), btnplay.style.setProperty('--dis2','block'));aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());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;}};mkPlayer.HCPlayer = playCode;})(this);HCPlayer();
(function() {let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
mplayer.addEventListener('click', () => { aud.paused ?aud.play() : aud.pause(); });
})();
(function() {
/*原始lrc歌词*/
let lrcStr = ` 《罗刹海市》刀郎
作词Lyrics by：刀郎
作曲Composed by：刀郎
制作人：亚伦
代码协作：马黑，小辣椒
罗刹国向东两万六千里
过七冲越焦海三寸的黄泥地
只为那有一条一丘河
河水流过苟苟营
苟苟营当家的叉杆儿唤作马户
十里花场有浑名
她两耳傍肩三孔鼻
未曾开言先转腚
每一日蹲窝里把蛋来卧
老粉嘴多半辈儿以为自己是只鸡
那马户不知道他是一头驴
那又鸟不知道他是一只鸡
勾栏从来扮高雅
自古公公好威名
打西边来了一个小伙儿他叫马骥
美丰姿 少倜傥 华夏的子弟
只为他人海泛舟搏风打浪
龙游险滩流落恶地
他见这罗刹国里常颠倒
马户爱听那又鸟的曲
三更的草鸡打鸣当司晨
半扇门楣上裱真情
它红描翅那个黑画皮绿绣鸡冠金镶蹄
可是那从来煤蛋儿生来就黑
不管你咋样洗呀那也是个脏东西
那马户不知道他是一头驴
那又鸟不知道他是一只鸡
岂有画堂登猪狗
哪来鞋拔作如意
它红描翅那个黑画皮绿绣鸡冠金镶蹄
可是那从来煤蛋儿生来就黑
不管你咋样洗呀那也是个脏东西
爱字有心心有好歹
百样爱也有千样的坏
女子为好非全都好
还有黄蜂尾上针
西边的欧钢有老板
生儿维特根斯坦
他言说马户驴又鸟鸡
到底那马户是驴还是驴是又鸟鸡
那驴是鸡那个鸡是驴那鸡是驴那个驴是鸡
那马户又鸟
是我们人类根本的问题`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ?aud.play() : aud.pause(); });

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</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 = '';
      }
      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("dt"),

    button = document.getElementById("mplayer");
    if (image&& button) {
    button.onclick = function() {
      if (this.value == '') {
            image.play();
            this.value = '.';
      } else {
         image.stop();
            this.value = '';
      }
    };
}

</script>

红影 发表于 2023-8-1 19:50

用这样的背景做出来也不错，漂亮。欣赏亚伦老师好帖{:4_187:}

红影 发表于 2023-8-1 19:52

罗刹国里常颠倒，现世不也如此么{:4_173:}

小辣椒 发表于 2023-8-1 21:25

啊~~~才看见，谢谢亚伦，这个代码我收藏了{:4_187:}

小辣椒 发表于 2023-8-1 21:26

我就喜欢一个动图，而且特别喜欢这个播放器，现在可以直接套用玩了{:4_170:}

小辣椒 发表于 2023-8-1 21:28

就这个播放器我自己修改一键停止没有成功的，现在好了，我就直接套用了

小辣椒 发表于 2023-8-1 21:30

谢谢亚伦，后面争取做一个出来。{:4_187:}

亚伦影音工作室 发表于 2023-8-1 22:02

本帖最后由 亚伦影音工作室 于 2023-8-1 22:05 编辑

小辣椒 发表于 2023-8-1 21:30
谢谢亚伦，后面争取做一个出来。
里面有的代码是多余的，我也不敢随便删，所以咱也不敢鲁班门前耍大刀！

小辣椒 发表于 2023-8-1 22:03

亚伦影音工作室 发表于 2023-8-1 22:02
里面有的代码是多余的，我也不敢随便删，所以咱不鲁班门前耍大刀！

看见了，有溢出码，我会修改一下的

小辣椒 发表于 2023-8-1 22:05

亚伦影音工作室 发表于 2023-8-1 22:02
里面有的代码是多余的，我也不敢随便删，所以咱不鲁班门前耍大刀！

就这个图我一直没有做帖，想修改一键停止的，自己没有修改成功，后来就发了，特别喜欢这个动图的，无论立体感和动图的效果都很美

查看完整版本: 《罗刹海市》刀郎【七拼八凑】