论坛 › 动画音画 › 九爷出山

马黑黑 发表于 2022-12-23 08:13

九爷出山

<style>
#papa { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1; }
#papa::before { position: absolute; content: url('https://638183.freep.cn/638183/t22/gif/bird.gif'); top: 0; }
#btnMsg { position: absolute; color: snow; background: green; opacity: 0; border: 2px solid snow; border-radius: 8px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 1001; }
</style>

<div id="papa"><span id="btnMsg">全屏观赏</span></div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/2144527/ueditor/file/1073/2144527/1671717256689029.mp3" loop autoplay crossorigin="anonymous"></audio>

<script >
(function() {
        (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 15px; left: 50%; transform: translate(-50%)',player_css: 'bottom: 5px; left: 50%; transform: translate(-50%)',playerCode: `<style>#mplayer { --ww: 100%; --bg: linear-gradient(to top,lightgreen,green,lightgreen); margin: auto; position: absolute; width: var(--ww); height: 160px; display: flex; justify-content: center; align-items: flex-end; cursor: pointer; }.mLine { position: relative; margin: 0 1px 0 1px; width: 4px; height: 10px; background: var(--bg); }.mLine::before, .mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: snow; top: 0; }.mLine::after { top: 100%; }#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; }to { width: 100%; } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer" title="播放/暂停"></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, btfFlag = false;let total = Math.ceil(mplayer.offsetWidth / 6);for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let Ac = new AudioContext;let source = Ac.createMediaElementSource(aud);let analyser = Ac.createAnalyser();source.connect(analyser);analyser.connect(Ac.destination);let output = new Uint8Array(total);let ypAr = [];let lines = document.querySelectorAll('.mLine');(function update() {analyser.getByteFrequencyData(output);let mid = total % 2 === 0 ? total / 2 - 1 : Math.floor(total / 2);for(j = 0; j < total ; j++) {let k = j <= mid ? (mid - j) * 2 : (j - mid) * 2 - 1;/*lines.style.height = output/2 + 'px';*/lines.style.height = output/2+'px';lines.style.bottom = k*0.25 + 'px';}window.requestAnimationFrame(update);})();aud.addEventListener('timeupdate', () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();};mkPlayer.HCPlayer = playCode;})(this);
        let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
        HCPlayer({
                lrcAr: lrcAr,
                player_css: '--ww: 100%; bottom: 8px;',
                lrc_css: '--bg: linear-gradient(180deg,hsla(0,100%,50%,.35),hsla(120,100%,50%,.65)); color: lightblue; top: 10px;',
        });

        let fs = false, timerId;
        btnMsg.style.opacity = '0';
        btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();
        papa.onmousemove = () => {
                clearTimeout(timerId);
                btnMsg.style.opacity = '.95';
                timerId = setTimeout('btnMsg.style.opacity = "0"',3000);
        };
        document.addEventListener("fullscreenchange", () => {
                if(document.fullscreenElement !== null) {
                        fs = true;
                        btnMsg.innerText = '退出全屏';
                } else {
                        fs = false;
                        btnMsg.innerText = '全屏观赏';
                }
        });
})();
</script>

樵歌 发表于 2022-12-23 08:33

九爷是谁，看来是个讲义气的豪杰。哪天请他喝酒。{:4_173:}

马黑黑 发表于 2022-12-23 08:35

樵歌 发表于 2022-12-23 08:33
九爷是谁，看来是个讲义气的豪杰。哪天请他喝酒。

这个貌似有一部电视剧的，湘西的故事，具体不是很清楚

红影 发表于 2022-12-23 09:13

频谱还能这样折线展示，漂亮{:4_199:}

红影 发表于 2022-12-23 09:14

全屏的时候也好看，白鹤的点缀也好。欣赏黑黑好帖{:4_187:}

红影 发表于 2022-12-23 09:16

这样的折线，如果垂直于底边，理应在中间部分有斜向重叠部分，这里却是没有呢，不知怎么弄出来的{:4_173:}哦，我知道了，这些频谱都是垂直向上的吧。那它们在和折线相交的地方都有个小折角。

红影 发表于 2022-12-23 09:18

黑黑又带来新玩法{:4_199:}

马黑黑 发表于 2022-12-23 09:55

红影 发表于 2022-12-23 09:13
频谱还能这样折线展示，漂亮

还可以做成圆环，刚在后院发布了一个帖子

马黑黑 发表于 2022-12-23 09:55

红影 发表于 2022-12-23 09:14
全屏的时候也好看，白鹤的点缀也好。欣赏黑黑好帖

感谢鼓励与支持

马黑黑 发表于 2022-12-23 09:58

红影 发表于 2022-12-23 09:16
这样的折线，如果垂直于底边，理应在中间部分有斜向重叠部分，这里却是没有呢，不知怎么弄出来的 ...

所谓折线，实际上是频谱排列产生的效果：左边的一半降序排排坐、右边一半升序排排坐，各有各的位置，所以不会重叠。

马黑黑 发表于 2022-12-23 09:59

红影 发表于 2022-12-23 09:18
黑黑又带来新玩法

这个不算新吧，就如你所说的，折了个线

樵歌 发表于 2022-12-23 11:31

马黑黑 发表于 2022-12-23 08:35
这个貌似有一部电视剧的，湘西的故事，具体不是很清楚

是湘西哇，那里的故事可多了，赶尸人故事，种盅人，大祭师，可神秘了，还有最最重要的是还有可奈的湘妹纸儿，你的相爱{:4_189:}

马黑黑 发表于 2022-12-23 11:32

樵歌 发表于 2022-12-23 11:31
是湘西哇，那里的故事可多了，赶尸人故事，种盅人，大祭师，可神秘了，还有最最重要的是还有可奈的湘妹纸 ...

你这掐指一算，把啥事都弄明白了，连同俺的隐私{:4_170:}

红影 发表于 2022-12-23 15:16

马黑黑 发表于 2022-12-23 09:55
还可以做成圆环，刚在后院发布了一个帖子

看到了，像一顶皇冠{:4_173:}

红影 发表于 2022-12-23 15:19

马黑黑 发表于 2022-12-23 09:55
感谢鼓励与支持

本来想看看是哪句弄成的效果，结果还是封装好的{:4_173:}

红影 发表于 2022-12-23 15:19

马黑黑 发表于 2022-12-23 09:58
所谓折线，实际上是频谱排列产生的效果：左边的一半降序排排坐、右边一半升序排排坐，各有各的位置，所以 ...

嗯嗯，这个效果很棒{:4_187:}

红影 发表于 2022-12-23 15:20

马黑黑 发表于 2022-12-23 09:59
这个不算新吧，就如你所说的，折了个线

变化过的，就是新呢{:4_187:}

马黑黑 发表于 2022-12-23 16:57

红影 发表于 2022-12-23 15:20
变化过的，就是新呢

{:4_173:}

马黑黑 发表于 2022-12-23 16:58

红影 发表于 2022-12-23 15:19
嗯嗯，这个效果很棒

还行的吧。手机上看也很完美

马黑黑 发表于 2022-12-23 17:17

红影 发表于 2022-12-23 15:19
本来想看看是哪句弄成的效果，结果还是封装好的

封装成插件不影响查看代码，可以用曾经提供的工具将代码格式化就行。

这个折线，我放在 update 函数里做，其实应该放在生成频谱条是做的更好。很简单，只是设置频谱条的 bottom：

      (function update() {
            analyser.getByteFrequencyData(output);
            let mid = total % 2 === 0 ? total / 2 - 1 : Math.floor(total / 2);
            for (j = 0; j < total; j++) {
                let k = j <= mid ? (mid - j) * 2 : (j - mid) * 2 - 1; /*lines.style.height = output/2 + 'px';*/
                lines.style.height = output / 2 + 'px';
                lines.style.bottom = k * 0.25 + 'px';
            }
            window.requestAnimationFrame(update);
      })();

查看完整版本: 九爷出山