抖音圣诞树代码HTML
今天我分享一个抖音超火热的圣诞树代码,圣诞树的颜色会随着音乐的节奏而变化; 音乐的选择有多种方式,可以自己修改下文中对应的代码,也可以上传自己喜欢的音乐进行播放;这款代码也是我从CodePen这个在线前端代码编写网站上发现的,原作者是[Dilum Sanjaya]
直接上体验地址: 圣诞树
使用:
- 文章最后我会放上下载地址
- 解压后使用HBuilderX或者上传至自己的云服务器运行打开(直接打开index.html是无法成功加载的)
- 首页选择音乐,然后等待一段时间,此过程是在加载(本地或云端)音乐
- 或者OR选择上传自己喜欢的音乐
配置:
- 音乐配置:在script.js中修改对应的音乐地址,大家可以选择自己喜欢的添加上去
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按钮

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>
最后放上下载链接
下载的文件中只有一首音乐,大家可以行按照文章中的方法添音乐
为什么我的打开之后就是请等待 然后等了很久也没有反应
这个代码需要服务器才能跑起来,可以下载个HBuilderX,把代码放进去运行就OK了