好啊，只是带有频谱的帖子直接代码发，比如音乐、频谱效果就没有了。晚安~
哦，这样啊，主要这种类型的制作我没有做过，特别加这么多视频的，手机一般看不见效果，我很少玩的 小辣椒 发表于 2025-5-5 14:32
哦，这样啊，主要这种类型的制作我没有做过，特别加这么多视频的，手机一般看不见效果，我很少玩的
你可以制作一个呀，也挺好玩的{:4_187:} 本帖最后由 杨帆 于 2025-5-5 15:44 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【古风纯音】荷塘翠叶连</title>
</head>
<body>
<style>
#papa {
margin: 100px 0 30px calc(50% - 781px);
width: 1400px;
height: 760px;
background: url('https://file.uhsea.com/2505/4c3e7e98a61eabfb21ce40b1a7fbf629EN.jpg') no-repeat center/cover;
mix-blend-mode: darken;
pointer-events: none;
overflow: hidden;
position: relative;
z-index:1;
}
#vid1{
position: absolute;
top:0px;
left:0%;
width: 100%;
height:100%;
mix-blend-mode: multiply;
opacity: 0.9;
object-fit: cover;
}
#vid2 {
position: absolute;
width: 100%;
height:100%;
object-fit:fill;
mix-blend-mode: screen;
-webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
pointer-events: none;
}
#vid3{
position: absolute;
width: 100%;
height:100%;
object-fit:fill;
opacity: 0.6;
mix-blend-mode: screen;
-webkit-mask: linear-gradient(to top, red 0%, transparent 60%, transparent);
pointer-events: none;
}
#player {
position: absolute;
top:30px;
left:30px;
width: 120px;
height: 120px;
cursor: pointer;
pointer-events: auto;
border-radius: 50%;
opacity: .8;
animation: rot 8s linear infinite var( --state) ;
--state: running;
}
#player:hover { filter: hue-rotate(90deg); }
@keyframes rot { to { transform: rotate(360deg); } }
#canv {display: block; position: absolute;width:100%; height: 180px; bottom: 0px; left: 0px;z-index:4; animation: sp 1s linear infinite;}
@keyframes sp {
0% { filter:hue-rotate(360deg)contrast(150%)brightness(80%); }
}
</style>
<div id="papa">
<canvas id='canv' width="1286" height="250"></canvas>
<video id="vid1" src="https://imgpp.ztupic.com/u/30j5Llsx4y/1599104785483_4d8b815a.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/09/02/16/60c9bc9e86513.mp4" autoplay loop muted></video>
<video id="vid3" src="https://www.kumeiwp.com/wj/221936/2024/07/29/7ee5fcee53685d8b7a583442b043e12a.mp4" autoplay loop muted></video>
<audio id="aud" src="https://file.uhsea.com/2505/21e473e6011149edfaf0294b620d78a5HI.mp3" autoplay loop></audio>
<img id="player" alt="" src="https://pic1.imgdb.cn/item/67e576870ba3d5a1d7e569a8.png" title="播放/暂停" />
</div>
<script>
player.onclick = () => {
aud.paused ? (aud.play(),vid1.play() ,vid2.play(),vid3.play()) : (aud.pause(),vid1.pause() , vid2.pause(), vid3.pause());
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
(function () {
let Act = new AudioContext();
let audSrc = Act.createMediaElementSource(aud);
let analyser = Act.createAnalyser();
audSrc.connect(analyser);
analyser.connect(Act.destination);
let ctx = canv.getContext('2d');
let width = canv.width;
let height = canv.height;
let ppColor = ctx.createLinearGradient(250,200,250,0);
ppColor.addColorStop(0.8, '#fff000');
ppColor.addColorStop(1, '#00ff00');
ppColor.addColorStop(0.8, '#fff000');
let ppNum = 1286;
let voiceHeight = new Uint8Array(analyser.frequencyBinCount);
(function draw() {
analyser.getByteFrequencyData(voiceHeight);
let step = Math.round(voiceHeight.length / ppNum);
ctx.clearRect(0, 0, width, height);
for (let j = 0; j < ppNum; j++) {
let audiheighteight = voiceHeight;
ctx.fillStyle = ppColor;
ctx.fillRect(width / 2+ (j * 1), height, 2, -audiheighteight);
ctx.fillRect(width / 2- (j * 1), height, 2, -audiheighteight);
}
window.requestAnimationFrame(draw);
})();
})();
</script>
</body>
</html>
杨帆 发表于 2025-5-4 22:56
浏览器原因？就是一个网页链接呀
用的百分浏览器，换了系统自带的也不行了
页:
1
[2]