抖音圣诞树代码HTML

抖音圣诞树代码HTML

北辰博客
2021-12-20 / 0 评论 / 0 阅读 / 正在检测是否收录...

抖音圣诞树代码HTML

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

直接上体验地址: 圣诞树

Christmastree

使用:

index.html

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

配置:

  1. 音乐配置:在script.js中修改对应的音乐地址,大家可以选择自己喜欢的添加上去
    musci
  1. 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>

最后放上下载链接

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

0

打赏

海报

正在生成.....

评论 (0)

取消