打造属于自己的音乐播放

打造属于自己的音乐播放器：

html 代码

<!DOCTYPE html>
<html lang="zn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打造属于自己的音乐播放器</title><link rel="stylesheet" href="css/index.css"><link rel="shortcut icon" type="text/css" href="http://ganto.xyz/images/favicon.ico"/></head><body><div id="box"><div id="app"><div class="header"><span class="ntm"><a style="color: white;text-decoration: none;" href="#">Music</a></span><div class="search"><input type="text" placeholder="请输入歌手名字" class="text" v-model="city" @keyup.enter="getjoke"><input type="button" class="button" value="搜索" @click="getjoke" ></div><span class="tm" title="点击隐藏"><i>右上角展开</i>×</span></div><ul><li class="li" :title="a.name + '-' + a.artists[0].name" v-for="(a,index) in arr" @click="fun(a.id,a.name,a.artists[0].name)">{{a.name}}-{{a.artists[0].name}}</li></ul><div class="section"><div class="nar"><span class="name">{{ name }}</span><img class="img" :src="imgUrl" alt=""></div><div class="lyric"><span v-for="lrc in lyric">{{ lrc.toString().substring(10,)  }}</br></span></div></div><audio autoplay controls loop :src="url"></audio></div><span class="kai" title="展开">√</span></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="js/index.js"></script><script>$(function(){$(".kai").hide();$(".tm i").hide();$(".tm").click(function(){$("#app").slideUp(100);$(".kai").fadeIn();});$(".tm").hover(function(){$(".tm i").stop().slideDown();},function(){$(".tm i").stop().slideUp();})$(".kai").click(function(){$("#app").slideDown(100);$(".kai").fadeOut();});var app = $("#app"),header = $(".header");var disX,disY;header.mousedown(function(e){disX = e.pageX - parseInt(app.offset().left);disY = e.pageY - parseInt(app.offset().top);document.onmousemove = function(e){var event = e || window.event;app.css({"left":e.pageX - disX + "px", "top":e.pageY - disY + "px"});}document.onmouseup = function(){document.onmousemove = null;}})$(".github").mousedown(function(e){if(e.button == 2){$(this).fadeOut();}})})</script></body>
</html>

js 代码

/*** 1. 歌曲搜索接口，*    请求地址是： https://autumnfish.cn/Search*    请求方式是：get，*    请求的参数是keywords(查询关键字)*    响应内容，歌曲搜索结果* 2. 歌曲url获取接口*    请求地址是"https://autumnfish.cn/song/url"*    请求方法是get，*    请求参数是id*    响应内容：歌曲url地址**/
var app = new Vue({el:"#app",data:{city:"",arr:[],url:"",imgUrl:"",name:"",lyric:""},methods:{getjoke:function(){var that = this;axios.get("https://autumnfish.cn/search?keywords="+this.city).then(function(response){that.arr = response.data.result.songs;}).catch(function(error){console.log(error);});},fun:function(i,a,b){this.name = a+ "-" +b;var that = this;axios.get("https://autumnfish.cn/song/url?id="+i).then(function(response){that.url = response.data.data[0].url;}).catch(function(error){console.log(error);})axios.get("https://autumnfish.cn/song/detail?ids="+i).then(function(response){that.imgUrl = response.data.songs[0].al.picUrl;var box = document.getElementById("box");box.style.backgroundImage = "url("+that.imgUrl+")";}).catch(function(error){console.log(error);});axios.get("https://autumnfish.cn/lyric?id="+i).then(function(response){that.lyric = response.data.lrc.lyric.split("\n");}).catch(function(error){console.log(error);});},}
});

css 样式

