论坛 › 马黑黑教程专版 › 橄榄树：演示用类做的频谱

马黑黑 发表于 2023-7-16 21:21

橄榄树：演示用类做的频谱

本帖最后由 马黑黑 于 2023-7-16 22:39 编辑 <br /><br /><style>
#mydiv {
    margin: 0 0 0 calc(50% - 593px);
    width: 1024px;
    height: 640px;
    border: 1px solid gray;
    overflow: hidden;
    position: relative;
    --state: paused;
}
.leaf {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -100px;
    border-radius: 0% 100%;
    background: linear-gradient(45deg, green, lightgreen);
    animation: drop 6s var(--delay) infinite linear var(--state);
    --delay: 0s;
}
.leaf:nth-of-type(2) { --delay: -2s; }
.leaf:nth-of-type(3) { --delay: -4s; }
@keyframes drop { to { transform: rotate(-10deg) translateY(760px); } }
</style>

<div id="mydiv">
    <span class="leaf"></span>
    <span class="leaf"></span>
    <span class="leaf"></span>
</div>

<script>

let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let msort = (ar) => {
    let newAr = [];
    ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));
    return newAr;
}

class Pinpu {
    constructor(pa) {
      this.pa = pa;
      this.aud = document.createElement('audio');
      this.wrap = document.createElement('div');
      this.pinpu = { num: 60, width: 6, height: 100 }
    }
    createPinpu() {
      let styles = document.styleSheets;
      let mcss = document.styleSheets;
      mcss.insertRule(`.mplayer { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%); display: flex; align-items: flex-end; justify-items: flex-start; cursor: pointer; }`, mcss.rules.length);
      mcss.insertRule(`@keyframes up { from { height: 0px; } to { height: var(--height); } }`, mcss.rules.length);
      this.wrap.className = 'mplayer';
      this.aud.id = 'aud';
      this.aud.autoplay = true;
      this.aud.loop = true;
      this.pa.appendChild(this.wrap);
      this.pa.appendChild(this.aud);

      Array.from({length: this.pinpu.num}).forEach((item,key) => {
            item = document.createElement('span');
            let ar = Array.from(Array(this.pinpu.num), (v,k) => this.pinpu.num - k -1);
            item.style.cssText = `
                margin-right: 2px;
                align-self: flex-end;
                width: ${this.pinpu.width}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: up ${0.3 + Math.random() * 0.3}s -${Math.random()}s infinite alternate linear var(--state);
                --height: ${this.pinpu.height / 2 + msort(ar) * 1.2}px;
            `;
            this.wrap.appendChild(item);
      });
      this.click();
    }
    click() {
      this.wrap.onclick = () => this.aud.paused ? this.aud.play() : this.aud.pause();
    }
}

let pp = new Pinpu(mydiv);
pp.pinpu.num = 80;
pp.pinpu.width = 3;
pp.pinpu.height = 100;
pp.aud.src = 'https://music.163.com/song/media/outer/url?id=25707174';
pp.createPinpu();

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);

</script>

马黑黑 发表于 2023-7-16 21:22

本帖最后由 马黑黑 于 2023-7-16 22:44 编辑

代码（已修正频谱在手机浏览器下颠倒的现象，但未能解决手机版下频谱的抖动问题）<style>
#mydiv {
    margin: 0 0 0 calc(50% - 593px);
    width: 1024px;
    height: 640px;
    border: 1px solid gray;
    overflow: hidden;
    position: relative;
    --state: paused;
}
.leaf {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -100px;
    border-radius: 0% 100%;
    background: linear-gradient(45deg, green, lightgreen);
    animation: drop 6s var(--delay) infinite linear var(--state);
    --delay: 0s;
}
.leaf:nth-of-type(2) { --delay: -2s; }
.leaf:nth-of-type(3) { --delay: -4s; }
@keyframes drop { to { transform: rotate(-10deg) translateY(760px); } }
</style>

<div id="mydiv">
    <span class="leaf"></span>
    <span class="leaf"></span>
    <span class="leaf"></span>
</div>

<script>

let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let msort = (ar) => {
    let newAr = [];
    ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));
    return newAr;
}

class Pinpu {
    constructor(pa) {
      this.pa = pa;
      this.aud = document.createElement('audio');
      this.wrap = document.createElement('div');
      this.pinpu = { num: 60, width: 6, height: 100 }
    }
    createPinpu() {
      let styles = document.styleSheets;
      let mcss = document.styleSheets;
      mcss.insertRule(`.mplayer { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%); display: flex; align-items: flex-end; justify-items: flex-start; cursor: pointer; }`, mcss.rules.length);
      mcss.insertRule(`@keyframes up { from { height: 0px; } to { height: var(--height); } }`, mcss.rules.length);
      this.wrap.className = 'mplayer';
      this.aud.id = 'aud';
      this.aud.autoplay = true;
      this.aud.loop = true;
      this.pa.appendChild(this.wrap);
      this.pa.appendChild(this.aud);

      Array.from({length: this.pinpu.num}).forEach((item,key) => {
            item = document.createElement('span');
            let ar = Array.from(Array(this.pinpu.num), (v,k) => this.pinpu.num - k -1);
            item.style.cssText = `
                margin-right: 2px;
                align-self: flex-end;
                width: ${this.pinpu.width}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: up ${0.3 + Math.random() * 0.3}s -${Math.random()}s infinite alternate linear var(--state);
                --height: ${this.pinpu.height / 2 + msort(ar) * 1.2}px;
            `;
            this.wrap.appendChild(item);
      });
      this.click();
    }
    click() {
      this.wrap.onclick = () => this.aud.paused ? this.aud.play() : this.aud.pause();
    }
}

