送小辣椒参考音画【音频常规播放器新尝试】
本帖最后由 亚伦影音工作室 于 2023-9-9 17:57 编辑 <br /><br /><style>#papa {margin: 0px 0 0 calc(50% - 681px); width: 1164px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;place-items: center;background: #333 url('https://xlaj.cn/assets/file/zp/20230908105521.jpg') no-repeat center/cover; position: relative;z-index: 12345;}
#tu{position: absolute;top:0%; left:0%;z-index: 2;
width: 100%;background:url('https://xlaj.cn/assets/file/zp/20230908105601.jpg') no-repeat center/cover;
height: 100%;animation: round 4s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(360deg);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:2;mix-blend-mode:lighten;}
#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 50%;top:78%;transform: translate(-50%); font:normal 3.2em 华文新魏; color:#0000;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); z-index: 5; place-items: center; overflow: hidden; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; place-items: center;}
@keyframes cover1{0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(150%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
#mplayer { position: absolute; left: 0%;top:88%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%)}
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id='tu'></div>
<div id='dt' ><img id="testImg" src="https://pic.imgdb.cn/item/642a50c2a682492fccd831a0.gif" width="100%" height="100%"></div>
<span id="fullscreen">全屏观赏</span>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="bnt"><div id="mplayer"><audiostyle="width:100%;" id="aud" controls="controls" autoplay="autoplay" loop="loop" src= "https://www.qqmc.com/mp3/music291513405.mp3" type="audio/mpeg"></audio></div></div>
</div>
<script>
(function() {
let mKey = 0, mFlag = true;
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;};
let averAdd = 0, offset = 0;
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 geci = `穿过满天的繁星 - 云汐
词：碳基生物
曲：碳基生物
编曲：苏珂
和声编唱：七叶草
混音/母带：李欣懋（Wuli包子）
混音助理：刘明
艺人统筹：庐阳
制作统筹：祁言
监制：何湲
出品：飞行工作室
词曲提供：词曲家
发行：亚伦影音
无尽夜空缓缓被点亮
皎洁月光温暖着目光
我们享受时光的漫长
一切不再那么慌张
微风吹散所有的悲伤
就让我一直陪在你身旁
看世间万物安静的生长
我会陪着你遥望
我和你越过漫天繁星看山川潮汐
无数光影给我指引
迎着风跟随流星轨迹等夜色降临
耀眼光芒落入你眼睛
我和你抓住一缕微风换无边梦境
沉睡其中不愿苏醒
想要送你夏天的风 再一路随行
世间万物的温柔都不及你
微风吹散所有的悲伤
就让我一直陪在你身旁
看世间万物安静的生长
我会陪着你遥望
我和你越过漫天繁星看山川潮汐
无数光影给我指引
迎着风跟随流星轨迹等夜色降临
耀眼光芒落入你眼睛
我和你抓住一缕微风换无边梦境
沉睡其中不愿苏醒
想要送你夏天的风 再一路随行
世间万物的温柔都不及你
我和你越过漫天繁星看山川潮汐
无数光影给我指引
迎着风跟随流星轨迹等夜色降临
耀眼光芒落入你眼睛
我和你抓住一缕微风换无边梦境
沉睡其中不愿苏醒
想要送你夏天的风 再一路随行
世间万物的温柔都不及你
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.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 = '';
}
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");
varbutton = document.getElementById("bnt");
let mState = () => aud.paused ? image.stop() : image.play();
bnt.onclick = () => {aud.paused ? aud.play() : aud.pause();}
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
</script> 这个和小辣椒那个是一样的底图呢。欣赏亚伦老师好帖，@小辣椒收礼开心{:4_187:} 红影 发表于 2023-9-9 13:31
这个和小辣椒那个是一样的底图呢。欣赏亚伦老师好帖，@小辣椒收礼开心
代码增加了可控动图，小辣椒可以参考一下控制那个狐狸！ 亚伦影音工作室 发表于 2023-9-9 13:35
代码增加了可控动图，小辣椒可以参考一下控制那个狐狸！
原来是为了做这个，亚伦老师真是热心，很赞{:4_199:} 红影 发表于 2023-9-9 13:31
这个和小辣椒那个是一样的底图呢。欣赏亚伦老师好帖，@小辣椒收礼开心
来了，看见了亲爱的的艾特 亚伦影音工作室 发表于 2023-9-9 13:35
代码增加了可控动图，小辣椒可以参考一下控制那个狐狸！
好的，谢谢亚伦，我去试试 亚伦我电脑初步测试了一下，加小狐狸图控制可以的，但粒子效果没有了。 谢谢亚伦，现在我得下了，晚上再测试一下 小辣椒 发表于 2023-9-9 16:29
来了，看见了亲爱的的艾特
亚伦老师帮你试了动图暂停的方法呢{:4_187:} 红影 发表于 2023-9-10 07:39
亚伦老师帮你试了动图暂停的方法呢
亲爱的，我昨天晚上自己测试没有成功的，刚才上来看见亚伦添加效果成功了 小辣椒 发表于 2023-9-10 13:06
亲爱的，我昨天晚上自己测试没有成功的，刚才上来看见亚伦添加效果成功了
这样可以相互学习了，真好{:4_187:}
页:
[1]