《我想去吹吹旷野的风》演唱：朴惠子 （感谢亚伦老师代码）
本帖最后由 亦是金 于 2025-5-18 17:17 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2296868">
<style>
#bj{
position: relative;
width: 1286px;
height: 720px;
MARGIN-LEFT:-310px;
margin-top:100px;;
overflow:hidden;
background:#337700 url()no-repeat center / cover;
border-radius: 22px;
border: thick double#88abfa;
--state:paused;
}
#papa{
position: absolute;
width: 100%;
height: 100%;
MARGIN-LEFT:0px;
margin-top:0px;
background:#500000 url(https://img.51miz.com/preview/photo/00/01/56/45/P-1564564-27EFAF1D.jpg)no-repeat center / cover;
opacity: .6;
}
/*频谱*/
#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: 100%;
opacity:0;
animation: round 88s linear infinite var(--state);
height: 100%;
}
#tu img{
width: 95%;
-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(0)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">
<div id="papa"></div>
<div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOqLUH.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOqO5d.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOqqVe.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOq7DO.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOqjPA.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOLpKf.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOqx2t.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOqv8I.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOqzxP.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOL9r8.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/12/03/HOqHbD.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.ananas.chaoxing.com/sv-w8/audio/ff/27/77/e79cc877262bc0239bf6f60babdf365f/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:-700px;LEFT: -250px;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:-735px;LEFT: 150px;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: 760px;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:26px;">亦是金在线音乐</span></span></span></p></div>
<script>
let lrc = ` 《我想去吹吹旷野的风》
词曲：KP MUSIC
编曲：CH
演唱：朴惠子
歌词编辑：亦是金
。。。。。。
每天在高楼林立的城市中
有多久没有抬头看过天空
穿梭在车水马龙的人群中
每个人都是行色匆匆
努力的奔波忙碌不敢放松
只为了心中还未完成的梦
如果说生命还可以重新启程
我不会选择无动于衷
我想去吹吹来自旷野的风
做一场沉睡已久自由的梦
看看那山间的月落日的红
心里的呐喊留在山谷之中
我想去吹吹来自旷野的风
不在乎下一步要何去何从
哪怕我所有遗憾终会落空
也要笑的从容
。。。。。。
努力的奔波忙碌不敢放松
只为了心中还未完成的梦
如果说生命还可以重新启程
我不会选择无动于衷
我想去吹吹来自旷野的风
做一场沉睡已久自由的梦
看看那山间的月落日的红
心里的呐喊留在山谷之中
我想去吹吹来自旷野的风
不在乎下一步要何去何从
哪怕我所有遗憾终会落空
也要笑的从容
我想去吹吹来自旷野的风
做一场沉睡已久自由的梦
看看那山间的月落日的红
心里的呐喊留在山谷之中
我想去吹吹来自旷野的风
不在乎下一步要何去何从
哪怕我所有遗憾终会落空
也要笑的从容
-- 谢谢欣赏 --
`;
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);
</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>
这播放器做得磁漂亮了！ 樵歌 发表于 2025-5-3 07:50
这播放器做得磁漂亮了！
问好樵歌管理！谢谢欣赏点赞！{:4_190:} 漂亮的频谱和图片轮播，背景还是外滩呢。{:4_187:}
轮播图图也很清新漂亮，所有动态能一键全控。
欣赏亦是金老师好帖{:4_199:} 红影 发表于 2025-5-3 09:17
漂亮的频谱和图片轮播，背景还是外滩呢。
问好红影！背景是你生活的大上海，请有空吹吹旷野的风！{:4_187:} 红影 发表于 2025-5-3 09:17
轮播图图也很清新漂亮，所有动态能一键全控。
欣赏亦是金老师好帖
谢谢欣赏点赞！{:4_204:} 亦是金 发表于 2025-5-3 09:44
问好红影！背景是你生活的大上海，请有空吹吹旷野的风！
五一节不能去，我看申共社上说，这几天那边人流爆满呢{:4_173:} 亦是金 发表于 2025-5-3 09:45
谢谢欣赏点赞！
问好亦是金老师，再赏好帖{:4_199:} 红影 发表于 2025-5-3 10:53
五一节不能去，我看申共社上说，这几天那边人流爆满呢
是的，五一节长假各景点人流爆满。平时有空出去走走吹吹风！{:4_204:} 红影 发表于 2025-5-3 10:53
问好亦是金老师，再赏好帖
谢谢，问好！{:4_187:} 欣赏老师的佳作，点赞！
老谟深虑 发表于 2025-5-3 11:30
欣赏老师的佳作，点赞！
问好老谟深虑老师！谢谢欣赏点赞！{:4_190:} 亦是金 发表于 2025-5-3 11:08
是的，五一节长假各景点人流爆满。平时有空出去走走吹吹风！
嗯嗯，这是必须的，享受大自然的洗礼{:4_187:} 亦是金 发表于 2025-5-3 11:08
谢谢，问好！
不客气啊，问好亦是金老师{:4_187:} 欣赏老师佳作，问好！{:4_199:}
页:
[1]