发布时间:2024-09-08 17:01
音乐播放列表,里面目前几首歌曲,到时候可以自己下载喜欢听的歌曲到里面,下面带有免费下载歌曲地址。
<ul class="player__playlist list">
<li class="player__song">
<img class="player__img img" src="img/1.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">周杰伦</b>
<span class="flex">
<span class="player__title">听妈妈的话</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="img/1.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/2.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">薛之谦</b>
<span class="flex">
<span class="player__title">认真的雪</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="img/2.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/3.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">艾辰</b>
<span class="flex">
<span class="player__title">错位时空</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="img/3.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/4.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">陈明</b>
<span class="flex">
<span class="player__title">我要找到你</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="img/4.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/5.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">周深</b>
<span class="flex">
<span class="player__title">雪落下的声音</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="img/5.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/6.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">王力宏,谭维维</b>
<span class="flex">
<span class="player__title">缘分一道桥 (电影《长城》片尾曲)</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="img/6.mp3"></audio>
</li>
<li class="player__song">
<img class="player__img img" src="img/7.jpg" alt="cover">
<p class="player__context">
<b class="player__song-name">周深</b>
<span class="flex">
<span class="player__title">大鱼 (动漫《大鱼海棠》印象曲)</span>
<span class="player__song-time"></span>
</span>
</p>
<audio class="audio" src="img/7.mp3"></audio>
</li>
</ul>
封面 + 歌曲名称 + 歌唱者
每次切换歌曲的时候,背景颜色变换
--1.这个是配置背景图片地方,去掉后就是背景色切换
<body style="background-image:url('img/bg.jpg'); background-repeat:no-repeat;background-position:center;background-size:cover;">
--2.配置图片变换
const bgBody = ["orange", "#ff4545", "#f8ded3", "#ffc382", "#f5eda6", "#ffcbdc", "#dcf3f3"];
//切换背景颜色
body.style.backgroundColor = bgBody[count];
每次切换歌曲的时候,背景图片变换
--1.这个是配置背景图片地方,加上后就是背景图片变换
<body style="background-image:url('img/bg.jpg'); background-repeat:no-repeat;background-position:center;background-size:cover;">
--2.配置图片变换
const bgBodyImg = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg", "bg6.jpg", "bg7.jpg"];
//切换背景图片
body.style.backgroundImage = "url('img/"+bgBodyImg[count]+"')";
歌曲下载地址:http://tool.liumingye.cn/music/
无损音乐及付费音乐免费下载,提供包含精选、歌单、排行榜等多种音乐推荐形式,可以在榜单中寻找喜欢的音乐,也可以直接搜索自己喜欢的音乐。
歌曲下载地址:https://tonzhon.com/
非常棒的在线音乐聚合搜索网站。当一个平台的音乐无法满足你时,总是要多个平台切换听歌,一个音乐聚合平台,满足你的音乐需求。
使用mybatis的typeHandler对clob进行流读写方式
【AI资讯月刊】350+资源大盘点!6月不容错过的资料和动态,都都都在这里啦!<附下载>
40+倍提升,详解 JuiceFS 元数据备份恢复性能优化之路
CAD二次开发--像纬地与CASS程序一样双击桌面图标实现插件的自动挂载(不用netload也不用进入后输入挂载命令)
清风数学建模学习笔记——K-means聚类模型详解及SPSS操作流程
【嵌入式Linux应用开发】温湿度监控系统——多线程与温湿度的获取显示
中职网络安全技能大赛P100-Dcore(轻型CMS系统)SQL注入
java基于springboot+vue音乐播放网站—计算机毕业设计