错过的风景 midi sing
本帖最后由 亚伦影音工作室 于 2024-5-21 23:15 编辑 <br /><br /><style>#papa { margin:00px 0 20px calc(50% - 600px); width: 1164px; height: 640px; background:#000; box-shadow: 3px 3px 6px gray; position: relative; overflow: hidden;}
#vid {
position: absolute;
width: 100%;
height: 100%;transform:translate(-180px,0px)scale(1);
opacity: 1;
object-fit: cover;
pointer-events: none;
bottom:0px;
clip-path:circle(30% at 50%50%);}
#dt { position: absolute; width: 60%; height: 60%; z-index: 9;bottom:-30px; }
#pinpu { position: absolute; width: 100%; height: 100%; z-index: 9; top:550px;left:30px;}
#bfqbj{margin: 50% 740px;width: 320px;height: 200px;position: absolute;background:url(https://pic.imgdb.cn/item/66457360d9c307b7e9ffe724.png)no-repeat 0px 10px/320px 50px;}
#prog {position: absolute;z-index: 91;
width: 300px;
height: 3px;
cursor: pointer;
top:10px;
left:0px;background:#F1612A linear-gradient(to right,#F1612A, #F1612Avar(--prg), white 0);
color: #ffffff;
--prg: 0%; --state: paused;}
#prog::before, #prog::after { position: absolute; }
#prog::before { content: attr(data-cu); left:0px; top: -20px; }
#prog::after { right: 0px; content: attr(data-du); ; top: -20px; }
#mplayer {z-index: 80;position:absolute;top:16px;left:140px;width:30px;height:30px;cursor: pointer;filter:hue-rotate(60deg)contrast(180%)brightness(300%);}
#lb{ position: absolute;top: 22px;right:35px; width: 20px; height: 18px; }
#lb img{ width: 100%; height: 100%; opacity: 1; }
@keyframes rot { to { transform: rotate(1turn); } }
.lrc{position: absolute;z-index: 90;
width: 960px;
height: 500px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
overflow: hidden;
display: block;
margin: 60px 400px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 50px;
line-height: 50px;
font-family:悟空大字库;
font-size: 22px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
color: #ffffff;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 30px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
font-weight: normal;
</style>
<div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ddd59619b3ada751400731db8cce5368_preview.mp4" autoplay loop muted></video>
<div id="dt"> <img id="dtImg" src="https://vvlk.oss-cn-hangzhou.aliyuncs.com/0002.gif" alt="" /></div>
<div id="pinpu"> <img id="pinpuImg" src="https://pic.imgdb.cn/item/664cb7f4d9c307b7e9e9b116.gif" alt="" /></div>
<audio id="aud" src="https://songs.boonkiong.com/245138110.mp3" autoplay loop></audio>
<div id="bfqbj">
<div data-cu="00:00" data-du="00:00" id="prog" title="调节进度" style="--state: running; --prg: 48.40552205703211%;"></div>
<div ><img id="mplayer" src="https://638183.freep.cn/638183/t23/btn/play2.png" alt="" /></div>
<div id="lb"> <img id="lbImg" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" alt="" /></div>
</div>
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
<script>
aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
/*暂停 播放按钮*/
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
img.onclick = function() {
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
}
aud.addEventListener("play", function (e) {
img.src="https://638183.freep.cn/638183/t23/btn/pause2.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="https://638183.freep.cn/638183/t23/btn/play2.png";
}, false);})();
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
prog.dataset.cu = toMin(aud.currentTime);
prog.dataset.du = toMin(aud.duration);
});
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
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;
};
/*结束*/
/*控制视频/喇叭*/
var vid=document.querySelector('#vid');
var imagelb= document.getElementById("lbImg");
var imagedt= document.getElementById("dtImg");
var imagepinpu= document.getElementById("pinpuImg");
mplayer.onclick =function() { aud.paused ?(aud.play() ,vid.play(),imagelb.play(),imagedt.play(),imagepinpu.play()): (aud.pause(),vid.pause(),imagelb.stop(),imagedt.stop(),imagepinpu.stop())};
/*结束*/
/*以下是控制动图的插件*/
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
imagelb.style.opacity = ''; imagedt.style.opacity = '';imagepinpu.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
</script>
<script >
var lrc = `错过的风景
词：midi sing
曲：midi sing
CARO 苏艾：
等风将我吹散
掠过黄昏到天边
枯黄的树透着寒
月光薄凉而冷淡
云朵又如何期盼
话说的很明显
沉溺的人听不见
就像靠岸的帆船
停留在原地打转
惊扰了鸟群往返
我在意躲雨的瞬间不是那雨天
我在意你一句晚安并不是抱歉
错过的风景离我有多远
我早有预感却不能幸免
我在意黄昏散去了并不是时间
我在意阳光会走还是停留窗边
落叶的春意写尽了别离
没想到剧情却又重演
话说的很明显
沉溺的人听不见
就像靠岸的帆船
停留在原地打转
惊扰了鸟群往返
我在意躲雨的瞬间不是那雨天
我在意你一句晚安并不是抱歉
错过的风景离我有多远
我早有预感却不能幸免
我在意黄昏散去了并不是时间
我在意阳光会走还是停留窗边
落叶的春意写尽了别离
没想到剧情却又重演`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 50, lrc_ul_height = 450;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script > 漂亮的多行歌词和背景制作。欣赏亚伦老师好帖{:4_199:} 欣赏亚伦的精彩制作{:4_187:} 欣赏老师的精美制作，上午好！
清纯的小姑娘真可爱。 https://file.uhsea.com/2405/780845869733c71339c24bceb5b27559MX.gif
页:
[1]