陈瑞-柔情似水【音画模块】,单图音画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

亚伦影音工作室 发表于 2025-2-6 18:29:36

陈瑞-柔情似水【音画模块】

本帖最后由亚伦影音工作室于 2025-2-8 16:51 编辑 <br /><br /><style>
#papa {margin: 10px -220px;
width: 1286px;
height: 740px;
background:url(https://pic1.imgdb.cn/item/66a34f6ed9c307b7e9581634.jpg)no-repeat center/cover;
position: relative;overflow: hidden;
z-index: 12345;}
#bofangqi{left: 1%; bottom:10px; width:98%;position: absolute; height:74px; border-radius:10px; box-shadow: 0px 0px 0px 0.25px #fff;overflow: hidden; align-items: center; background:url(https://pic1.imgdb.cn/item/66bdf24ed9c307b7e9883039.png) no-repeat center/cover;}
.progress {display: flex;align-items: center; z-index: 8;
   justify-content: space-between;width: 86%;
   position: absolute;bottom: 20px;
left: 0%;height:30px;
}

.progress-bar {
   position:relative;
   width: 75%;
   height: 3px;
   background-color: #fff;
left: 10%;border-radius: 20px;
   cursor: pointer;
}

.now {
   position: absolute;
   left: 0%;
   display: inline-block;
   height: 3px;border-radius: 20px;
   width: 75%;
   background: #F96565;
}

.now::after {
   content: '';
   position: absolute;
   left: 100%;
   width: 8px;margin: -2px -2px;
   height: 8px;border-radius: 50px;
   background-color: #F96565;
}
.start{color: #fff; font: 400 14px sans-serif;position: absolute;
   left: 5%; }
.end{color: #fff; font: 400 14px sans-serif;position: absolute;
   right: 10%;}

#yinkong{left: 78%;bottom:16px;width: 18%;height: 40px;position:absolute; overflow: hidden;background:url(https://pic1.imgdb.cn/item/66bdf24ed9c307b7e9883039.png) no-repeat center/cover;border-radius: 8px;box-shadow: 0px 0px 0px 0.25px #fff; align-items: center;z-index: 9;}
#lb{margin: 10px 10px ; width: 20px; height: 20px; position: absolute; cursor: pointer; }
#cndpt{position: absolute; width: 20px; height: 20px;
opacity:1; }
#enopg{ position: absolute;width: 20px; height: 20px;
opacity:0; }

#auVol {position: relative;
width:80%;
margin: 18px 38px;
height:3px;
border:1px solid;
background:#ccc linear-gradient(90deg, #F96565, #F96565) no-repeat;
cursor:pointer;
border-radius: 20px;
}

#bnt{left: 5px;bottom: 10px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
   width:25px;
   height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
clip-path: polygon(75% 50%, 0 0, 0 100%);
   width:25px;
   height: 25px;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px; bottom:22px; cursor: pointer;right:1%;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 16;left: 50%;bottom: 120px;transform: translate(-50%);font:300 3.5em/1em 华文隶书; color: #000080;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);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;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }

</style>
<div id="papa" title="亚伦音画模块" >
<div data-lrc="陈瑞-柔情似水" id="lrc" title="陈瑞-柔情似水">陈瑞-柔情似水</div>
<div id="bofangqi">
<div class="progress" >
   <span class="end">00:00</span>

   <div class="progress-bar"title="快进/快退">
   <div class="now"></div>
   </div>
<span class="start">00:00</span>
</div>

<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="yinkong" title="音量调节">
<div id="lb" title="静音模式">
<div id="cndpt"><svg width="20" height="20" viewBox="0 0 24 20">
   <path fill="#fff" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" />
   </svg></div>
<div id="enopg" ><svgwidth="20" height="20" viewBox="0 0 24 20">
   <path fill="#fff" fill-rule="evenodd" d="M0 7.667v8h5.333L12 22.333V1L5.333 7.667" />
   </svg></div>
</div>
<div id="auVol"></div>
</div>
</div>
</div>

<audio id="aud" class="audio" src="https://img2.oldkids.cn/upload/2024/12/26/blog_260848378_20241226233630705.mp3" autoplay loop></audio>

<script >
const audio = document.getElementById('aud')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
const progressBar = document.querySelector('.progress-bar')
const now = document.querySelector('.now')

function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}

