《要山要海要自由》演唱 : 乔浚丞
本帖最后由 亦是金 于 2025-11-23 10:21 编辑 <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: 70%;
opacity:0;
animation: round 88s 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(11) {animation-delay: 80s;}
#tu:nth-child(10) {animation-delay: 72s;}
#tu:nth-child(9) {animation-delay: 64s;}
#tu:nth-child(8) {animation-delay: 56s;}
#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: 80px;
height: 80px;
cursor: pointer;
animation: rotating 6s infinite linear var(--state);
margin: -90px 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/vcg/video/preview/51miz42N1281527463.mp4" loop muted autoplay=""></video>
<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/12/79/V-127936-7871EE24.mp4" loop muted autoplay=""></video>
<div>
<div id="tu"><imgsrc="https://i.ibb.co/GQHSV3nw/270070589-1625105560626.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/LdmK30yx/270070506-1625105527646.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/LhCg2KGj/270070476-1625105497883.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/vCmm6Jfy/270070426-1625105464643.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/qM2DCJG9/270070416-1625105548232.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/QjpMwBsm/270070414-1625105486890.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/kVNQ58Sw/270070412-1625105457245.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/5xXYWZ1j/270070396-1625105481463.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/PScSGg7/270070198-1625105517152.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/0jwb2Lfr/270070696-1625105626392.jpg" alt=""></div>
<div id="tu"><imgsrc="https://i.ibb.co/B5TbKVqt/270070197-1625105470376.jpg" alt=""></div>
</div>
<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://www.emojiall.com/images/60/huawei/1f338.png" 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/b9/f9/32/21ead209d8a742e24d49f3998d4d792b/audio.mp3" 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: 360px;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:700px;"> 制作很漂亮，欣赏亦是金老师好帖{:4_199:} 这个怎么标题字和里面的歌曲不一样啊{:4_173:} 红影 发表于 2025-5-10 15:11
制作很漂亮，欣赏亦是金老师好帖
问好红影！谢谢欣赏!{:4_187:} 红影 发表于 2025-5-10 15:11
这个怎么标题字和里面的歌曲不一样啊
哈哈哈，老糊涂了！{:4_170:} 欣赏了 感谢佳作分享 前辈发帖代码有错误，论坛下面有变形 这个估计是结束码错误，记得上次有一次我修改后乱套了，前辈自己琢磨修改吧{:4_189:}
居中和上下高度，黑黑有代码的
#papa { margin: 130px 0 30px calc(50% - 681px); width: 1200px; height: 700px; background: lightblue url('图片连接');
欣赏前辈好精彩的制作{:4_199:} 世外桃源 发表于 2025-5-10 20:38
欣赏了
问好！谢谢欣赏！{:4_190:} 世外桃源 发表于 2025-5-10 20:38
欣赏了
祝欣赏愉快！{:4_176:} 小辣椒 发表于 2025-5-10 21:50
前辈发帖代码有错误，论坛下面有变形
问好！我这里没有看到变形！{:4_203:} 小辣椒 发表于 2025-5-10 21:59
居中和上下高度，黑黑有代码的
#papa { margin: 130px 0 30px calc(50% - 681px); width: 1200px; heigh ...
我有空去试试！谢谢告知！{:4_187:} 小辣椒 发表于 2025-5-10 22:00
欣赏前辈好精彩的制作
谢谢欣赏！{:4_187:} 亦是金 发表于 2025-5-10 16:49
问好红影！谢谢欣赏!
客气了，这制作很漂亮{:4_187:} 亦是金 发表于 2025-5-10 16:50
哈哈哈，老糊涂了！
忘记修改了吧，看到亦是金老师改好了呢{:4_187:} 制作很漂亮{:4_178:} 亦是金 发表于 2025-5-10 22:46
问好！我这里没有看到变形！
下面加分栏有变形
页:
[1]
2