论坛 › 欢乐水吧 › 音乐控制软翻页效果【2】有同步歌词

亚伦影音工作室 发表于 2024-3-5 19:28

音乐控制软翻页效果【2】有同步歌词

本帖最后由 亚伦影音工作室 于 2024-7-10 18:39 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background:#000000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a5c0fba99074e4a1f3e4089238c0777e.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:140px;margin-left: -300px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;z-index: 123456;}
#mplayer { width: 120px;
    height: 120px;
    position: absolute;z-index: 50;
   left: 30px;
    top: 480px;
background:url(https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png)no-repeat center/cover;
    cursor: pointer;
    animation: rot 5s linear infinite ;
}
@keyframes rot { to { transform: rotate(360deg); } }
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:55%;top:60px; transform: translate(-50%, 0px)skew(0deg);font:normal 2.5em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%); filter: drop-shadow( 2px 2px 0px #ffffff);z-index: 2; writing-mode: vertical-rl;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 40%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#E00000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);writing-mode: vertical-rl; }
@keyframes cover1{0% { width: 100%;letter-spacing: 20px; height: 0;} to { width: 100%;height: 200%;transform: skew(140deg);} }
@keyframes cover2 {0% { width: 100%;letter-spacing: 20px; height: 0; }100% { width: 100%; height: 200%; transform: skew(140deg)} }
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 200%;z-index:3;mix-blend-mode:lighten;}

.book {position: relative;top: -310px;left:165px;
perspective: 800px;
perspective-origin: center 50px;
transform: rotate(20deg)scale(1.6);
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
}

.page {
width: 210px;
height: 300px;
background-color: #bbb;
position: absolute;
top: 0px;
right: 50%;
transform-origin: 100% 100%;
border: solid #555 0.1px;
background-size: 420px 300px;
background-position: center;transform-style: preserve-3d;
}
.page:nth-child(1) {
transform: rotateX(60deg) rotateY(3deg);
}
.page:nth-child(2) {
transform: rotateX(60deg) rotateY(4.5deg);
}
.page:nth-child(3) {
transform: rotateX(60deg) rotateY(6deg);
animation: nextPage 25s infinite -24s steps(1);
background-size: 420px 300px;
background-position: -2px -2px;
}
.stop .page:nth-child(3){animation-play-state: paused;}
.page:nth-child(4) {transform: rotateX(60deg) rotateY(177deg);}
.page:nth-child(5) {transform: rotateX(60deg) rotateY(175.5deg);}
.page:nth-child(6) {transform: rotateX(60deg) rotateY(174deg);overflow: hidden;}
.page:nth-child(6)::after {
content: '';
width: 210px;
height: 300px;
position: absolute;
top: 0px;
right: 0%;
transform-origin: center;
transform: rotateY(180deg);
animation: nextPage 25s -20s infinite steps(1);
background-size: 420px 300px;
background-position: 100% -2px;
}
.stop .page:nth-child(6)::after{animation-play-state: paused;}

@keyframes nextPage {
0% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
}
20% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
}
40% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
}
60% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
}
80% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
}
}
.gap {
width: 10px;
height: 300px;
background: none;
transform: rotateX(60deg);
transform-origin: bottom;
position: absolute;
top: 0px;
left: calc(50% - 5px);
}
.gap::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
background-color: #555;
width: 10px;
height: 5px;
border-radius: 50%;
}
.pages, .flips {
transform-style: preserve-3d;
}
.flip {
width: 32px;
height: 300px;
position: absolute;
top: 0px;
transform-origin: 100% 100%;
right: 100%;
border: solid #555;
border-width: 2px 0px;
perspective: 4200px;
perspective-origin: center;
transform-style: preserve-3d;
background-size: 420px 300px;
}
.flip::after {
content: '';
position: absolute;
top: 0px;
right: 0%;
width: 100%;
height: 100%;
transform-origin: center;
background-size: 420px 300px;
}
.flip.flip1 {
right: 50%;
animation: flip1 5s infinite ease-in-out;
border-width: 1px 1px 1px 0;
}
.stop .flip.flip1{animation-play-state: paused;}

.flip.flip1::after {animation: nextFlip1 25s -20s infinite steps(1);}
.stop .flip.flip1::after{animation-play-state: paused;}
.flip:not(.flip1) {
right: calc(100% - 2px);
top: -2px;
transform-origin: right;
animation: flip2 5s ease-in-out infinite;
}

