阅读 1581

「《奇迹再现》专属音乐播放器🎵」致以跃动的心与阳光

大家好,我是寒草😈,一只草系码猿🐒。间歇性热血🔥,持续性沙雕🌟
如果喜欢我的文章,可以关注➕ 点赞,与我一同成长吧~

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

前言

这篇文章的产生有两个原因:

第一个是我在「canvas」国庆将至🇨🇳,"手绘"一幅那兔,并畅谈我的梦中搞了一个彩蛋,彩蛋的标题是:献给寒草未来的爱人,再加上我最近看到了很多代码写的三行情书,就像这种:

#倘若你回首看看我
ifyou.turn_round_aguang():
#我永远在你背后
I.behind(you).forever()
#关注着你
see(you)
复制代码

于是乎我就萌生了一个想法,就是讲一讲程序员如何表白,后来想起来,老朽并没有这种经历,我咋给大家讲嘛,而且我在搜索如何用程序表白的时候发现很多人回答是:

大直男才用程序表白

我瞬间自闭,就打算放弃这个主题。

还有一件事就是我前一阵写了一个小太阳自娱自乐:

sun-light.gif

但是我有个遗憾,就是太阳的光芒太单调,希望他加入一些动感。

于是我心生一计,将两个主题合二为一,快,叫我小天才!

蹩脚的设计之路

其实这个 demo 的主题已经明确了:

  • 具有表白能力
  • 有动感的小太阳

那么如何搞一个有动感的小太阳呢,我首先想到的就是音乐播放器的动效,就像网易云的这个咚次哒次的效果

image.png

我就把样式搞的更像太阳就好了。

那具有表白能力咋搞啊,我也不太会设计这方面的东西,我就先搞了一个心❤️(其实是之前试验web-components的时候做的),代码写都写了,即使再短我也要复用一下的!那么心和太阳怎么结合呢? 我陷入了痛苦,常考后,心生一计:

用那个心做按钮吧,点完了开始播放音乐(我这个想法真的是太土鳖了哈哈哈哈哈,但是我会想办法让这个想法不那么土鳖)

实现 📖

音乐处理 🎵

参考MDN:developer.mozilla.org/zh-CN/docs/…

let audio = new Audio("dijia.mp3");
let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let source = audioCtx.createMediaElementSource(audio)
let analyser = audioCtx.createAnalyser();
source.connect(analyser);
analyser.connect(audioCtx.destination)
analyser.fftSize = 1024;
let bufferLength = analyser.frequencyBinCount;
let dataArray = new Uint8Array(bufferLength);
audio.play();
setInterval(() => {
  analyser.getByteTimeDomainData(dataArray);
  // 这里的dataArray就是我要的信息
  dataArray.slice(0, 360).forEach((item, index) => {
    rays[index].style.height = `${item / 2}px`;
  })
}, 1000)
复制代码

跳跃的心 ❤️

xin.gif

这里用的 web-component

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web-component</title>
</head>

<body>
  <my-heart></my-heart>
  <template id="my-heart">
    <style>
      :host {
        position: absolute;
        top: 100px;
        left: 100px;
        animation: tiaodong .8s linear infinite;
      }

      .left {
        position: absolute;
        width: 80px;
        height: 120px;
        background-color: red;
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
      }

      .right {
        width: 80px;
        position: absolute;
        height: 120px;
        background-color: red;
        border-radius: 50px 50px 0 0;
        left: 28px;
        transform: rotate(45deg)
      }

      @keyframes tiaodong {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.05);
        }

        100% {
          transform: scale(1);
        }
      }
    </style>
    <div class="left"></div>
    <div class="right"></div>
  </template>
  <script>
    class MyHeart extends HTMLElement {
      constructor() {
        super();
        const templateElem = document.getElementById('my-heart');
        const content = templateElem.content.cloneNode(true);

        this.attachShadow({ mode: 'closed' }).appendChild(content);
      };
    }
    window.customElements.define('my-heart', MyHeart);
  </script>
</body>

</html>
复制代码

360 度环绕太阳 ☀️

image.png

html:

<div class="sun"></div>
复制代码

css:

body {
      display: flex;
      padding: 0;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #f3eeea;
      margin: 0;
    }

    .sun {
      position: relative;
      left: 300px;
      width: 40vmin;
      height: 40vmin;
      border-radius: 100%;
      background-color: #fdf4ae;
    }

    .ray {
      position: absolute;
      top: 40vmin;
      left: 20vmin;
      width: 1vmin;
      height: 6.25vmin;
      transform-origin: 0 -20vmin;
      transform: translateY(25vmin);
      transition: all 1s linear;
    }

    .ray:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-radius: 50%;
      background: linear-gradient(to bottom, #fcec71, #edc353);
    }

    .ray:after {
      height: 100%;
      transform-origin: 50% 100%;
    }
复制代码

js:

// 动态生成360个光线
const sun = document.getElementsByClassName('sun')[0];
let html = '';
(new Array(360)).fill('hancao-design').forEach((item, index) => {
  html += `<div class="ray" style="transform: rotate(${index * 1}deg);"></div>`;
})
sun.innerHTML = html;
复制代码

跃动的阳光 🌞

我感觉我录的 gif 一直都不好,我一定努力搞一个好用的 gif 录制软件 dijia.gif

我就是单纯的用:

transition: all 1s linear;

配合定时器

setInterval(() => {
  analyser.getByteTimeDomainData(dataArray);
  dataArray.slice(0, 360).forEach((item, index) => {
    rays[index].style.height = `${item / 2}px`;
  })
}, 1000)
复制代码

