《鱼水情歌》陈瑞 / 许强
本帖最后由 亦是金 于 2025-11-23 10:24 编辑 <br /><br /><div style="position: absolute; margin-left: -360px;margin-top: 50px;width:100%;"><style>
#bj{
position: relative;
width: 1286px;
height: 720px;
MARGIN-LEFT:0px;
margin-top:0px;;
overflow:hidden;
background:#337700 url()no-repeat center / cover;
border-radius: 22px;
border: thick double#88abfa;
--state:paused;
}
#vid{
width: 100%;
height: 100%;
position:absolute;
top:0%;
left:0%;
object-fit: cover;
pointer-events: none;
}
#vid1{
width: 100%;
height: 100%;
position:absolute;
top:0%;
left:0%;
pointer-events: none;
mix-blend-mode: screen;
}
/*频谱*/
#canv {
display: block;
position: absolute;
width:100%;
bottom: 0px;
left: 0px;
z-index:4;
animation: sp 1s linear infinite;
}
@keyframes sp {
0% { filter:hue-rotate(360deg)contrast(150%)brightness(80%); }
}
#tu{
position: absolute;
top: 5%;
left: 30%;
width: 0%;//90%
opacity:0;
animation: round 56s linear infinite var(--state);
height: 100%;
}
#tu img{
width: 75%;
-webkit-mask-image: radial-gradient(black 35% ,transparent 75%);
}
@keyframes round{
0%{-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);opacity:0}
5% {-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);opacity:1}
10% {-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);opacity:1}
15% {-webkit-transform:rotate(0deg)scale(2)translate(-50%,50%);opacity:0}
}
#tu:nth-child(7) {animation-delay: 48s;}
#tu:nth-child(6) {animation-delay: 40s;}
#tu:nth-child(5) {animation-delay: 32s;}
#tu:nth-child(4) {animation-delay: 24s;}
#tu:nth-child(3) {animation-delay: 16s;}
#tu:nth-child(2) {animation-delay: 8s;}
#tu:nth-child(1) {animation-delay: 0s;}
#geci{
--motion:cover2;
--tt:2s;
--bg: linear-gradient(40deg, #fa4354, #fa4354, #7718f8, #18f5f8, #f5f818, #f87718) 50%/200px60px;
position:absolute;
left: 50%;
transform: translate(-50%);
top: 75%;
font:300 3.2em 华文隶书;
color:#055306;/*#227700*/
white-space:pre;
-webkit-background-clip:text;
filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);
z-index: 6;
cursor: pointer;
}
#geci::before{
position: absolute;
content: attr(data-geci);
width: 100%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
clip-path: inset(0 100% 0 0);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }
@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#mplayer {
position: absolute;
text-align: center;
top: 97%;
transform: translate(-50%);
left: 50%;
z-index: 60;
color:#ffffff;
}
.hide{display: none;}
#mplayer::before {
position: absolute;
content: attr(data-tt);
left: 0;
bottom: 25px;
width: 100%;
text-align-last: justify;
}
#mprog {
width: 600px;
height: 2px;
accent-color: darkgreen;
outline: none;
cursor: pointer;
}
#btnplay {
position: relative;
width: 130px;
height: 130px;
cursor: pointer;
animation: rotating 6s infinite linear var(--state);
margin: -120px 0px;
border-radius: 50px;
box-shadow:;
}
@keyframes rotating { to { transform: rotate(-360deg); } }
#zs{
border-radius: 4px;
position: relative;
color:#fff;
background:#0000;
box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 18px;
border: none;
cursor: pointer;
margin: 8px 5px;
left: 90%;
}
</style>
<style>
#dhgc{
position:absolute;
width: 500px;
height: 0px;
z-index: 6;
border: 0px solid white;
cursor: pointer;
overflow: hidden;
margin: 42%30%;
}
.lrc {
position:absolute;
width: 100%;
height: 100%;
border: 0px solid white;
margin: 0px 5%;
}
.lrc #ul {
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0
}
.lrc #ul li {
font:300 1.2em 华文新魏;
color: #a6f9f2;
transition: .3s all ease;
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;
height: 50px;
line-height: 35px;
}
.lrc #ulli.active{
font:450 2.6em 华文新魏;
color: #fff000;
text-align: center;
filter:drop-shadow(#000 1px 1px 0px);
}
</style>
<div id="bj">
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/44/V-684432-B1182A44.mp4" loop muted autoplay=""></video>
<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/12/67/V-126724-DC1DE2EF.mp4" loop muted autoplay=""></video>
<div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022892_1528581994260.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022860_1528581996906.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022870_1528581999863.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022912_1528582002467.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022922_1528582007233.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022904_1528582012250.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1806/10/c1/92022932_1528582014346.jpg" alt=""></div>
</div>
<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/42560351f64a44cf923216c086f8efb4~tplv-obj:1200:1200.image?_iz=97245&bid=15&from=post&gid=1761303193538571&lk3s=06827d14&x-expires=1768608000&x-signature=NpLMz7%2Bb9Ujthfm6YtGD9cvs09k%3D" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>
<canvas id='canv' width="1286" height="250"></canvas>
<audio id="audio" src="https://s2.cldisk.com/sv-w8/audio/fe/72/65/f6e7a3084e4b66522ee102fb4eea71ae/audio.mp3?at_=1763787759617&ak_=6de3230d72107abcfdfb96dc27b54617&ad_=1d1c81156496126239fbf084f09697e3" loop autoplay crossOrigin="anonymous"></audio>
<div id="geci"></div>
<div id="dhgc"><div class="lrc" >
<ul id="ul"></ul>
</div>
</div>
<buttonid="zs" onclick="btnClick()"title="点击全屏" >全屏观赏</button>
<div id="全屏"></div><div id="退出" ></div>
</div>
<div style="position: relative;width: 500px;height: 50px;top:-710px;LEFT: 50px;z-index: 88;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#f638ef;"><span style="font-family:微软简中圆;"><span style="font-size:32px;">《 鱼 水 情 歌 》</span></span></span></p></div>
<div style="position: relative;width: 500px;height: 50px;top:-745px;LEFT: 320px;z-index: 99;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#386df6;"><span style="font-family:微软简中圆;"><span style="font-size:20px;"> 演唱 : 陈瑞 / 许强</span></span></span></p></div>
<div style="position: relative;width: 500px;height: 50px;top:-160px;LEFT: 1070px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:28px;">亦是金在线音乐</span></span></span></p></div>
<script>
let lrc = `《鱼水情歌》陈瑞 / 许强
作词 : 绿柳
作曲 : 陈伟
演唱：陈瑞 / 许强
歌词编辑：亦是金
。。。。。。
你曾说我是清澈的湖水
你是水里那条游来游去的鱼
我的生命和你紧连在一起
生生世世也不会分离
我用眼泪酿成了湖水
仿佛真的和你相拥在一起
相偎相依我们共度风雨
点点滴滴都是温馨甜蜜
可如今的我们再难聚
曾经的誓言你怎么可以忘记
我的心里慢慢飘落相思的雨
只有梦里与你共朝夕
可如今的我们再难聚
难道爱情真的是无聊的游戏
我的心里残留下伤痛的记忆
只有化做了那只蝴蝶飞去
。。。。。。
我用眼泪酿成了湖水
仿佛真的和你相拥在一起
相偎相依我们共度风雨
点点滴滴都是温馨甜蜜
可如今的我们再难聚
曾经的誓言你怎么可以忘记
我的心里慢慢飘落相思的雨
只有梦里与你共朝夕
可如今的我们再难相聚
难道爱情真的是无聊的游戏
我的心里残留下伤痛的记忆
只有化做了那只蝴蝶飞去
只有化做了那只蝴蝶飞去
-- 谢谢欣赏 --
`;
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;
function 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));
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
function getLrcAr(str) {
str = str.trim();
let lines = [], lrcAr = [];
let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
if(!str.match(reg)) return;
lines = str.replace(reg,'$1-{}-$2').split('\n');
for(k = 0; k < lines.length; k ++) {
lrcAr = [];
for(j = 0; j < 3; j ++) {
let tmpAr = lines.split('-{}-');
lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
}
}
return lrcTime(lrcAr);
};
function toSecs (lrcTime){
let reg = /\d{2,}/g;
let ar = lrcTime.match(reg);
return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};
function showLrc(time){
let name = mFlag ? 'cover1' : 'cover2';
geci.innerHTML = lrcAr;
geci.dataset.geci = lrcAr;
geci.style.setProperty('--motion', name);
geci.style.setProperty('--tt', time + 's');
geci.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
function myFunction(){
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (audio.currentTime - lrcAr);
showLrc(time);
};
function mylrc() {
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
}
audio.addEventListener('play', playing,false);
audio.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
var mseek = false;
var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),btnplay.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),btnplay.title = '点击暂停' );
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;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = audio.currentTime = mprog.value / mprog.max * audio.duration;
dhgc.onclick =geci.onclick =btnplay.onclick = () => audio.paused ? (audio.play()) : (audio.pause());</script>
<script>
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
audio: document.querySelector("#audio"),
ul: document.querySelector("#ul"),
container: document.querySelector("#geci")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData
}
result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
lrcTimeArr = lrcTime.split(":")
return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
let Time = doms.audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > Time) {
return i - 1;
}
}
}
// 创建歌词列表
function createElements() {
let frag = document.createDocumentFragment(); // 文档片段
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
frag.appendChild(li);
}
doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
let index = getIndex();
// 计算滚动距离
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
if (offset < minOffset) {
offset = minOffset;
};
if (offset > maxOffset) {
offset = maxOffset;
};
// 滚动
doms.ul.style.transform = `translateY(-${offset}px)`;
// 清除之前的active
let li = doms.ul.querySelector(".active")
if (li) {
li.classList.remove("active");
}
// 为当前所唱到的歌词添加active
li = doms.ul.children;
if (li) {
li.classList.add("active");
}
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
cp.onclick =cz.onclick = () => audio.paused ? (audio.play(),vid.play(),vid1.play(),cz.classList.remove('purple')) : (audio.pause(),vid.pause(),vid1.pause(),cz.classList.add('purple'));
</script>
<script>
function btn1() {
document.getElementById('geci').style.display = 'block';
document.getElementById('dhgc').style.display = 'none';
}
function btnClick() {
var zs= document.getElementById("zs");
if (this.isFullscreen()) {
全屏.style.opacity= '1'; 退出.style.opacity = '0';
zs.style.cursor="ne-resize";
exitFullScreen();
} else {
全屏.style.opacity= '0'; 退出.style.opacity = '1';
zs.style.cursor="se-resize";
zs.style.visibility='visible';
if (zs.requestFullscreen) {
bj.requestFullscreen();
} else if (zs.webkitRequestFullScreen) {
zs.webkitRequestFullScreen();
} else if (zs.mozRequestFullScreen) {
bj.mozRequestFullScreen();
} else if ( zs.msRequestFullscreen) {
zs.msRequestFullscreen();
}
}
}
// 退出全屏
function exitFullScreen() {
let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
if (exitFullScreen) {
exitFullScreen.call(document);
}
}
// 判断是否全屏
function isFullscreen() {
return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
}
</script>
<script>
(function () {
let Act = new AudioContext();
let audSrc = Act.createMediaElementSource(audio);
let analyser = Act.createAnalyser();
audSrc.connect(analyser);
analyser.connect(Act.destination);
let ctx = canv.getContext('2d');
let width = canv.width;
let height = canv.height;
let ppColor = ctx.createLinearGradient(250,200,250,0);
ppColor.addColorStop(0.8, '#fff000');
ppColor.addColorStop(1, '#00ff00');
ppColor.addColorStop(0.8, '#fff000');
let ppNum = 1286;
let voiceHeight = new Uint8Array(analyser.frequencyBinCount);
(function draw() {
analyser.getByteFrequencyData(voiceHeight);
let step = Math.round(voiceHeight.length / ppNum);
ctx.clearRect(0, 0, width, height);
for (let j = 0; j < ppNum; j++) {
let audiheighteight = voiceHeight;
ctx.fillStyle = ppColor;
ctx.fillRect(width / 1+ (j * 3), height, 1, -audiheighteight);
ctx.fillRect(width / 1- (j * 3), height, 1, -audiheighteight);
}
window.requestAnimationFrame(draw);
})();
})();
</script>
</td></tr></table>
<div style="height:800px;"> 好漂亮的制作啊，视频里的小美人笑起来真迷人。{:4_187:} 频谱和鱼儿的小播也都很漂亮。就是可惜没法评分，点不动{:4_173:} 老师评分点不动。 画面真漂亮，陈瑞的歌很好听。欣赏问好！{:4_199:} 红影 发表于 2025-11-22 22:57
好漂亮的制作啊，视频里的小美人笑起来真迷人。
问好红影！谢谢欣赏加精！{:4_187:} 红影 发表于 2025-11-22 22:57
频谱和鱼儿的小播也都很漂亮。就是可惜没法评分，点不动
我套用前面发表的《要山要海要自由》演唱 : 乔浚丞 帖子制作的，不知道为什么没法评分，晕！！！{:4_198:} 来欣赏亦是金精品佳作！
视频太棒了！
视频唯美
背景歌声动听
制作大气
音画合一，音乐与画面结合完美
期待亦是金佳作频出！
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢亦是金带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 欣赏前辈精彩的制作，结束码还是以前那个问题，下面网页有点问题 亦是金 发表于 2025-11-23 10:37
我套用前面发表的《要山要海要自由》演唱 : 乔浚丞 帖子制作的，不知道为什么没法评分，晕！！！{:4_198: ...
进去看了看，代码太多了，我也看不出是什么地方的问题{:4_204:}
页:
[1]