progressBar.addEventListener('click', function (event) {
let coordStart = this.getBoundingClientRect().left
let coordEnd = event.pageX
let p = (coordEnd - coordStart) / this.offsetWidth
now.style.width = p.toFixed(3) * 100 + '%'

aud.currentTime = p * aud.duration
aud.play()
})

setInterval(() => {
start.innerHTML = conversion(aud.currentTime)
now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)

bnt.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1') : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0');

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

let fs= true;
fullscreen.onclick = () => {
   fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
   fs = !fs;
}
</script >
<script>
var auVol = document.getElementById('auVol'); //音量模拟条标识
var aud = document.getElementById('aud'); //audio元素标识
var canDo = false; //拖动布尔标识
auVol.style.backgroundSize = aud.volume *80 + "%"; //音量条初始状态
auVol.onmousemove = function(){ //音量控制
if(canDo) { // 如果鼠标已经按下
let w = offset(auVol,"left");
let x = (event.clientX - w) * 100 / this.clientWidth;
this.style.backgroundSize = x + "%";
//console.log(x);
aud.volume = x / 100;

}
}
//几个鼠标动作事件：控制 canDu 布尔值
auVol.onmousedown = function(){ canDo = true; }
auVol.onmouseout = function(){ canDo = false; }
auVol.onmouseup = function(){ canDo = false; }

function offset(obj,direction){//位移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}

lb.onclick = () => aud.paused ? (aud.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',auVol.style.backgroundSize = aud.volume *80 + "%") : (aud.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',auVol.style.backgroundSize = aud.volume *0 + "%");
</script>

<script >
(function() {
/*lrc*/
let lrcStr = `陈瑞-柔情似水
词曲：张宏顺
演唱：陈瑞
编曲：李杨
和声：南妮
☆★Lrc编辑梅竹★☆
☆★协编蓝菊★☆
亚伦影音工作室
我的心就像一杯清清水
融进对你的思念我已陶醉
是谁的无所谓
散发出浓浓的香味
上演了真爱退去虚伪
轻轻的斟满这杯情浓的水
把我的温柔我的感情贴近你的嘴
让它流到你心扉不要让它伤悲
它会化成泪在你眼睛一去不回
我的柔情似水淹没你无路可退
我的柔情似水百转千回
我的柔情似水已将你重重包围
我的柔情似水红尘路上只要你陪
(Music)
轻轻的斟满这杯情浓的水
把我的温柔我的感情贴近你的嘴
让它流到你心扉不要让它伤悲
它会化成泪在你眼睛一去不回
我的柔情似水淹没你无路可退
我的柔情似水百转千回
我的柔情似水已将你重重包围
我的柔情似水红尘路上只要你陪
我的柔情似水淹没你无路可退
我的柔情似水百转千回
我的柔情似水已将你重重包围
我的柔情似水红尘路上只要你陪
我的心就象一杯清清的水
(Music)
☆★梅竹谢谢欣赏☆★☆
=End=
`;
/* mKey - mFlag ùaverAdd */
let mKey = 0, mFlag = true, averAdd = 0.3;

/* */
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;
};

/* lrc n*3 */
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 showLrc = (time) => {
   let name = mFlag ? 'cover1' : 'cover2';
   lrc.innerHTML = lrcAr;
   lrc.dataset.lrc = lrcAr;
   lrc.style.setProperty('--motion', name);
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
   mKey += 1;
   mFlag = !mFlag;
};

/*mKey*/
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 = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/**/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
aud.addEventListener('pause', () => mState());/**/
aud.addEventListener('play', () => mState());/**/
aud.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(lrcStr); /**/
})();
</script>

醉美水芙蓉 发表于 2025-2-6 20:50:04

欣赏亚伦老师精彩音画！

醉美水芙蓉 发表于 2025-2-6 20:52:01

这播放器做得精致, 点赞,上茶,祝好.

醉美水芙蓉 发表于 2025-2-6 20:52:22

精彩的播放器制作,画画很美,曲调旋律优美,美了醉了.......

klxf 发表于 2025-2-7 11:51:39

本帖最后由 klxf 于 2025-2-7 13:33 编辑

功能齐全，切换顺畅，简约实用，超级模块，为亚伦老师再创新高点赞:)

klxf 发表于 2025-2-7 13:42:24

为亚伦老师点赞！此模块作为歌曲播放器很是完美:)

若能加入视频、动图并一键可控，作为音画贴模版更完美:)

快播发表于 2025-2-14 22:36:08

这个好好支持一下

页: [1]

纳兰音画网's Archiver

陈瑞-柔情似水【音画模块】