抖音圣诞树代码HTML

抖音圣诞树代码HTML

今天我分享一个抖音超火热的圣诞树代码，圣诞树的颜色会随着音乐的节奏而变化； 音乐的选择有多种方式，可以自己修改下文中对应的代码，也可以上传自己喜欢的音乐进行播放；这款代码也是我从CodePen这个在线前端代码编写网站上发现的，原作者是[Dilum Sanjaya]

直接上体验地址: 圣诞树

使用：

• 文章最后我会放上下载地址
• 解压后使用HBuilderX或者上传至自己的云服务器运行打开(直接打开index.html是无法成功加载的)
• 首页选择音乐，然后等待一段时间，此过程是在加载（本地或云端）音乐
• 或者OR选择上传自己喜欢的音乐

配置：

1. 音乐配置：在script.js中修改对应的音乐地址，大家可以选择自己喜欢的添加上去
   

2. function loadAudio(i) {
     document.getElementById("overlay").innerHTML =
       '<div class="text-loading">加载音乐需要一段时间Please Wait...</div>

';

 const files = [
   "./music/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3",
   "./music/Dott_-_01_-_This_Christmas.mp3",
   "./music/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",
   "./music/Jingle_Bell_Swing.mp3",
   "./music/2.mp3"
 ];

3. index.html首页选择音乐的button按钮
![button按钮](https://cloud.dushiwu.cn/2021/12/651793084.jpg)

4. ```html
        <div id="overlay">

<ul>
                <li class="title">选择音乐 Select Music</li>
                <li><button class="btn" id="btnA" type="button">雪花飘落西蒙·潘鲁克 Snowflakes Falling Down by Simon
                        Panrucker</button></li>
                <li><button class="btn" id="btnB" type="button">Dott的这个圣诞节 This Christmas by Dott</button></li>
                <li><button class="btn" id="btnC" type="button">TRG Banks旅馆没有房间 No room at the inn by TRG Banks</button>
                </li>
                <li><button class="btn" id="btnD" type="button">Mark Smeby 的《铃儿响叮当》Jingle Bell Swing by Mark
                        Smeby</button></li>
                <li><button class="btn" id="btnD" type="button">《铃儿响叮当》</button></li>
                <li class="separator">或者 OR</li>
                <li>
                    <input type="file" id="upload" hidden />
                    <label for="upload">上传自己喜欢的音乐 Upload File</label>
                </li>
            </ul>

</div>

最后放上下载链接

下载的文件中只有一首音乐，大家可以行按照文章中的方法添音乐