三十里铺

马黑黑 发表于 2024-3-19 18:04

本帖最后由马黑黑于 2024-3-22 13:32 编辑 <style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/1/30lp.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }
#canv { position: absolute; left: 50%; bottom: 4px; transform: translate(-50%,0); cursor: pointer; }
.pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M1124,280 Q750,-20 -100,70'); offset-distance: 100%; animation: fly 20s var(--delay) infinite var(--state); --delay: 0s; }
.pic:nth-of-type(2) { --delay: -7s; }
.pic:nth-of-type(3) { --delay: -14s; }
@keyframes fly { to { offset-distance: 0; } }
</style>

<div id="papa">
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
<canvas id="canv" width="600" height="240" title="点击播放"></canvas>
</div>

<script>

const aud = new Audio();
aud.src = 'https://yinpin.s3-us-east-1.ossfiles.com/30lp.mp3';
aud.crossOrigin = '';
aud.loop = true;
aud.load();
aud.play();
let AudioContext = window.AudioContext || window.webkitAudioContext;
let Ac = new AudioContext;
let analyser = Ac.createAnalyser();
analyser.fftSize = 256;
let source = Ac.createMediaElementSource(aud);
source.connect(analyser);
analyser.connect(Ac.destination);
let len = analyser.frequencyBinCount - 30;
let output = new Uint8Array(len);
let canvctx = canv.getContext('2d');
let ppWidth = canv.width / len;
let ppHeight, x;
let gradient = canvctx.createLinearGradient(0,0,0,200);
gradient.addColorStop(0,'rgba(128,0,0');
gradient.addColorStop(.5,'rgba(255,165,0');
gradient.addColorStop(1,'rgba(0,128,0');
(function draw() {
canvctx.clearRect(0, 0, canv.width, canv.height);
analyser.getByteFrequencyData(output);
x = 0.5;
for(let i = 0; i < len; i ++) {
 ppHeight = output[ i ] * .9 + ppWidth;
 canvctx.fillStyle = gradient;
 canvctx.fillRect(x, canv.height - ppHeight, ppWidth - 1, ppHeight);
 x += ppWidth;
}
requestAnimationFrame(draw);
})();
aud.onpause = aud.onplaying = () => aud.paused ?
(canv.title = '点击播放', papa.style.setProperty('--state', 'paused')) :
(canv.title = '点击暂停', papa.style.setProperty('--state', 'running'));
canv.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

马黑黑 发表于 2024-3-19 18:05

本帖最后由马黑黑于 2024-3-22 13:33 编辑 <style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2"> #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/1/30lp.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }</cl-cd>
<cl-cd data-idx="3"> #canv { position: absolute; left: 50%; bottom: 4px; transform: translate(-50%,0); cursor: pointer; }</cl-cd>
<cl-cd data-idx="4"> .pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M1124,280 Q750,-20 -100,70'); offset-distance: 100%; animation: fly 20s var(--delay) infinite var(--state); --delay: 0s; }</cl-cd>
<cl-cd data-idx="5"> .pic:nth-of-type(2) { --delay: -7s; }</cl-cd>
<cl-cd data-idx="6"> .pic:nth-of-type(3) { --delay: -14s; }</cl-cd>
<cl-cd data-idx="7"> @keyframes fly { to { offset-distance: 0; } }</cl-cd>
<cl-cd data-idx="8"></style></cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10"><div id="papa"></cl-cd>
<cl-cd data-idx="11"> <img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" /></cl-cd>
<cl-cd data-idx="12"> <img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" /></cl-cd>
<cl-cd data-idx="13"> <img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" /></cl-cd>
<cl-cd data-idx="14"> <canvas id="canv" width="600" height="240" title="点击播放"></canvas></cl-cd>
<cl-cd data-idx="15"></div></cl-cd>
<cl-cd data-idx="16"> </cl-cd>
<cl-cd data-idx="17"><script></cl-cd>
<cl-cd data-idx="18"> </cl-cd>
<cl-cd data-idx="19">const aud = new Audio();</cl-cd>
<cl-cd data-idx="20">aud.src = 'https://yinpin.s3-us-east-1.ossfiles.com/30lp.mp3';</cl-cd>
<cl-cd data-idx="21">aud.crossOrigin = '';</cl-cd>
<cl-cd data-idx="22">aud.loop = true; </cl-cd>
<cl-cd data-idx="23">aud.load();</cl-cd>
<cl-cd data-idx="24">aud.play();</cl-cd>
<cl-cd data-idx="25">let AudioContext = window.AudioContext || window.webkitAudioContext;</cl-cd>
<cl-cd data-idx="26">let Ac = new AudioContext;</cl-cd>
<cl-cd data-idx="27">let analyser = Ac.createAnalyser();</cl-cd>
<cl-cd data-idx="28">analyser.fftSize = 256;</cl-cd>
<cl-cd data-idx="29">let source = Ac.createMediaElementSource(aud);</cl-cd>
<cl-cd data-idx="30">source.connect(analyser);</cl-cd>
<cl-cd data-idx="31">analyser.connect(Ac.destination);</cl-cd>
<cl-cd data-idx="32">let len = analyser.frequencyBinCount - 30;</cl-cd>
<cl-cd data-idx="33">let output = new Uint8Array(len);</cl-cd>
<cl-cd data-idx="34">let canvctx = canv.getContext('2d');</cl-cd>
<cl-cd data-idx="35">let ppWidth = canv.width / len; </cl-cd>
<cl-cd data-idx="36">let ppHeight, x;</cl-cd>
<cl-cd data-idx="37">let gradient = canvctx.createLinearGradient(0,0,0,200);</cl-cd>
<cl-cd data-idx="38">gradient.addColorStop(0,'rgba(128,0,0'); </cl-cd>
<cl-cd data-idx="39">gradient.addColorStop(.5,'rgba(255,165,0'); </cl-cd>
<cl-cd data-idx="40">gradient.addColorStop(1,'rgba(0,128,0'); </cl-cd>
<cl-cd data-idx="41">(function draw() {</cl-cd>
<cl-cd data-idx="42"> canvctx.clearRect(0, 0, canv.width, canv.height);</cl-cd>
<cl-cd data-idx="43"> analyser.getByteFrequencyData(output);</cl-cd>
<cl-cd data-idx="44"> x = 0.5; </cl-cd>
<cl-cd data-idx="45"> for(let i = 0; i < len; i ++) {</cl-cd>
<cl-cd data-idx="46"> ppHeight = output[ i ] * .9 + ppWidth;</cl-cd>
<cl-cd data-idx="47"> canvctx.fillStyle = gradient;</cl-cd>
<cl-cd data-idx="48"> canvctx.fillRect(x, canv.height - ppHeight, ppWidth - 1, ppHeight);</cl-cd>
<cl-cd data-idx="49"> x += ppWidth;</cl-cd>
<cl-cd data-idx="50"> }</cl-cd>
<cl-cd data-idx="51"> requestAnimationFrame(draw); </cl-cd>
<cl-cd data-idx="52">})();</cl-cd>
<cl-cd data-idx="53">aud.onpause = aud.onplaying = () => aud.paused ?</cl-cd>
<cl-cd data-idx="54"> (canv.title = '点击播放', papa.style.setProperty('--state', 'paused')) :</cl-cd>
<cl-cd data-idx="55"> (canv.title = '点击暂停', papa.style.setProperty('--state', 'running'));</cl-cd>
<cl-cd data-idx="56">canv.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="57"> </cl-cd>
<cl-cd data-idx="58"></script></cl-cd>
</div>

