学习代码音画《唐装》

老谟深虑 发表于 2023-11-6 19:08

本帖最后由老谟深虑于 2023-11-6 19:08 编辑 <br /><br /><div style="z-index: 127;width: 1024px; height: 600px; margin-top:50px; margin-left:-210px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:linear-gradient(180deg, rgba(255, 224, 0, 0.45) 0%,rgba(5, 246, 93, 0.41) 25%,rgba(1, 50, 251, 0.29) 47%,rgba(243, 5, 5, 0.45) 85%),url(http://pan.yinhuabbs.cn/view.php/883f85a5032a200d025bcc5fe828ecab.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1024%2ch_600)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;">

<div class="bg">
<div id="aplay">
<img class="cb-slideshow" src="https://pic.imgdb.cn/item/65482f3ec458853aef531307.jpg" style="width: 1024px;height: 600px;transform:scale(0.1,1);Filter:grayscale(100%);" />
<img class="cb-slideshow" src="https://pic.imgdb.cn/item/65482f55c458853aef533326.jpg"/>
<img class="cb-slideshow" src="https://pic.imgdb.cn/item/65482f79c458853aef53641e.jpg"/>
<img class="cb-slideshow" src="https://pic.imgdb.cn/item/65482f8cc458853aef537f7d.jpg" />
<img class="cb-slideshow" src="https://pic.imgdb.cn/item/65482fb8c458853aef53bd2c.jpg"/>
   <img class="cb-slideshow" src="https://pic.imgdb.cn/item/65482fccc458853aef53db54.jpg"/>
   <img class="cb-slideshow" src="https://z1.ax1x.com/2023/11/06/pilKO3j.jpg"/>
<img class="cb-slideshow" src="https://z1.ax1x.com/2023/11/06/pilKLCQ.jpg"/>
</div></div>
<div class="BJ">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.kumeiwp.com/sub/filestores/2023/11/06/f779ec27eab5b429ff999859805b286c.mp3&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3" controls loop style="width: 1%;
height: 1%;z-index: 1;"></audio>
   <div class="btn">
   <img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-35px;left:835px;width:150px;height:150px;z-index: 600;"/>
   </div>

<div class="items" >
<divclass="lrc">
   <ul id="ullrc">
      </ul>
   </div>
</div></div>
<style type="text/css">
.bg {
width: 1024px;
height: 600px;
position: absolute;
top: 0px;
left: 0px;overflow: hidden;
}
.cb-slideshow img{
width: 1024px;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
z-index: 100;
animation: imageAnimation 32s infinite;
}

.cb-slideshow#aplay{}

.cb-slideshow :nth-child(8){

animation-delay: 28s
}

.cb-slideshow :nth-child(7){

animation-delay: 24s;
}

.cb-slideshow :nth-child(6){

animation-delay: 20s;
}

.cb-slideshow:nth-child(5) {

animation-delay: 16s
}

.cb-slideshow :nth-child(4){

animation-delay: 12s;
}
.cb-slideshow :nth-child(3){

animation-delay: 8s;
}
.cb-slideshow :nth-child(2){

animation-delay: 4s;
}
#aplay.cb-slideshow :nth-child(1){

animation-delay: 0s;
}

@keyframes imageAnimation {0% {
opacity: 1;transform: scale(0,1);Filter:grayscale(100%);}
5% {
opacity: 1;
transform: scale(1,1);Filter:grayscale(100%);}
15% {
opacity: 1;
transform: scale(1,1);Filter:grayscale(0%);}
18% {
opacity: 0;
transform: skewX(0deg)scale(3,3);Filter:grayscale(0%);}
}
</style>
<style type="text/css">
.BJ{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:0px;z-index: 100;
}
#MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.btn{
display: block;z-index: 300;
margin: 0;
}
.lrc{
width: 960px;
height: 180px;z-index: 1;
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:-70px; left:0px;
margin: 0 auto;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 90px;
font-family:悟空大字库;
font-size: 30px;
color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
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: 40px;
color: #ff0000;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: bold;
}

