中秋鲸云特效：模仿网易云，点亮你的中秋夜

027西瓜皮
1,188 阅读3分钟

rAudio.gif

背景

我们在手机音乐播放器经常可以看见下面的播放界面，大家一定觉得很好看，很酷吧！中秋佳节将至，这是一个家人团聚、共庆团圆的时刻。而在这个特殊的中秋夜，你可以利用鲸云特效，模仿网易云的设计，给你的中秋节增添一抹别样的华丽。 image.png

实现

很早之前就看到过一个蛮有意思的音频可视化项目vudio.js。 在我看来作者相当厉害，把项目做得挺完整，前端代码结构规范，demo页面设计的可玩性比较高。所以在这里我们就不用重复造轮子了,直接用作者的包就可以了。

image.png

html

dom 的代码如下：

<div class="container">
    <img id="bg"/>
    <canvas id="canvas"></canvas>
    <audio id="audio" src="./moon.m4a" preload="auto"></audio>
    <label class="label" for="audioFile" id="audioLabel">Drop audio file here to play</label>
    <input type="file" name="audioFile" id="audioFile" onchange="vudio.readAudioSrc(this,vudio,document.querySelector('#audioLabel'))" accept="audio/*">
</div>
<div class="controller">
    <div>
        <button onclick="(function(){ audio.play();vudio.dance(); })()">播放音乐</button>
        <button onclick="audio.pause()">暂停音乐</button>
    </div>
    <div>
        <button onclick="vudio.dance()">播放效果</button>
        <button onclick="vudio.pause()">暂停效果</button>
        <button onclick="prettifyWaveform()">美化效果</button>
    </div>
    <div>
        <button class="type type-1" onclick="changeType(0)">跳舞的柱</button>
        <button class="type type-2" onclick="changeType(1)">围着跳舞</button>
        <button class="type type-3" onclick="changeType(2)">跳舞的线~</button>
        <button class="type type-4" onclick="changeType(3)">跳舞的圈</button>
    </div>
    <div>
        <button class="color color-1" onclick="changeColor(0)"></button>
        <button class="color color-2" onclick="changeColor(1)"></button>
        <button class="color color-3" onclick="changeColor(2)"></button>
        <button class="color color-4" onclick="changeColor(3)"></button>
        <button class="color color-5" onclick="changeColor(4)"></button>
    </div>
    <div>
        <button class="pos-v" onclick="changePosV('top')">上</button>
        <button class="pos-v" onclick="changePosV('middle')">中</button>
        <button class="pos-v" onclick="changePosV('bottom')">下</button>
    </div>
    <div>
        <button class="pos-h" onclick="changePosH('left')">左</button>
        <button class="pos-h" onclick="changePosH('center')">中</button>
        <button class="pos-h" onclick="changePosH('right')">右</button>
    </div>
</div>

css

样式代码：

html,body{
        box-sizing: border-box;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #31002d;
    }
    .container{
        position: relative;
        width: 100%;
        height: 100%;
    }
    #bg {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        filter: blur(50px);
    }
    #canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -300px;
        margin-top: -300px;
        width: 600px;
        height: 600px;
    }
    #audioFile {
        position: absolute;
        width: 100%;
        height: 88px;
        opacity: 0;
    }
    .label {
        position: absolute;
        text-align: center;
        height: 85px;
        width: 100%;
        color: #eee;
        font-size: 24px;
        font-family: 'Courier New', Courier, monospace;
        font-weight: 700;
        opacity: .3;
        border-radius: 8px;
        border: 1px dashed #ccc;
    }
    .controller{
        position: absolute;
        z-index: 5;
        bottom: 40px;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
    }
    .controller div{
        display: inline-block;
        height: 40px;
        margin: 0 10px;
    }
    .controller button{
        display: block;
        float: left;
        height: 40px;
        margin: 0 1px;
        padding: 0 20px;
        color: #fff;
        background-color: rgba(255,255,255,.2);
        border: none;
        outline: none;
    }
    .controller button:hover{
        opacity: .6;
    }
    .color-1{
        background-image: linear-gradient(#f00 0%, #f00 30%, #f90 30%, #f90 70%, #ff0 70%, #ff0 100%);
    }
    button.color-2{
        background-color: #ff0;
    }
    .color-3{
        background-image: linear-gradient(#00f, #06f, #09f, #0ff);
    }
    .color-4{
        background-image: linear-gradient(#fb6d6b, #c10056, #a50053, #51074b);
    }
    .color-5{
        background-image: linear-gradient(#ff422d 0%, #ff422d 50%, #6072ff 50%, #6072ff 100%);
    }

有了样式代码，我们还需要几个背景图片，我也附上了：

moon.png

260x260.jfif

js

使用方法

  1. 模块引入
# 使用npm安装此模块，以下是原始仓库版本，fork增强版（圆圈效果）的请安装 npm i vudio --save 或者 yarn add vudio
npm i vudio.js --save
# 或者使用yarn安装此模块
yarn add vudio.js

import Vudio from 'vudio.js'
  1. 标签式引入
<script src="https://unpkg.com/vudio@2.0.5/umd/vudio.js"></script>

实例化Vudio

var vudio = new Vudio(HTMLAudioElement | MediaStream, HTMLCanvasElement, [option]);
vudio.dance();

第一个参数用于指定音频源，可以是一个Audio标签，或者一个Audio对象，也可以是通过navigator.mediaDevices.getUserMedia获取到的音频MediaStream对象

第二个参数用于指定显示可视化内容的Canvas，

第三个参数用于指定显示效果的个性化配置。

具体代码如下：

var vudio = new Vudio(audio, canvas, {
        effect: 'circlewave',
        accuracy: 128,
        width: 800,
        height: 800,
        circlewave: {
            circleRadius: 200,
            fadeSide: true,
            shadowBlur : 4,
            shadowColor: 'rgba(244,244,244,.5)',
            coverImg: './moon.png',
        },
        waveform: {
            maxHeight : 160,
            spacing : 1,
            shadowBlur: 6,
            shadowColor : 'rgba(255,21,10,0.6)',
            prettify: true,
            fadeSide: true,
            color: [
                [0, '#f00'],
                [0.3, '#f00'],
                [0.3, '#f90'],
                [0.7, '#f90'],
                [0.7, '#ff0'],
                [1, '#ff0']
            ]
        }
    });
    vudio.dance();

完成之后效果如下：

image.png

码上掘金

文献

总结

借助鲸云特效模仿网易云的设计，点亮你的中秋夜。其炫动的视觉效果、个性化的互动设计和远距离联动的功能，都能为你的中秋带来别样的体验。让我们一起用鲸云特效为中秋佳节增添一份华丽，让音乐和特效成为我们与家人朋友连接的纽带。祝大家中秋快乐！

avatar
文章
阅读
粉丝