马黑黑 发表于 2024-3-19 18:15

代码注释和一些说明：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=74971

南无月 发表于 2024-3-19 19:51

这个非网页式，代码直接发的。

马黑黑 发表于 2024-3-19 20:03

南无月发表于 2024-3-19 19:51
这个非网页式，代码直接发的。

关键是音频资源，凡开放了域的音频，都可以酱紫

梦油发表于 2024-3-19 20:20

图中的倒影真美。《三十里铺》器乐曲听起来，仿佛看到了西北的黄土高坡和那巧夺天工的窑洞。{:5_116:}

马黑黑 发表于 2024-3-19 20:46

梦油发表于 2024-3-19 20:20
图中的倒影真美。《三十里铺》器乐曲听起来，仿佛看到了西北的黄土高坡和那巧夺天工的窑洞。

对，陕西的

小辣椒 发表于 2024-3-19 21:45

这二个我都可以做的，上次也是做成功的{:4_173:}

小辣椒 发表于 2024-3-19 21:45

这个频谱很流畅的，黑黑很强大{:4_178:}

小辣椒 发表于 2024-3-19 21:59

今天先下，争取明天完成二个作业

南无月 发表于 2024-3-19 22:20

马黑黑发表于 2024-3-19 20:03
关键是音频资源，凡开放了域的音频，都可以酱紫

刚试着换了个网易的音乐，预览发现不行，就知道是符合条件的音频{:4_173:}
话说这种还真是有点不太好找哈。。
所以还是要学会用网页发。。

南无月 发表于 2024-3-19 22:22

这个飞翔的凤凰很特别，以前没见过，找得挺好看。。

南无月 发表于 2024-3-19 22:25

这个二胡曲听起来没那么凄凉，反到明快的很。。{:4_173:}

马黑黑 发表于 2024-3-19 22:43

南无月发表于 2024-3-19 22:25
这个二胡曲听起来没那么凄凉，反到明快的很。。

是独弦琴

马黑黑 发表于 2024-3-19 22:44

南无月发表于 2024-3-19 22:20
刚试着换了个网易的音乐，预览发现不行，就知道是符合条件的音频
话说这种还真是有点不太好找 ...

就是 iframe，其实也有限制，不同的浏览器，也许引发的问题不同

马黑黑 发表于 2024-3-19 22:49

小辣椒发表于 2024-3-19 21:45
这二个我都可以做的，上次也是做成功的

是的。不过这个频谱用的是画布画的

马黑黑 发表于 2024-3-19 22:49

南无月发表于 2024-3-19 22:22
这个飞翔的凤凰很特别，以前没见过，找得挺好看。。

按理应该见过

马黑黑 发表于 2024-3-19 22:50

小辣椒发表于 2024-3-19 21:59
今天先下，争取明天完成二个作业

这个要支持跨域

红影发表于 2024-3-19 23:24

黑黑每次讲解后，都还有实例演示，非常赞{:4_199:}

马黑黑 发表于 2024-3-19 23:48

红影发表于 2024-3-19 23:24
黑黑每次讲解后，都还有实例演示，非常赞

{:4_190:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

三十里铺