心的巧妙用法 ❤️

termi.gif

我做了一个类似于终端的界面,最后会出来一个心脏,我去点击之后就可以播放音乐并让太阳跃动起来~

// 内容如下,和那兔那篇文章关联起来了有没有~
hancao-design
for my feature lover
sun loading
...
retry
...
loaded
I wanna to be your sun
pleading enjoy the sunshine
click my-heart to start
复制代码
window.customElements.define('my-heart', MyHeart);
    const list = ['<span style="color: red;"">hancao-design</span>', 'for my feature lover', 'sun loading', '...', 'retry',  '...', 'loaded', 'I wanna to be your sun', 'pleading enjoy the sunshine', 'click <span style="color: red;">my-heart</span> to start', '⬇️']
    const editor = document.getElementsByClassName('editor')[0];
    let i = 0;
    let len = list.length;
    const timer = setInterval(() => {
      if(i < len){
        editor.innerHTML += `<div>${list[i]}</div>`
      }else{
        clearInterval(timer);
        editor.innerHTML += `<my-heart></my-heart>`
      }
      i++;
    }, 500);
复制代码

完整代码 🌲

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>music</title>
  <style>
    body {
      display: flex;
      padding: 0;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #f3eeea;
      margin: 0;
    }

    .sun {
      position: relative;
      left: 300px;
      width: 40vmin;
      height: 40vmin;
      border-radius: 100%;
      background-color: #fdf4ae;
    }

    .ray {
      position: absolute;
      top: 40vmin;
      left: 20vmin;
      width: 1vmin;
      height: 6.25vmin;
      transform-origin: 0 -20vmin;
      transform: translateY(25vmin);
      transition: all 1s linear;
    }

    .ray:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-radius: 50%;
      background: linear-gradient(to bottom, #fcec71, #edc353);
    }

    .ray:after {
      height: 100%;
      transform-origin: 50% 100%;
    }

    .editor {
      width: 600px;
      height: 100vh;
      position: fixed;
      background-color: #1c1d21;
      left: 0px;
      color: #c1c5cd;
      padding-left: 32px;
      padding-top: 64px;
      font-size: 32px;
    }
  </style>
</head>

<body>
  <div class="sun"></div>
  <div class="editor"></div>
  <template id="my-heart">
    <style>
      :host {
        position: absolute;
        animation: tiaodong .8s linear infinite;
        cursor: pointer;
      }

      .left {
        position: absolute;
        width: 80px;
        height: 120px;
        background-color: red;
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
      }

      .right {
        width: 80px;
        position: absolute;
        height: 120px;
        background-color: red;
        border-radius: 50px 50px 0 0;
        left: 28px;
        transform: rotate(45deg)
      }

      @keyframes tiaodong {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.05);
        }

        100% {
          transform: scale(1);
        }
      }
    </style>
    <div class="left"></div>
    <div class="right"></div>
  </template>
  <script>
    const sun = document.getElementsByClassName('sun')[0];
    let html = '';
    (new Array(360)).fill('hancao-design').forEach((item, index) => {
      html += `<div class="ray" style="transform: rotate(${index * 1}deg);"></div>`;
    })
    sun.innerHTML = html;
    const rays = sun.childNodes;
    class MyHeart extends HTMLElement {
      constructor() {
        super();
        const templateElem = document.getElementById('my-heart');
        const content = templateElem.content.cloneNode(true);
        this.onclick =() => {
            this.onclick = null;
            let audio = new Audio("dijia.mp3");
            let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            let source = audioCtx.createMediaElementSource(audio)
            let analyser = audioCtx.createAnalyser();
            source.connect(analyser);
            analyser.connect(audioCtx.destination)
            analyser.fftSize = 1024;
            let bufferLength = analyser.frequencyBinCount;
            let dataArray = new Uint8Array(bufferLength);
            audio.play();
            setInterval(() => {
              analyser.getByteTimeDomainData(dataArray);
              dataArray.slice(0, 360).forEach((item, index) => {
                rays[index].style.height = `${item / 2}px`;
              })
            }, 1000)
        }
        this.attachShadow({ mode: 'closed' }).appendChild(content);
      };
    }
    window.customElements.define('my-heart', MyHeart);
    const list = ['<span style="color: red;"">hancao-design</span>', 'for my feature lover', 'sun loading', '...', 'retry',  '...', 'loaded', 'I wanna to be your sun', 'pleading enjoy the sunshine', 'click <span style="color: red;">my-heart</span> to start', '⬇️']
    const editor = document.getElementsByClassName('editor')[0];
    let i = 0;
    let len = list.length;
    const timer = setInterval(() => {
      if(i < len){
        editor.innerHTML += `<div>${list[i]}</div>`
      }else{
        clearInterval(timer);
        editor.innerHTML += `<my-heart></my-heart>`
      }
      i++;
    }, 500);

  </script>
</body>
</html>
复制代码

结束语

image.png

生活要有仪式感哦~
祝大家的生活充满阳光☀️

为什么题目中有奇迹再现呢,因为我引的音乐是这个童年经典的主题曲,本文标题也是在致敬最后一话的题目《致以辉煌的人》

我最后用《生命永存》这一话的经典台词结尾:

努力活完短暂的一生
将成果留给后代继承
人类就是如此反复
真的很了不起

如果喜欢我的文章或者创意📖,可以用点赞+关注支持我~感谢✨

加我微信:hancao97,邀你进群,一起学习交流前端,成为更优秀的工程师~(因为群人数超过200了,没法扫码进群了,只能加微信哈)

文章分类
前端
文章标签