*{margin: 0;padding: 0;
}
body{position: absolute;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;
}
#box{width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;background-position: center;transition: all 1s;display: flex;justify-content: center;align-items: center;
}
#app{width: 800px;height: 500px;max-width: 800px;max-height: 500px;box-shadow: 0px 0px 100px black;position: absolute;border-radius: 5px;overflow: hidden;
}
.header{width: 100%;height: 30px;background: #2ab2ab;display: flex;justify-content: space-between;align-items: center;
}
.header img{width: 20px;height: 20px;cursor: pointer;
}
.header span{color: white;font-weight: 900;cursor: pointer;
}
.search{border-radius: 20px;background-color: rgba(255, 255, 255, .5);height: 30px;
}
.search .text{height: 30px;border: 0;background: rgba(0, 0, 0, 0);outline: none;margin-left: 10px;font-size: 12px;color: white;
}
.search .button{display: inline-block;width: 40px;height: 30px;border: 0;cursor: pointer;background: rgba(0, 0, 0, 0);transition: all 1s;color: white;border-radius: 20px;outline: none;
}
.search .button:hover{color: white;background-color: royalblue;
}
audio{width: 100%;height: 40px;position: absolute;bottom: 0;background-color: #eeeeee;outline: none;z-index: 9;
}
ul{list-style: none;width: 200px;height: 430px;max-height: 430px;background-color: royalblue;overflow-y: auto;position: relative;z-index: 1;
}
ul::-webkit-scrollbar{display: none;
}
ul li{height: 17px;cursor: pointer;padding: 8px 10px;margin: 10px;border-radius: 4px;color: white;text-align: right;transition: all 1s;font-size: 13px;white-space: nowrap;  text-overflow:ellipsis;overflow:hidden;
}
ul li:hover{background: #2ab2ab;
}
li:nth-of-type(odd) {background: rgba(255, 255, 255, .3);
}
li:nth-of-type(even) {background: rgba(255, 255, 255, .1);
}
.section{width: 600px;height: 430px;background: royalblue;position: absolute;right: 0;top: 30px;overflow: hidden;/* display: flex;justify-content: center; */
}
.section .nar{width: 390px;position: absolute;top: 15px;text-align: center;
}
.section img{width: 150px;height: 150px;border-radius: 4px;
}.section .name{display: block;color: wheat;z-index: 99;font-weight: 900;text-shadow: 2px 2px 5px wheat;padding: 20px;
}.section .lyric{width: 180px;height: 400px;position: absolute;right: 0;padding: 0 10px;font-size: 12px;color: wheat;overflow-y: auto;margin: 15px;
}
.section .lyric::-webkit-scrollbar{display: none;
}
.section .lyric span{display: block;margin: 4px 0;}
.kai{display: inline-block;width: 30px;height: 30px;position: fixed;border-radius: 50%;top: 10px;right: 10px;box-sizing: border-box;line-height: 30px;text-align: center;cursor: pointer;font-weight: 900;font-family: 幼圆;color: white;background-color: #66eeaa;
}
.kai:hover{box-shadow: 0 0 10px rgba(0,0,0,.5) inset;
}
.tm{font-size: 20px;font-weight: 900;font-family: 幼圆;color: white;position: relative;
}
.tm i{display: inline-block;width: 80px;height: 20px;font-style: normal;font-size: 12px;position: absolute;bottom: 0;left: -80px;text-align: center;line-height: 20px;
}
.github{position: absolute;bottom: 0;right: 0;
}

效果图

注释：:（样式不太好看）

打造属于自己的音乐播放相关推荐

完整打造一个多功能音乐播放器项目（初步设想跟酷狗类似）
本人目前准备利用闲暇时间打造一个完整的音乐播放器项目,主要用于学习及分享!原创不易,转载请注明出处. 这是一个什么样的音乐播放器呢?整体的架构跟酷狗差不多吧,我的方式呢,是一个个组件一个个模块先做好, ...
Navidrome - 开源音乐服务器【打造属于自己的音乐播放器】「端口映射」随时随地想听就听
转载自cpolar极点云文章:Navidrome - 开源音乐服务器[打造属于自己的音乐播放器]「端口映射」随时随地想听就听 1. 前言不知从何时开始,我们能用的音乐软件越来越少,笔者使用小米手机很 ...
html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签
我的音乐播放器 HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Can I Use这个在线网站 ...
html音乐播放器标签,打造属于自己的音乐播放器 HTML5之audio标签
我的音乐播放器 HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Can I Use这个在线网站 ...
html5播放器源码自己添加音乐,HTML5 audio标签打造属于自己的音乐播放器
最近学习了HTML5中的Audio标签,学习他的最好方式当然是实践,于是就自己写了一个.那就直接上演示链接吧 http://htmlpreview.github.io/?https://github. ...
【脚本项目源码】Python制作多功能音乐播放器，打造专属你的音乐播放器
前言本文给大家分享的是如何通过利用Python实现多功能音乐播放器,废话不多直接开整~ 开发工具 Python版本: 3.6 相关模块: os模块 sys模块 time模块 random模块 PyQ ...
【Navidrome 开源音乐服务器】手把手教你打造属于自己的音乐播放器随时随地想听就听
目录 1. 前言 2. Navidrome网站搭建 2.1 Navidrome下载和安装 2.1.1 安装并添加ffmpeg 2.1.2下载并配置Navidrome 2.1.3 添加Navidrome ...
玩转Openwrt（二） — 配合Android手机打造无线音乐播放器
前一篇文章大概介绍了刷入带ADSL驱动的openwrt以及简单的配置,这次就总结下一个好玩的应用,使用android手机+mpd打造一台无线音乐播放器. 所需装备: DB120或者RG100A或者其它 ...
android 无线音乐播放器,玩转Openwrt（二） — 配合Android手机打造无线音乐播放器...
前一篇文章大概介绍了刷入带ADSL驱动的openwrt以及简单的配置,这次就总结下一个好玩的应用,使用android手机+mpd打造一台无线音乐播放器. 所需装备: DB120或者RG100A或者其它 ...

打造属于自己的音乐播放

打造属于自己的音乐播放器：

html 代码

js 代码

css 样式

效果图

打造属于自己的音乐播放相关推荐

最新文章

热门文章