红关绿开
本帖最后由 亚伦影音工作室 于 2025-6-21 22:05 编辑 <br /><br /><style type="text/css">#papa{margin: 150px 0 20px calc(50% - 621px); background:#000;width:1050px; height: 300px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1234567; position: relative;}
.chooseBtn {
display: none;
}
.choose-label { top: 10px;
left:90%;
width: 80px;
height: 40px; border: 0px solid #000;
display: inline-block;
border-radius: 20px;
position: relative;
background-color: #800;
overflow: hidden; cursor: pointer;
}
.choose-label:before {
content: '';
position: absolute;
left: 0;
width: 40px;
height: 40px;
display: inline-block;
border-radius: 20px;
background:#555;
z-index: 20;
border: 0px solid #fff;
transition: all 0.5s;
}
.chooseBtn:checked + label.choose-label:before {
left: 40px;
}
.chooseBtn:checked + label.choose-label {
background-color:#00ad43;
}
</style>
<div id="papa">
<input type="checkbox" name="sex" id="male"class="chooseBtn"/>
<label for="male" class="choose-label"></label>
<canvas id='canvas' width="1050" height="280"style="position: relative; left:0px; bottom:0px;z-index: 1; "></canvas>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2c/87/32/ba6553bd63371ae2278151692c413526/audio.mp3" autoplay loop crossOrigin="anonymous"></audio>
</div>
<script >
male.onclick = () => aud.paused ?aud.play():aud.pause();
</script >
<script>
window.onload = function() {
var audio = document.getElementById('audio');
var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var audioSrc = ctx.createMediaElementSource(aud);
// we have to connect the MediaElementSource with the analyser
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
// analyser.fftSize = 1060;
// frequencyBinCount tells you how many values you'll receive from the analyser
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
// we're ready to receive some data!
var canvas = document.getElementById('canvas'),
cwidth = canvas.width,
cheight = canvas.height - 1,
meterWidth = 3, //width of the meters in the spectrum
gap = 3, //gap between meters
capHeight = 1,
capStyle = '#fff',
meterNum = 3000 / (3+ 1), //count of the meters
capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(20, 0, 20,250);
gradient.addColorStop(0.2, '#ccc');
gradient.addColorStop(0.4, '#ff0000');
gradient.addColorStop(1, '#fff000');
// 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 * 1.5, cheight - (--capYPositionArray), meterWidth, capHeight);
} else {
ctx.fillRect(i * 1, cheight - value, meterWidth, capHeight);
capYPositionArray = value;
};
ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
ctx.fillRect(i * 1.5 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
}
requestAnimationFrame(renderFrame);
}
renderFrame();
audio.play();
};
</script>
这构思奇妙，小播不一定都是转动的，可以用移动和底色的变化加以区别呢{:4_187:} 这带频谱帽的频谱也好漂亮。
欣赏亚伦老师好帖{:4_199:} 这个红绿开关，老师构思奇妙。
亚伦这里还有一个小播，做的不少的{:4_199:} 好看好听，好制作 感谢佳作分享
页:
[1]