let pp = new Pinpu(mydiv);
pp.pinpu.num = 80;
pp.pinpu.width = 3;
pp.pinpu.height = 100;
pp.aud.src = 'https://music.163.com/song/media/outer/url?id=25707174';
pp.createPinpu();

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);

</script>

马黑黑 发表于 2023-7-16 21:25

79 - 84行：实例化频谱类

最简单的实例化可以是酱紫——

let pp = new Pinpu(mydiv);
pp.aud.src = 'https://music.163.com/song/media/outer/url?id=25707174';
pp.createPinpu();

就是，必须给宿主元素（mydiv或其他具有定位的元素）；必须给音频地址；必须创建频谱。

南无月 发表于 2023-7-16 21:37

马黑黑 发表于 2023-7-16 21:25
79 - 84行：实例化频谱类

最简单的实例化可以是酱紫——


{:4_170:}高级JS课程。。。

马黑黑 发表于 2023-7-16 21:41

南无月 发表于 2023-7-16 21:37
高级JS课程。。。

{:4_190:}

醉美水芙蓉 发表于 2023-7-16 21:49

南无月 发表于 2023-7-16 21:52

马黑黑 发表于 2023-7-16 21:41


问一个好奇了很久的问题：
我们都抄你的代码……瞎改改就完事儿。。。。
你贴子里的代码是一个字母一个字母敲出来的对吧。。
像这样边想边敲，一个贴子要敲多久？

马黑黑 发表于 2023-7-16 21:57

醉美水芙蓉 发表于 2023-7-16 21:49
老师我看到的是倒得！好像又跟以前一样的毛病，我忘记老师怎么把它整过来了？

可能低版本的浏览器不支持 flex 布局的简写属性，我现在分开写了，你再看看效果有没有改变。

马黑黑 发表于 2023-7-16 21:58

南无月 发表于 2023-7-16 21:52
问一个好奇了很久的问题：
我们都抄你的代码……瞎改改就完事儿。。。。
你贴子里的代码是一个字母一个 ...

就像玩呼啦圈，不会玩的，怎么弄都转不起来，会的，你说会怎么样

红影 发表于 2023-7-16 21:59

这个就是两头大中间小的具体应用吧。真漂亮的频谱。频谱的新做法{:4_187:}
只是频谱的底部横线怎么是动的，这个不是应该固定只有线条动的么？

马黑黑 发表于 2023-7-16 22:00

红影 发表于 2023-7-16 21:59
这个就是两头大中间小的具体应用吧。真漂亮的频谱。频谱的新做法
只是频谱的底部横线怎么是动的 ...

你刷新看看

红影 发表于 2023-7-16 23:46

马黑黑 发表于 2023-7-16 22:00
你刷新看看

现在好了。黑黑真棒{:4_199:}

马黑黑 发表于 2023-7-16 23:56

红影 发表于 2023-7-16 23:46
现在好了。黑黑真棒

不过flex至今手机端的支持还是不太理想，所以又改进了一下，另一个版本没事了，只是有些算法还需要研究一下

樵歌 发表于 2023-7-17 07:00

有这个类，你的乖徒儿们又把你前面的黑科技综合应用，派生新的美篇{:4_189:}

醉美水芙蓉 发表于 2023-7-17 07:23

马黑黑 发表于 2023-7-17 08:55

醉美水芙蓉 发表于 2023-7-17 07:23
老师早上好！手机浏览正常了！

不过这个版本由于用到 flex 布局，兼容性还不是很好。我准备推出第三个版本，通用版。

马黑黑 发表于 2023-7-17 08:56

樵歌 发表于 2023-7-17 07:00
有这个类，你的乖徒儿们又把你前面的黑科技综合应用，派生新的美篇

不过，类不是最理想的，这个机制，可以不用类

红影 发表于 2023-7-17 10:40

马黑黑 发表于 2023-7-16 23:56
不过flex至今手机端的支持还是不太理想，所以又改进了一下，另一个版本没事了，只是有些算法还需要研究一 ...

黑黑真仔细，考虑得很周全{:4_199:}

马黑黑 发表于 2023-7-17 10:49

红影 发表于 2023-7-17 10:40
黑黑真仔细，考虑得很周全

flex布局比grid布局出来早，奇怪的是，浏览器内核对它的支撑反而偏低，低版本内核的手机浏览器，竟然还不支持简写属性和简写值

南无月 发表于 2023-7-17 12:40

马黑黑 发表于 2023-7-16 21:58
就像玩呼啦圈，不会玩的，怎么弄都转不起来，会的，你说会怎么样

会转的。呼啦圈会快的飞起来。。{:4_173:}

查看完整版本: 橄榄树：演示用类做的频谱