孙艺琪 - 歌名歌（DJ何鹏版） - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2024-7-10 20:06

孙艺琪 - 歌名歌（DJ何鹏版）

本帖最后由亚伦影音工作室于 2024-7-13 09:39 编辑 <br /><br /><style type="text/css">
#papa{
position: relative;
width: 1164px;
height: 640px;
   margin-left:-300px;
margin-top:10px;
border: 0px solid rgba(36, 201, 219,.95);
   border-radius: 0px;
background:#500 url(https://pic.imgdb.cn/item/6605171d9f345e8d0336b0e0.jpg)no-repeat center/cover;
overflow: hidden;
}

.photo {width: 100%; height: 100%;
position:absolute;
top:0%; left:0%;
opacity: 0;transform-origin: bottom right;
animation: round 60s linear infinite;}
@keyframes round {0% {transform: rotateZ(0deg); opacity: 0;}
2% {transform: rotateZ(0deg); opacity: 1; }

10% {transform: rotateZ(-180deg); opacity: 1; }

12% {transform: rotateZ(-180deg); opacity: 0; }
}
.photo:nth-child(15) {animation-delay: 56s;background: url(https://pic.imgdb.cn/item/6600f6f19f345e8d03ebaf86.jpg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 52s;background: url(https://pic.imgdb.cn/item/6600c3689f345e8d032ea733.jpg)no-repeat center/cover}
.photo:nth-child(13) {animation-delay: 48s;background: url(https://pic.imgdb.cn/item/65d054569f345e8d0339cb08.jpg)no-repeat center/cover}
.photo:nth-child(12) {animation-delay: 44s;background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover}
.photo:nth-child(11) {animation-delay: 40s;background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover}
.photo:nth-child(10) {animation-delay: 36s;background: url(https://pic.imgdb.cn/item/65db13fa9f345e8d03a48992.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 32s;background: url(https://pic.imgdb.cn/item/65db12cb9f345e8d03a20693.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 28s;background: url(https://pic.imgdb.cn/item/65dac8db9f345e8d03eac742.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 24s;background: url(https://pic.imgdb.cn/item/65bb5ce1871b83018a3ed949.jpg)no-repeat center/cover}
.photo:nth-child(6){animation-delay: 20s;background: url(https://pic.imgdb.cn/item/65b8fae0871b83018a629f5a.jpg)no-repeat center/cover}
.photo:nth-child(5){animation-delay: 16s;background: url(https://pic.imgdb.cn/item/65b8fa8e871b83018a610f7f.jpg)no-repeat center/cover}
.photo:nth-child(4){animation-delay: 12s;background: url(https://pic.imgdb.cn/item/658d7b30c458853aefc07335.jpg)no-repeat center/cover}
.photo:nth-child(3){animation-delay: 8s;background: url(https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg)no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 4s;background: url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg')no-repeat center/cover}
.photo:nth-child(1) {animation-delay: 0s;background: url(https://pic.imgdb.cn/item/6600e87c9f345e8d03adc879.jpg)no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}

</style >
<div id="papa" >
<div id="testImg" >
<divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div>
<divclass="photo"></div><divclass="photo"></div><divclass="photo"></div>
</div>

<div id="bfqbg">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/65fa42669f345e8d03c830a3.gif" /></div>
<img id="tp" src="https://pic.imgdb.cn/item/668e75ddd9c307b7e9c54310.jpg" alt="" />
<div id="bt">孙艺琪 - 歌名歌（DJ何鹏版）</div>
<audioid="aud" loop controls autoplay>
<source src="https://s2.ananas.chaoxing.com/sv-w9/audio/45/4e/ac/eba786ab9bc0fe6cbda670c989e5a966/audio.mp3" type="audio/mp3" /></audio>
<divclass="lrc">
   <ul id="ullrc">
      </ul>
</div>
</div>
</div>

<style>
#bfqbg {margin: 520px 10px;
width:1164px;
height: 120px;
z-index: 20;
border-radius:2px;
position: relative;overflow: hidden;
z-index: 123;
}
#tp{position:absolute;height:106px;width:106px;bottom:8px; left:8px;}
#tp img{height: 100%;width: 100%;}
#dt{position: absolute;bottom:35px; left:70%;width: 200px;height: 50px;opacity: .8;}
#dt img{height: 100%;width: 100%;}
audio {position:absolute;top:80px;left:75px;z-index: 50;
width: 90%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}

audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}

audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}

#bt{ width: 500px; height: 50px;color: #ffffff; position: absolute; left:120px;top:10px;font-size: 16px; font-family:仿宋;z-index: 21;}

</style>
<style type="text/css">
.lrc{z-index: 20;
width: 80%;bottom:-18px; left:15%;
height: 100px;
overflow: hidden;
display: block;position: absolute;
margin: 0 auto;}
.lrc #ullrc{
width: 700px;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{ filter: drop-shadow( 2px 2px 0px #000000);
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: 35px;
color: #ffffff;}
</style>
<script >
var lrc = `孙艺琪 - 歌名歌（DJ何鹏版）
作词：崔伟立
作曲：崔伟立
(未经许可,不得翻唱或使用)
秋意浓
甜蜜蜜
粉红色回忆
小城故事
月光光
偏偏喜欢你
忘忧草
忘情水
讲不出再见
光辉岁月
一路上有你
千纸鹤
孤星泪
千年等一回
红豆
花心
喜欢你
亲亲我的宝贝
女人花
上海滩
男儿当自强
吻别
流年
大约在冬季
一生爱你千百回
让我欢喜让我忧
相思风雨中
不浪漫罪名
海阔天空
风飞沙
何日君再来
铁血丹心
漫步人生路
一场游戏一场梦
人生何处不相逢
别怕我伤心
冷雨夜
过火
千千阙歌
舞女泪
难得有情人
哭砂
听海
心碎了无痕
千纸鹤
孤星泪
千年等一回
红豆
花心
喜欢你
亲亲我的宝贝
女人花
上海滩
男儿当自强
吻别
流年
大约在冬季
一生爱你千百回
让我欢喜让我忧
相思风雨中
不浪漫罪名
海阔天空
风飞沙
何日君再来
铁血丹心
漫步人生路
一场游戏一场梦
人生何处不相逢
别怕我伤心
冷雨夜
过火
千千阙歌
舞女泪
难得有情人
哭砂
听海
心碎了无痕
一生爱你千百回
让我欢喜让我忧
相思风雨中
不浪漫罪名
海阔天空
风飞沙
何日君再来
铁血丹心
漫步人生路
一场游戏一场梦
人生何处不相逢
别怕我伤心
冷雨夜
过火
千千阙歌
舞女泪
难得有情人
哭砂
听海
心碎了无痕
哭砂
听海
心碎了无痕

`;
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;
</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 image0 = document.getElementById("testImg");
var image= document.getElementById("Img");
let mState = () => aud.paused ? (image.stop(),image0.classList.add('stop')):(image.play(),image0.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

红影发表于 2024-7-10 21:14

这歌曲有意思，歌词就是歌名的串联，居然连起那么多歌名呢{:4_204:}

红影发表于 2024-7-10 21:18

其中有几句还是粤语唱的，有意思。
这制作也很漂亮，轮播的图片和浪漫的夜景背景，衬着好听的歌曲。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-7-10 22:31

歌词还有粤语调的{:4_173:}

小辣椒 发表于 2024-7-10 22:31

欣赏亚伦精彩的制作{:4_187:}

小辣椒 发表于 2024-7-10 22:33

亚伦这个播放器用喇叭来控制停止不错{:4_199:}

老谟深虑 发表于 2024-7-11 18:09

欣赏老师佳作！这首歌听有意思。

页: [1]

花潮论坛's Archiver

孙艺琪 - 歌名歌（DJ何鹏版）