.stop .flip:not(.flip1){animation-play-state: paused;}
.flip.flip2::after {
animation: nextFlip2 25s -20s infinite steps(1);
}
.stop .flip.flip2::after{animation-play-state: paused;}
.flip.flip3::after {
animation: nextFlip3 25s -20s infinite steps(1);
}
.stop .flip.flip3::after{animation-play-state: paused;}
.flip.flip4::after {
animation: nextFlip4 25s -20s infinite steps(1);
}
.stop .flip.flip4::after{animation-play-state: paused;}
.flip.flip5::after {
animation: nextFlip5 25s -20s infinite steps(1);
}
.stop .flip.flip5::after{animation-play-state: paused;}
.flip.flip6::after {
animation: nextFlip6 25s -20s infinite steps(1);
}
.stop .flip.flip6::after{animation-play-state: paused;}
.flip.flip7::after {
animation: nextFlip7 25s -20s infinite steps(1);
}
.stop .flip.flip7::after{animation-play-state: paused;}
.flip.flip7 {
width: 30px;
border-width: 2px 0px 2px 2px;
}

@keyframes flip1 {
0%, 20% {transform: rotateX(60deg) rotateY(6deg);}
80%, 100% {transform: rotateX(60deg) rotateY(174deg);}
}

@keyframes flip2 {
0%, 20% {transform: rotateY(0deg) translateY(0px);}
50% {transform: rotateY(-15deg) translateY(0px);}
}

@keyframes nextFlip1 {
0% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -178px -2px;
   transform: rotateY(0deg);
}
10% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -210px -2px;
transform: rotateY(180deg);
}
20% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -178px -2px;
   transform: rotateY(0deg);
}
30% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
40% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -178px -2px;
transform: rotateY(0deg);
}
50% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -210px -2px;
    transform: rotateY(180deg);
}
60% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -178px -2px;
transform: rotateY(0deg);
}
70% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -210px -2px;
   transform: rotateY(180deg);
}
80% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -178px -2px;
transform: rotateY(0deg);
}
90% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -210px -2px;
   transform: rotateY(180deg);
}
}

@keyframes nextFlip2 {
0% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -148px -2px;transform: rotateY(0deg);
}
10.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -238px -2px;
   transform: rotateY(180deg);
}
20% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -148px -2px;
transform: rotateY(0deg);
}
30.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -238px -2px;
transform: rotateY(180deg);
}
40% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -148px -2px;
transform: rotateY(0deg);
}
50.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -238px -2px;
transform: rotateY(180deg);
}
60% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -148px -2px;
transform: rotateY(0deg);
}
70.5% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -238px -2px;
   transform: rotateY(180deg);
}
80% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -148px -2px;
transform: rotateY(0deg);
}
90.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -238px -2px;
transform: rotateY(180deg);
}
}

@keyframes nextFlip3 {
0% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -118px -2px;
transform: rotateY(0deg);
}
11% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -268px -2px;

            transform: rotateY(180deg);
}
20% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -118px -2px;
transform: rotateY(0deg);
}
31% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -268px -2px;
transform: rotateY(180deg);
}
40% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -118px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
51% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -268px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
60% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -118px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
71% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -268px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
80% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -118px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
91% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -268px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
}

@keyframes nextFlip4 {
0% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -88px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
11.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -298px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
20% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -88px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
31.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -298px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
40% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -88px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
51.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -298px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
60% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -88px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
71.5% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -298px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
80% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -88px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
91.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -298px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
}

@keyframes nextFlip5 {
0% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -58px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
12% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -328px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
20% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -58px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
32% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -328px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
40% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -58px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
52% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -328px -2px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
60% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -58px -2px;
   transform: rotateY(0deg);
}
72% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -328px -2px;
      transform: rotateY(180deg);
}
80% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -58px -2px;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
92% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -328px -2px;
    transform: rotateY(180deg);
}
}

@keyframes nextFlip6 {
0% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -28px -2px;
   transform: rotateY(0deg);
}
12.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -358px -2px;
   transform: rotateY(180deg);
}
20% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -28px -2px;
   transform: rotateY(0deg);
}
32.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -358px -2px;
      transform: rotateY(180deg);
}
40% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -28px -2px;
      transform: rotateY(0deg);
}
52.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -358px -2px;
      transform: rotateY(180deg);
}
60% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -28px -2px;
      transform: rotateY(0deg);
}
72.5% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -358px -2px;
   transform: rotateY(180deg);
}
80% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -28px -2px;
       transform: rotateY(0deg);
}
92.5% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -358px -2px;
   transform: rotateY(180deg);
}
}

@keyframes nextFlip7 {
0% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -2px -2px;
transform: rotateY(0deg);
}
13% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
20% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg?random=2");
    background-position: -2px -2px;
transform: rotateY(0deg);
}
33% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -388px -2px;
transform: rotateY(180deg);
}
40% {
    background-image: url("https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg?random=3");
    background-position: -2px -2px;
   transform: rotateY(0deg);
}
53% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -388px -2px;
   transform: rotateY(180deg);
}
60% {
    background-image: url("https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg?random=4");
    background-position: -2px -2px;
      transform: rotateY(0deg);
}
73% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -388px -2px;
    transform: rotateY(180deg);
}
80% {
    background-image: url("https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg?random=5");
    background-position: -2px -2px;
transform: rotateY(0deg);
}
93% {
    background-image: url("https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg?random=1");
    background-position: -388px -2px;
transform: rotateY(180deg);
}
}

