我在《全民K歌》唱的歌曲多首连播-------抄袭偶然坛友的图片和代码
本帖最后由 寒冬残荷 于 2025-5-20 19:13 编辑 <br /><br /><style>.pa { --state: running; position: relative; display: grid; place-items: center; width: 1024px; height: 640px; box-shadow: 3px 3px 6px rgba(0,0,0,.75); z-index: 1;}
.pa:hover #mplayer { opacity: 1;transform: translateY(0);}
#mplayer { --color1: black; --color2: red;--yy: 280px; position: absolute; padding: 0 12px; width: 400px; height: 40px; color: var(--color1); background: beige; border-radius: 8px; box-shadow: 2px 2px 4px rgba(0,0,0,.5); display: flex; justify-content: center; align-items: center; gap: 8px;transform: translateY(var(--yy));opacity: 0;transition: .75s;user-select: none;}
#mplayer:hover #mlist { opacity: 1;}
#mplayer img {width: 26px; cursor: pointer;}
#mplayer img:hover {transform: scale(1.1);}
#tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center;}
#volwrap { width: 30px; height: 40px;display: grid; place-items: center;background: none; position: relative;}
#volwrap:hover #volume {opacity: 1; transform: rotate(-90deg);}
#volume {position: absolute;top: 0;left: 15px; width: 50px; height: 4px; opacity: 0;transition: .5s; transform-origin: 0 50%;}
#prog { --track: rgba(0,0,0,.6); --prog: red; --prg: 0%; height: 20px; flex-grow: 1; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 2px;}
#mlist { position: absolute; top: 45px; width: 100%;height: 160px; padding: 12px; border-radius: 0px; overflow: auto; scrollbar-width: thin;
scrollbar-color: var(--color1) rgba(255,255,255,.2); background: inherit;column-count: 2; column-rule: 2px solid rgba(0,0,0,.25); column-fill: auto; box-sizing: border-box;border: 1px solid gray; opacity: 0; transition: .7s;}
.list {margin: 0 8px; padding: 0 0 0 30px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; position: relative;}
.list::before { position: absolute; content: attr(data-idx); width: 30px; left: 0;}
.list1 { color: var(--color1); cursor: pointer;}
.list2 { color: var(--color2); cursor: default;}
.list1:hover { color: var(--color2); font-weight: bold;}
.fsbtn { position: absolute; color: lightblue; padding: 2px 6px; border: 2px solid lightblue; border-radius: 8px; user-select: none; cursor: pointer; opacity: 0; transition: .5s; z-index: 9;}
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none;}
@keyframes rot { to { transform: rotate(360deg); }}
</style>
<style>
/* #tz是边框颜色为d0d0d0的DIV*/
#tz {width:1300px; height:610px; position:relative; left:50%; transform:translate(-50%); top:10px; border:9px #d0d0d0 solid; background:url('https://pic1.imgdb.cn/item/68070da658cb8da5c8bdf67a.jpg') no-repeat center/cover; overflow:hidden; margin-left:-80px;}
/* #mplayer是播放器和播放列表的*/
#mplayer {--yy: -350px; background: rgba(0,125,125,.9); --color1: white; --color2: yellow;top: 10px; left: 850px; background: #222; }
#mplayer img { filter: invert(100%); }
#fsbtn { bottom: -115px; color: white; }
</style>
<div id="tz" class="pa">
<video autoplay="autoplay" controlslist="nodownload" loop="loop" muted="muted" style="left:50%; transform:translate(-50%); position: relative; width:372px; height:210px; top:44px; left: 142px; border-radius:5px;" src="https://cccimg.com/view.php/e02e36f4d2dfce9b014d8281ff2014dc.mp4"></video>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3splayer.js?v=1';
//-------------------这个JS文件我不会看，所以处理不了-------------------------------------------------
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('6(\'d\'n c.a(\'2\')){j.l.q=b(){6(1.7){1.7.h.p(1.7);1.7=o;1.3.i=\'\'}6(1.9){1.8=1.9}};j.l.m=b(){g 2=c.a(\'2\');g 4=1.4,5=1.5;6(4&5){6(!1.9){1.9=1.8}2.4=4;2.5=5;2.3.k=1.3.k;2.3.f=1.3.f;2.d(\'z\').y(1,0,0,4,5);x{1.8=2.A("B/t")}s(e){1.r(\'8\');2.3.w=\'v\';1.h.u(2,1);1.3.i=\'0\';1.7=2}}}}',38,38,'|this|canvas|style|width|height|if|storeCanvas|src|storeUrl|createElement|function|document|getContext||top|var|parentElement|opacity|HTMLImageElement|left|prototype|stop|in|null|removeChild|play|removeAttribute|catch|gif|insertBefore|absolute|position|try|drawImage|2d|toDataURL|image'.split('|'),0,{}))
//------------------------------------------------------------------------------------------------------
var musics = [
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=rb8lMcrl_smfNrlT&shareuid ','撞了南墙不醒悟'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=_EdKaq_Kr6GL__xH','无法重来的人生'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=Li697nL9xRAdqLew&shareuid','大花轿'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=Vz5gp1VgsLOKCVVl&shareuid','没有人会不遗憾'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=tHGqyKtq4kxR1tEg&shareuid ','菊花台'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=uZmRP-uRf7B_DuRR&shareuid ','人间这一遭'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=zVqG4dzGyFMr6zSn&shareuid ','东方大国'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=f6iYAvfYuUOPSfPv&shareuid ','人生无憾'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=BNe0-PB03oVS-Baz&shareuid ','别让心有千千结'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=R7AuiIRufJQ7tRSq&shareuid ','致亲爱的自己'],
['http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=6fLJoW6J77BOT6ph&shareuid ','陪你牵手闯天涯'],
];
hcplay(tz,null,musics);
//------------------------------------------------------------------------------------------------------
let dynPics = document.querySelectorAll('.dynpic');
let dpState = (bool) => {
dynPics.forEach(pic => {
bool ? pic.play() : pic.stop();
});
}
aud.addEventListener('play', () => dpState(true));
aud.addEventListener('pause', () => dpState(false));
//------------------------------------------------------------------------------------------------------
</script>
</div>
<div style="height:200px;"></div>
真假声转换过度得相当好的！混声很好。挺好听的！第二首唱最好。 樵歌 发表于 2025-4-22 16:17
真假声转换过度得相当好的！混声很好。挺好听的！第二首唱最好。
谢谢樵歌管理员的鼓励与支持！乱唱的{:5_106:}。主要目的是想学习制作代码音画，MP3地址不好找，自己唱的现成的。{:5_106:} 寒冬唱了这么多歌儿呢，每一首都很好，太厉害了{:4_199:} 这个制作也很漂亮，鼠标触碰会让播放器和歌词列表出现，就可以选择想听的歌了。鼠标移开还能让播放器收礼，露出动态演唱画面，制作很赞{:4_199:} 寒冬残荷 发表于 2025-4-22 18:01
谢谢樵歌管理员的鼓励与支持！乱唱的。主要目的是想学习制作代码音画，MP3地址不好找，自己唱的 ...
自己K的歌也要转换取得音乐地址丫。真的唱得挺好的，会唱歌的人，听得出来呢。 老师套用偶然这个播放器制作不错，但加的背景中间是视频格式，我加分后发现视频位置下来了，但刷新后视频位置还原了{:4_199:} 老师可以把播放器位置调整一下，还有整体图图尺寸还可以放大一点 欣赏老师好声音，翻唱非常好听，气息平稳，制作也是不错，赞一记！ 小辣椒 发表于 2025-5-17 22:08
老师可以把播放器位置调整一下，还有整体图图尺寸还可以放大一点
小辣椒管理员，您好！因身体不适，最近又少上网了，迟复为歉！我是为了预防老年痴呆才上网玩玩的，听人说唱歌也是对预防老年痴呆有好处才乱喊的歌。我七十岁的老太太，学东西不是很认真的学了{:5_106:} 小辣椒 发表于 2025-5-17 22:09
欣赏老师好声音，翻唱非常好听，气息平稳，制作也是不错，赞一记！
谢谢您的鼓励和支持。我把播放器和歌曲列表移到右边了。{:5_106:}画面大小就不改动了，太费神{:5_106:} 樵歌 发表于 2025-4-22 16:17
真假声转换过度得相当好的！混声很好。挺好听的！第二首唱最好。
谢谢您的鼓励和支持。我自己最喜欢《菊花台》这一首。{:5_106:} 寒冬残荷 发表于 2025-5-20 15:17
小辣椒管理员，您好！因身体不适，最近又少上网了，迟复为歉！我是为了预防老年痴呆才上网玩玩的，听人说 ...
太佩服了，向老师学习，活到老学到老，还学的这么好{:4_199:} 寒冬残荷 发表于 2025-5-20 19:16
谢谢您的鼓励和支持。我把播放器和歌曲列表移到右边了。画面大小就不改动了，太费神
没事，这样也是挺好的，老师辛苦了 声情并茂，声音圆润自如和音质优美，整个音域统一、均匀，唱高音和低音时，都能运用自如。 寒冬残荷唱的太棒了~我听的都醉了~
好听｀好听｀给我签个名吧！就签俺衣服上吧！要带唇印的哦~~
制作大气~演绎精彩，好棒哦，辛苦寒冬残荷！
唱的真棒~谢谢寒冬残荷带来的精彩～！
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
页:
[1]
2