李代沫 - 我最亲爱的 (《宅女侦探桂香》电影主题曲)
<style>#papa { margin: 120px 0 20px calc(50% - 619px);
width: 1039px;
height: 655px;
background:#000000 ;
no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;}
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%; opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#ff00ff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#ff00ff 90%,black 1%);}
#t{position: absolute;top:0px; left:0px;width: px; height: px;z-index:4;mix-blend-mode:lighten;}
#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:75.3%; left:46.1%;
bottom: 5px;
width: 30px;
height: 30px;
border: 0px solid #cccccc;
border-radius: 0%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #ffffff;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0px;
height: 0px;
left: 38px;
border-width: 12px 15px;
border-color: transparent transparent transparent #ffffff;
opacity: var(--disp1);
}
#mplayer::after {
width: 5px;
height: 24px;
left: 32px;
border-width: 0 8px 0 8px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: normal 10px sans-serif;
color: #ffffff;
top:91%;
left:43%;}
#prog {position: absolute;z-index: 91;
width: 17.1%;
height: 0.3%;
cursor: pointer;
top:94%;
color: #ffffff
box-shadow: 0px 0px 0.1px 0.1px #000000;
left:41.2%;
border-radius: 2px;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bt{ --w: 0%; width: var(--w); overflow: hidden; color: #0129a5; position: absolute; left:23%;top:87%;font-size: 15px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<div id="papa">
<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt">李代沫 - 我最亲爱的</div>
<div id="t"><img id="tu" src="" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://wj.zp68.com/lxx/yunhua/2024/04/27/77.gif" width="100%" height="100%"></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
<div id="wzsd1"><ul id="ullrc">
</ul>
</div>
</div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/04/27/001.mp3" loop autoplay></audio>
<style type="text/css">
.lrc{z-index: 20;
width: 100%;
height: 120px;
overflow: hidden;filter:drop-shadow(#cccccc 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#cccccc -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:57%; left:25.5%;z-index: 5;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 24px;
color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `我最亲爱的 - 李代沫
词：林夕 曲：Russell Harris
宅女侦探桂香-电影主题曲
很想知道你近况
我听人说
还不如你对我讲
经过那段遗憾
请你放心
我变得更加坚强
世界不管怎样荒凉
爱过你就不怕孤单
我最亲爱的
你过的怎么样
没我的日子
你别来无恙
依然亲爱的
我没让你失望
让我亲一亲
像过去一样
我想你一定喜欢
现在的我
学会了你最爱的开朗
想起你的模样
有什么错
还不能够被原谅
世界不管怎样荒凉
爱过你就不怕孤单
我最亲爱的
你过的怎么样
没我的日子
你别来无恙
依然亲爱的
我没让你失望
让我亲一亲
像朋友一样
。。。。。。
虽然离开了你的时间
比一起还漫长
我们总能补偿
因为中间空白的时光
如果还能分享
也是一种浪漫
关系虽然不再一样
关心却怎么能说断就断
我最亲爱的
你过的怎么样
没我的日子
你别来无恙
依然亲爱的
我没让你失望
让我亲一亲
像亲人一样
我最亲爱的
你过的怎么样
没我的日子
你别来无恙
依然亲爱的
我没让你失望
让我亲一亲
像过去一样
。。。。。。
`;
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 = 70, lrc_ul_height = 60;
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;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
fs = !fs;
};
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg,#ffffff,#ffffff, #ffffff ' + aud.currentTime / aud.duration * 100 + '%, #999999 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
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;
};
/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';image1.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;
}
}
};
}
var image= document.getElementById("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script> 重现2016.05.13 的swf效果，应该swf效果完美，可以欣赏一个专辑，而且这个播放器每一首歌曲一个mv背景，只是现在源码也是打开不全，我瞎捣鼓一个出来算了，回忆一下自己以前的东西。。。。
2016年的音乐 2016年做的歌词同步和背景图{:4_173:}，都直接用以前的了
第一次听这首歌曲，欣赏了。 歌手~李代沫曾经参加中国好声音，我也是特别喜欢他的歌，但后来出了事后就没有消息了 愤怒的葡萄 发表于 2024-4-27 16:11
第一次听这首歌曲，欣赏了。
问好葡萄，这首歌曲是《宅女侦探桂香》电影主题曲) 小辣椒朋友下午好！我没看过《宅女侦探桂香》这部电影，但听到你贴出的这支电影插曲，觉得很好听。谢谢，分享了。 梦油 发表于 2024-4-27 16:16
小辣椒朋友下午好！我没看过《宅女侦探桂香》这部电影，但听到你贴出的这支电影插曲，觉得很好听。谢谢，分 ...
梦油好，这电影我也是没有看过的，这是这个中国好声音才认识了这个歌手的 小辣椒 发表于 2024-4-27 16:18
梦油好，这电影我也是没有看过的，这是这个中国好声音才认识了这个歌手的
慧眼识珠，你选取的这支歌真好听。 我手机看不到，但我感觉肯定很好！ 小辣椒 发表于 2024-4-27 16:14
问好葡萄，这首歌曲是《宅女侦探桂香》电影主题曲)
我现在不太看电影了，孤陋寡闻了，很少去电影院了。 亚伦影音工作室 发表于 2024-4-27 16:58
我手机看不到，但我感觉肯定很好！
我现在就手机，可以看见，也是可以听到，师父N年不玩电脑了，全部手机欣赏我的东西的，这个可以看见的。 梦油 发表于 2024-4-27 16:51
慧眼识珠，你选取的这支歌真好听。
梦油，曾经我追过这个歌星。。。{:4_170:} 本帖最后由 亚伦影音工作室 于 2024-4-27 17:32 编辑
小辣椒 发表于 2024-4-27 17:29
我现在就手机，可以看见，也是可以听到，师父N年不玩电脑了，全部手机欣赏我的东西的，这个可以看见的。
现在看到了。很漂亮！这个频谱播放器动了脑筋了！ 亚伦影音工作室 发表于 2024-4-27 17:30
现在看到了。很漂亮！
仿这些swf播放器主要是现在想可以手机欣赏，也是一种怀旧吧，谢谢亚伦欣赏，都是用你那一键停止代码自己瞎捣鼓的 小辣椒 发表于 2024-4-27 16:11
重现2016.05.13 的swf效果，应该swf效果完美，可以欣赏一个专辑，而且这个播放器每一首歌曲一个mv背景，只 ...
太好了这个效果。。动感十足。。{:4_204:} 很有趣的制作，歌曲好像熟悉。 南无月 发表于 2024-4-27 17:36
太好了这个效果。。动感十足。。
月月好，怀旧一下，玩玩以前的swf效果，现在的swf我统统看不见了，以前的心血花太多了，统统没有了。。。 小辣椒 发表于 2024-4-27 17:39
月月好，怀旧一下，玩玩以前的swf效果，现在的swf我统统看不见了，以前的心血花太多了，统统没有了。。。
之前的SWF真是精彩极了。
现在还有一些人在用这个做特效音画。不过我怎么下都看不到效果。
你这个整成动图，也是一种变通方式。
非常精彩的。。 南无月 发表于 2024-4-27 17:41
之前的SWF真是精彩极了。
现在还有一些人在用这个做特效音画。不过我怎么下都看不到效果。
你这个整成 ...
动图很简单，代码播放器才是最重要的 精彩的swf播放器效果，有这么多的频谱效果，很赞！欣赏学习了！{:4_187:}