红唇
<style>/* 帖子外层 */
.outer {
left: -214px; /* 水平定位*/
width: 1024px; /* 帖子宽度 */
height: 577px; /* 帖子高度 */
background: #ccc url('https://s1.ax1x.com/2022/06/19/XjgWWV.jpg') no-repeat; /* 帖子背景 */
box-shadow: 0 4px 18px #000; /* 盒子阴影*/
position: relative; /* 重要 帖子定位依赖 */
}
/* 歌词同步显示框 */
.lrcbox {
transform: translate(20px, 20px); /* 定位 */
font: bold 1em sans-serif; /* 文本 */
color: #fff; /* 字体颜色 */
text-shadow: 1px 1px 2px #000; /* 文本阴影 */
background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
border-radius: 100% 0; /* 盒子边框 */
cursor: pointer; /* 手型指针 */
position: absolute; /* 关键 歌词显示框依赖于此 */
}
</style>
<div class="outer">
<div class="lrcbox">
<p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=152569133&.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//盒子句柄
let lrcbox = document.querySelector('.lrcbox'),
geci = document.querySelector('#geci'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
//歌词数组
let lrcAr =[
['0.30','王峰、安静 - 红唇 (男女对唱版)'],
['4.67','作词：十二月'],
['6.06','作曲：陈伟'],
['7.20','编曲：孙侠'],
['8.48','录音：王小雨'],
['9.99','混音：小多'],
['11.35','音乐制作人：陈伟'],
['13.53','发行公司：壹歌传媒'],
['15.99','出品人：王峰'],
['17.60','演唱：王峰、安静'],
['19.75','LRC编辑：醉美水芙蓉 '],
['27.78','男：'],
['28.69','你用思念涂成一抹红'],
['33.37','女：'],
['34.98','让我跌进胭脂色的梦'],
['41.38','情有多浓'],
['43.57','男：'],
['44.55','心就有多痛'],
['47.26','女：'],
['47.96','最怕这样突然的重逢'],
['52.81','男：'],
['54.29','风把回忆摇落一地红'],
['59.13','女：'],
['60.62','我已不再为谁而心动'],
['67.17','烟花春雨'],
['69.37','男：'],
['70.34','都藏在心中'],
['73.58','那是一生不能说的痛'],
['77.86','女：'],
['78.93','就像秋夜里最后的红枫'],
['84.87','男：'],
['85.62','你用唇印将往事尘封'],
['91.70','红唇微启泪光闪动'],
['96.76','女：'],
['98.27','忘了这场短暂的相逢'],
['104.42','就像记忆里最后的红枫'],
['109.84','男：'],
['111.08','层层叠叠染红了天空'],
['117.31','红尘相送胭脂消融'],
['122.96','合：'],
['123.96','我们从此山水不相逢'],
['152.72','男：'],
['153.39','风把回忆摇落一地红'],
['158.94','女：'],
['159.84','我已不再为谁而心动'],
['166.15','烟花春雨'],
['168.76','男：'],
['169.63','都藏在心中'],
['172.80','那是一生不能说的痛'],
['177.54','女：'],
['178.35','就像秋夜里最后的红枫'],
['183.67','男：'],
['184.61','你用唇印将往事尘封'],
['190.96','红唇微启泪光闪动'],
['196.77','女：'],
['197.57','忘了这场短暂的相逢'],
['203.62','就像记忆里最后的红枫'],
['209.20','男：'],
['210.30','层层叠叠染红了天空'],
['216.47','红尘相送胭脂消融'],
['222.14','合：'],
['223.20','我们从此山水不相逢'],
['228.40','女：'],
['229.49','就像秋夜里最后的红枫'],
['234.66','男：'],
['235.72','你用唇印将往事尘封'],
['242.09','红唇微启泪光闪动'],
['247.77','女：'],
['248.84','忘了这场短暂的相逢'],
['254.85','就像记忆里最后的红枫'],
['260.80','男：'],
['261.63','层层叠叠染红了天空'],
['267.81','红尘相送胭脂消融'],
['273.44','合：'],
['274.38','我们从此山水不相逢']
];
//歌词框单击事件
lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
//audio进度监听事件
aud.addEventListener('timeupdate', () => {
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
geci.innerHTML = lrcAr;
}
}
})
</script>
亦真亦幻的效果，非常漂亮，歌也好听 马黑黑 发表于 2022-6-19 22:53
亦真亦幻的效果，非常漂亮，歌也好听
主要是测试老师的播放器和lrc编辑程序！老师辛苦了！ 醉美水芙蓉 发表于 2022-6-20 06:40
主要是测试老师的播放器和lrc编辑程序！老师辛苦了！
你测试也辛苦哈{:4_190:} {:4_187:}早上好 这小绿叶的歌词同步跟背景十分相称，水芙蓉的制作太美了{:4_187:} 画面里的美女好美。那一圈圈的是石磨么？咋那么多，带着古朴的韵味{:4_204:} 做得好漂亮。{:4_204:} 辫子哥哥 发表于 2022-6-20 07:36
早上好
辫子版主下午好！ 红影 发表于 2022-6-20 08:54
这小绿叶的歌词同步跟背景十分相称，水芙蓉的制作太美了
谢谢红影美女精彩点评！ 樵歌 发表于 2022-6-20 11:31
做得好漂亮。
谢谢樵歌精彩点评！ 醉美水芙蓉 发表于 2022-6-20 11:36
谢谢樵歌精彩点评！
你太客气了，据说，太客气的人要长胖的{:4_189:} 樵歌 发表于 2022-6-20 12:10
你太客气了，据说，太客气的人要长胖的
胡说，是谦虚使人发胖，客气让人慌张。 醉美水芙蓉 发表于 2022-6-20 11:35
谢谢红影美女精彩点评！
水芙蓉兰心蕙质，很赞{:4_187:} 马黑黑 发表于 2022-6-20 13:12
胡说，是谦虚使人发胖，客气让人慌张。
明明客气和谦虚兄弟俩好不{:4_189:} 樵歌 发表于 2022-6-21 20:33
明明客气和谦虚兄弟俩好不
师兄弟，但各司其职 马黑黑 发表于 2022-6-21 20:35
师兄弟，但各司其职
兄弟同心，其利断金，知道不 樵歌 发表于 2022-6-23 12:19
兄弟同心，其利断金，知道不
心同意同，职责不同 马黑黑 发表于 2022-6-23 12:20
心同意同，职责不同
这还差不多{:4_190:}
页:
[1]