</style>

<div id="papa">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/64f84335661c6c8e54f84cc0.gif" width="100%" height="100%"></div>
<div class="book" id="testImg">
<div class="gap"></div>
<div class="pages">
<div class="page"></div>

<div class="page"></div>

<div class="page"></div>

<div class="page"></div>

<div class="page"></div>

<div class="page"></div>
</div>

<div class="flips">
<div class="flip flip1">
<div class="flip flip2">
<div class="flip flip3">
<div class="flip flip4">
<div class="flip flip5">
<div class="flip flip6">
<div class="flip flip7">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>
<divid="mplayer" title="暂停/播放"></div>
<audioid="aud" loop >
<source src="https://s2.ananas.chaoxing.com/sv-w9/audio/f5/8e/9a/ac122169e60d01c850f3fad36591bed7/audio.mp3" type="audio/mp3" /></audio>
</div>
<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
var dt = document.getElementById("Img");
mplayer.onclick = () => aud.paused ? (aud.play(),dt.play()): (aud.pause(),dt.stop());
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</script>
<script>
(function() {
        let mKey = 0, mFlag = true;
        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;};
        let averAdd = 0, offset = 0;
        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 geci = `当 - 南北组合
词：琼瑶
曲：庄立帆/郭文宗
当山峰没有棱角的时候
当河水不再流
当时间停住日夜不分
当天地万物化为虚有
我还是不能和你分手
不能和你分手
你的温柔
是我今生最大的守候
当太阳不再上升的时候
当地球不再转动
当春夏秋冬不再变换
当花草树木全部凋残
我还是不能和你分散
不能和你分散
你的笑容
是我今生最大的眷恋
让我们红尘作伴
活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
让我们红尘作伴
活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
当太阳不再上升的时候
当地球不再转动
当春夏秋冬不再变换
当花草树木全部凋残
我还是不能和你分散
不能和你分散
你的笑容
是我今生最大的眷恋
让我们红尘作伴
活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
让我们红尘作伴
活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
       
})();
</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;
            // 透明度还原
            dt.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;
            }
      }
    };
}

</script>

小辣椒 发表于 2024-3-5 19:50

这是二，还有一啊，先去看看和一有什么区别

小辣椒 发表于 2024-3-5 19:54

这个加了歌词同步，亚伦制作太美了{:4_178:}

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

这个翻页效果很美，亚伦我感觉画面在翻页的时候有一抖的瞬间，不过比以前最早是时间短了很多，现在基本看不出了，欣赏亚伦精美的制作{:4_178:}

小辣椒 发表于 2024-3-5 19:57

亚伦越玩越精彩了，继续加油！

亚伦影音工作室 发表于 2024-3-5 20:06

小辣椒 发表于 2024-3-5 19:56
这个翻页效果很美，亚伦我感觉画面在翻页的时候有一抖的瞬间，不过比以前最早是时间短了很多，现在基本看不 ...

还是网络的网速的问题，我的电脑反应很慢！

小辣椒 发表于 2024-3-5 20:10

亚伦影音工作室 发表于 2024-3-5 20:06
还是网络的网速的问题，我的电脑反应很慢！

我不慢，你电脑预览怎么样，我去试一下自己电脑预览

小辣椒 发表于 2024-3-5 20:13

我电脑预览了，和论坛效果一样的，出来速度很流畅的，我的速度杠杠的，这个一抖是瞬间过去的

红影 发表于 2024-3-5 22:59

好漂亮的翻页效果。同步歌词的制作也很奇特。
欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2024-3-6 19:00

          欣赏老师的精美制作，点赞！我想学习老师的代码，可惜到离退休论坛就发表不成功，同步歌词不显示，有时图片也不显示，不知啥原因？

小文 发表于 2024-3-6 19:28

好美

亚伦影音工作室 发表于 2024-3-6 19:30

老谟深虑 发表于 2024-3-6 19:00
欣赏老师的精美制作，点赞！我想学习老师的代码，可惜到离退休论坛就发表不成功，同步歌词不显示 ...

他的编辑器有问题，代码太长不让发表，图片前缀必须有s.有很多问题！所以我去了！

流水光阴 发表于 2024-3-7 11:52

这个可以翻书的，漂亮{:4_199:}

流水光阴 发表于 2024-3-7 11:53

感谢老师分享，歌也是好听{:4_199:}

老谟深虑 发表于 2024-3-7 15:54

本帖最后由 老谟深虑 于 2024-3-8 08:49 编辑

亚伦影音工作室 发表于 2024-3-6 19:30
他的编辑器有问题，代码太长不让发表，图片前缀必须有s.有很多问题！所以我去了！
         谢谢老师的告知，多么希望老师编点那里可以发表的代码呀。

查看完整版本: 音乐控制软翻页效果【2】有同步歌词