戏梦
本帖最后由 zlpi@163.com 于 2024-10-27 21:43 编辑 <br /><br /><style>#mydiv {
margin: 0 0 0 calc(50% - 781px);
width: 1500px;
height: 700px;
background: url('http://www.bohann.net/data/attachment/forum/202402/29/181212ig6hmhqmhqx4jegh.jpg');
box-shadow: 0 0 0px 0 #ccc;
display: grid;
place-items: center;
position: relative;
}
#lrc {
position: absolute;
width: fit-content;
height: fit-content;
top: 92%;
left: 30%;
font: bold 2.5em Sans-serif;
color: #0000FF;
text-shadow: 1px 1px 2px #000;
white-space: pre;
display: inherit;
place-items: inherit;
user-select: none;
--state: paused; --motion: cover2; --tt: 2s;
}
#lrc::before, #lrc::after { position: absolute; content: ''; cursor: pointer; }
#lrc::before {
content: attr(data-lrc);
width: 100%;
height: 100%;
white-space: pre;
width: 0;
left: 0;
color: #ccffff;
overflow: hidden;
animation: var(--motion) var(--tt) linear forwards var(--state);
}
#lrc::after {
width: 50px;
height: 50px;
bottom: -50px;
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<div id="lrc" data-lrc="人这一生啊(DJ 默涵版)">人这一生啊(DJ 默涵版)</div>
</div>
<audio id="aud" src="https://shanlr.s3-us-east-1.ossfiles.com/1/1.mp3"loop="loop" autoplay="autoplay" crossOrigin="anonymous"></audio>
<canvas id='canvas' width="1200" height="240"style="position: absolute; left:100px; top: 410px;"></canvas>
<script>
/* * */
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
window.onload = function() {
var audio = document.getElementById('audio');
var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var audioSrc = ctx.createMediaElementSource(aud);
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var canvas = document.getElementById('canvas'),
cwidth = canvas.width,
cheight = canvas.height - 2.2,
meterWidth = 10, //width of the meters in the spectrum
gap = 2.2, //gap between meters
capHeight = 2.2,
capStyle = '#fff',
meterNum = 1200 / (10 + 2.2), //count of the meters
capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 22, 0, 300);
gradient.addColorStop(1, '#0f0');
gradient.addColorStop(0.4, '#ff0');
gradient.addColorStop(0, '#f00');
// loop
function renderFrame() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var step = Math.round(array.length / meterNum); //sample limited data from the total array
ctx.clearRect(0, 0, cwidth, cheight);
for (var i = 0; i < meterNum; i++) {
var value = array;
if (capYPositionArray.length < Math.round(meterNum)) {
capYPositionArray.push(value);
};
ctx.fillStyle = capStyle;
//draw the cap, with transition effect
if (value < capYPositionArray) {
ctx.fillRect(i * 12, cheight - (--capYPositionArray), meterWidth, capHeight);
} else {
ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
capYPositionArray = value;
};
ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
}
requestAnimationFrame(renderFrame);
}
renderFrame();
audio.play();
};
</script>
<script>
(function() {
let mKey = 0, mFlag = true, slip = 0;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', () => calcKey());
lrc.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！
页:
[1]
2