【博主推荐】html好看的音乐播放器(附源码)
html好看的音乐播放器
- 文章目录
- 1.主界面列表效果
- 2.主界面详情效果
- 3.背景风格1-背景色轮动
- 4.背景风格2-图片轮动
- 5.MP3免费下载
- 5.1 MyFreeMP3
- 5.2.铜钟音乐
- 源码下载
文章目录
1.主界面列表效果
音乐播放列表,里面目前几首歌曲,到时候可以自己下载喜欢听的歌曲到里面,下面带有免费下载歌曲地址。
<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>
2.主界面详情效果
封面 + 歌曲名称 + 歌唱者
3.背景风格1-背景色轮动
每次切换歌曲的时候,背景颜色变换
--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];
4.背景风格2-图片轮动
每次切换歌曲的时候,背景图片变换
--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]+"')";
5.MP3免费下载
5.1 MyFreeMP3
歌曲下载地址:http://tool.liumingye.cn/music/
无损音乐及付费音乐免费下载,提供包含精选、歌单、排行榜等多种音乐推荐形式,可以在榜单中寻找喜欢的音乐,也可以直接搜索自己喜欢的音乐。
5.2.铜钟音乐
歌曲下载地址:https://tonzhon.com/
非常棒的在线音乐聚合搜索网站。当一个平台的音乐无法满足你时,总是要多个平台切换听歌,一个音乐聚合平台,满足你的音乐需求。
源码下载
【博主推荐】html好看的音乐播放器 点击下载
【博主推荐】html好看的音乐播放器(附源码)相关推荐
- JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目 ...
- 最新依米花H5音乐播放器系统源码+Thinkphp内核
正文: 最新依米花H5音乐播放器系统源码+Thinkphp内核,源码0加密,如果无法发送邮箱和短信啥的,就是你没配置好,自己去检查. 安装环境: 国内外服务器都可以用 主机无法运行 需求环境 php7 ...
- 依米花音乐播放器php源码下载
仿依米花音乐播放器是一款简约的HTML悬浮音乐播放器,免费分享和之前分享的绚丽彩虹在线音乐播放器生成源码差不多,功能界面都是大同小异的.这款依米花音乐播放器php源码支持网易云/QQ音乐,可搭建类是与 ...
- 依米花音乐播放器php源码
简介: 和之前分享的绚丽彩虹在线音乐播放器生成源码差不多,功能界面都是大同小异的. 这款依米花音乐播放器php源码支持云/QQ音乐,可搭建类是与播放器功能的平台. 源码安装方法: 环境:php5.6或 ...
- 几款最主流的音乐播放器应用源码-android源码
影音播放 优雅音乐播放器应用源码 这是一款不错的音乐播放器应用源码案例,优雅音乐播放器应用源码,该应用的界面有点类似小米音乐播放器,应用的整天布局还没有那 人气:3328运行环境:/android/i ...
- 自编Win8风格Android音乐播放器应用源码(单机版)
用闲暇的两天时间,研究编写了一个类Win8风格的android音乐播放器,实现了大部分基本功能.下面看具体描述: 基本实现功能: 注意事项:Android系统版本须在2.2以上,保证手机安装有SD卡( ...
- 计算机毕业设计Android的手机音乐播放器app(源码+系统+mysql数据库+Lw文档)
项目介绍 本次程序的设计,对手机音乐播放器的框架进行了精心的构思和实现,采用主要开发工具Eclipse+Java语言,Android Development Tool的插件和Android SDK版本 ...
- 从零开始撸音乐播放器(源码可下载)
演示视频 哈哈,自己是真的弱.被生活狠狠打脸了. Java课设要搞音乐播放器.然而老师只讲了输入输出啥的,其他自学. 从零开始撸代码. 1 .从sound,到AppletPlayer又到Player. ...
- 基于Python+tkinter+pygame的音乐播放器完整源码
import os import tkinter import tkinter.filedialog import random import time import threading import ...
最新文章
- photoshop CS不能打字,出现死机等现象的解决办法!!
- 用java实现计算器加减乘除功能,并能够循环接收新的数据,通过用户交互实现
- Java内存之栈与堆
- spring3创建RESTFul Web Service
- c#实现手机号码归属地查询
- redis将散裂中某个值自增_0基础掌握Django框架(49)Redis
- 论文浅尝 - ICLR2020 | Abductive Commonsense Reasoning
- 【转载】js数组的操作
- 捕获事件要比冒泡事件先触发
- java编程思想--协变返回类型
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_10-webpack研究-安装nodejs
- 十折交叉验证python_Python机器学习:6.2 K折交叉验证评估模型性能
- java drm_DRM系统工作原理
- 给JAVA做个类VS的拖放式界面设计工具
- Oracle DG主库失败Failover参考
- HTML5网页设计期末大作业 ~金福普洱茶叶网页设计成品6页面带视频留言验证(HTML+CSS+JS)~ 学生hbuilder网页设计作业成品源码
- Win系统上最好用的epub阅读器
- 用HTML+CSS做一个简单好看的校园社团网页
- 网页文档下载不了怎么办 亲测可用!建议收藏!
- 【Java】用PriorityQueue优先队列实现最小堆和最大堆
热门文章
- Python | 记录最近遇到的大坑!
- NS3 仿真系列资料大全
- 添加磁盘MBR,GPT,Swap分区和Linux文件系统
- limma差异分析谁比谁不重要
- [RK3288][Android6.0] 调试笔记 --- ECHI上的USB Camera无法打开
- 黑化的蜜雪冰城,凭营销就想抓牢消费者的心?
- JAVA计算机毕业设计学生课堂互动教学系统Mybatis+源码+数据库+lw文档+系统+调试部署
- CTF中常见的php函数绕过(保持更新)
- java操作es之各种高级查询
- 2022-2028全球与中国轨道检查车辆市场现状及未来发展趋势