.audio{
z-index: 1;
bottom: 0;
opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
opacity: 0;
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {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%);}}
</style>
<script >var lrc = `唐装 - 嘟比Dubi/柳为/CC酱
词：李晓明
曲：CC酱
LRC：老谟深虑
女：
驼铃还在茶马古道摇晃梦想
岁月如水在微凉丝绸上流淌
一池春水倒映你的模样
只手绣出半个盛唐
暮色凉十里烟波我轻推朱窗
雁过城楼城楼外竹笛正悠扬
剪一缕霓裳心事在指间泛黄
长安城遇见你
和那摇曳的月光
男：
灯火阑珊风吹柳絮
我回眸把你寻觅几番愁绪
一盏残酒昨梦依稀
三两行离人诗句
女：
一眸一笑绣出你的美
我轻舞罗裳好想再爱一回
流苏上的尘缘谁在追
有思念作祟把爱化成泪
合：
一念一嗔化作春江水
我轻抚瑶琴把你细细描绘
多想和你一起蝶双飞
乘春光妩媚让爱永相随
女：
暮色凉十里烟波我轻推朱窗
雁过城楼城楼外竹笛正悠扬
剪一缕霓裳心事在指间泛黄
长安城遇见你
和那摇曳的月光
男：
灯火阑珊风吹柳絮
我回眸把你寻觅几番愁绪
一盏残酒昨梦依稀
三两行离人诗句
女：
一眸一笑绣出你的美
我轻舞罗裳好想再爱一回
流苏上的尘缘谁在追
有思念作祟把爱化成泪
合：
一念一嗔化作春江水
我轻抚瑶琴把你细细描绘
多想和你一起蝶双飞
乘春光妩媚让爱
女：
月下独徘徊
唯美了谁的裙摆
试着把记忆打开
却在衣袖上留白
人去花还在
总让人无声感慨
月色酿出了旧爱
却又消失在城外
月下独徘徊
唯美了谁的裙摆
试着把记忆打开
却在衣袖上留白
人去花还在
总让人无声感慨
月色酿出了旧爱
却又消失在城外
永相随
`;
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 = 80, lrc_ul_height = 90;
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 = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
   var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
}, false);
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="cb-slideshow ";};my_audio.onpause = function(){document.getElementById("aplay").className="";};
</script>

老谟深虑 发表于 2023-11-6 19:14

请问各位老师，这是我学习老师的代码，为什么播放器开关不转？还有我这个代码音画发表在《离退休论坛》上就不显示同步歌词？谢谢老师！

红影发表于 2023-11-6 19:28

我这里都正常啊，播放器是转的，而且可以一键全控。不过一键全控是用的固定页面展示，不是播放的随时暂停。{:4_204:}

红影发表于 2023-11-6 19:30

我好像是评分后按钮能正常转动，刷新后又不能转了呢{:4_173:}

老谟深虑 发表于 2023-11-6 19:32

红影发表于 2023-11-6 19:30
我好像是评分后按钮能正常转动，刷新后又不能转了呢

请老师帮我找原因。

樵歌发表于 2023-11-6 20:44

手艺不错哈。{:4_431:}

红影发表于 2023-11-6 21:21

老谟深虑发表于 2023-11-6 19:32
请老师帮我找原因。

这个我也看不懂啊，不好意思{:4_204:}

小辣椒 发表于 2023-11-6 22:15

这个是套用亚伦的代码吗？

小辣椒 发表于 2023-11-6 22:18

看了一下好像不全是亚伦的代码，但现在可以一键停止的，就亚伦老师才可以找出原因的，你艾特亚伦老师看看吧

老谟深虑 发表于 2023-11-7 09:43

樵歌发表于 2023-11-6 20:44
手艺不错哈。

谢谢老师鼓励，上午好！

老谟深虑 发表于 2023-11-7 09:45

小辣椒发表于 2023-11-6 22:15
这个是套用亚伦的代码吗？

是的，我是不会做代码的，只能套用学习。

小辣椒 发表于 2023-11-7 20:30

老谟深虑发表于 2023-11-7 09:45
是的，我是不会做代码的，只能套用学习。
套用多了，后面自己会修改的，一步步来，不急的，玩的开心就好

老谟深虑 发表于 2023-11-8 19:10

小辣椒发表于 2023-11-7 20:30
套用多了，后面自己会修改的，一步步来，不急的，玩的开心就好
再次感谢老师！

小辣椒 发表于 2023-11-8 21:08

老谟深虑发表于 2023-11-8 19:10
再次感谢老师！

不客气的，大家一起学习

起个网名好难 发表于 2023-11-17 16:47

老谟深虑发表于 2023-11-17 15:17
编辑支持

这个编辑连接只有你自己能用

页: [1]

花潮论坛's Archiver

学习代码音画《唐装》