三合一HTML5音画《姑娘在远方（DJ名龙版）》
本帖最后由 亚伦影音工作室 于 2023-4-3 15:20 编辑 <br /><br /><style>#papa {
margin: 10px -300px;
width: 1164px;
height: 620px;
background: #000000 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2854ca0097c8c12dbfdcabdb2efa2cd5.jpg') center/cover no-repeat;overflow: hidden;
position: relative;
z-index: 12345;
--state: paused;
}
#dt{position: absolute;top:0%; left:0%;z-index: 2;
width:1164px;mix-blend-mode:overlay;
height:620px; transition: .3s all ease;/*一定要加上不然看着突兀*/}
#mplayer {
position: absolute;z-index: 12;
left: calc(50% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid #000000;
border-radius: 50%;
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: #000000;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent #000000;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
#vid { display: none; }
#canv {
position: absolute;
display: block;
top:0%; left:0%;
border-radius: 0%;
opacity: 1;
}
</style>
<div id="papa">
<div id='dt'><img id="testImg" src="https://pic.imgdb.cn/item/64292622a682492fcc27e64e.gif" width="100%" height="100%"></div>
<canvas id="canv"></canvas>
<divid="testBtn"><div id="mplayer" data-tt="HCPlayer 00:00 00:00"></div></div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music267542033.mp3" autoplay loop></audio>
<video id="vid" src="https://www.kumeiwp.com/sub/filestores/2023/03/22/4b0fcfbe0ec608d3128235d5c58b6412.mp4" loop autoplay muted></video>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = 1164, hh = canv.height =620;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 6) min = '0' + min;if (sec < 6) sec = '0' + sec;return min + ':' + sec;};
let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'),vid.pause()) : (papa.style.setProperty('--state', 'running'),vid.play());
vid.playbackRate = 0.5;
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('timeupdate', () => mplayer.dataset.tt = '\n\n' + toMin(aud.duration) + '\n' + toMin(aud.currentTime));
</script>
<style type="text/css">#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文隶书;
color: #000078;
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: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
姑娘在远方（DJ名龙版） - 柯柯柯啊
词：柯柯柯啊
曲：柯柯柯啊
编曲：王灏
可能我总不会忘
爱来爱去哭一场
失去原本模样
可是我总不会忘
爱来爱去空一场
消失人海茫茫
疯狂的发挥想象
书写着我的过往
伤痕被当作勋章
疯狂的奔向夕阳
乌云会消散离场
枯萎的花又绽放
回家探探 儿时的 那位姑娘
是否也像我一样远离了家乡
外面的世界充满虚伪和张扬
此刻的她 会不会偏离正确的方向
回家探探 曾经的 那位姑娘
是否也像我一样为生活奔忙
过去的所有充满期待和向往
此刻的她 会不会坚持曾经的理想
可能我总不会忘
爱来爱去哭一场
失去原本模样
可是我总不会忘
爱来爱去空一场
消失人海茫茫
疯狂的发挥想象
书写着我的过往
伤痕被当作勋章
疯狂的奔向夕阳
乌云会消散离场
枯萎的花又绽放
回家探探 儿时的 那位姑娘
是否也像我一样远离了家乡
外面的世界充满虚伪和张扬
此刻的她 会不会偏离正确的方向
回家探探 曾经的 那位姑娘
是否也像我一样为生活奔忙
过去的所有充满 期待和向往
此刻的她 会不会坚持曾经的理想
`;
/*变量 ：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'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = '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); /*获得歌词数组*/
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</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 = '';
}
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("testImg"),
button = document.getElementById("testBtn");
if (image && button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script>
本帖最后由 亚伦影音工作室 于 2023-4-2 15:09 编辑
动图 视频 音乐三合一组合成HTML5可控音画，操作简单，画面精美！动图可有背景也可是透明的 ，当然你不喜欢不加；视频可不用，但主框架要加一个静态图片；改编代码里z-index: XXX，可单独使用。
看起来亚伦很喜欢黑黑老师这个可以控制视频的小播，现在每天玩个了小播了{:4_170:} 视频背景截的可以的，虽然短一点，动画效果出来了{:4_199:} 欣赏亚伦的精彩制作{:4_199:} 小辣椒 发表于 2023-4-2 15:57
欣赏亚伦的精彩制作
谢谢老师点评！ 亚伦影音工作室 发表于 2023-4-2 16:39
谢谢老师点评！
哇塞~~~千万别叫老师，小辣椒就可以了{:4_189:} 欣赏美贴 真漂亮的播放器，欣赏问好！{:4_187:} 我点这个按钮咋没有反应。。。 漂亮，的确是都可控的。欣赏亚伦老师好帖{:4_187:} 欣赏精彩的东东，点赞。
页:
[1]