vue实现音乐播放器

通过vue与原生js实现音乐播放器

下面是需要的网址

1.歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:keywords(查询关键字)
响应内容:歌曲搜索结果
2.歌曲url获取接口
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id)
响应内容:歌曲url地址
3.歌曲详情获取
请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
响应内容:歌曲详情(包括封面信息)
4.热门评论获取
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,地址中的type固定为0)
响应内容:歌曲的热门评论
5.mv地址获取
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址

<!DOCTYPE html>

<head>

<title>音乐播放器</title>

<style>

body,ul,li,h3{

padding:0;

margin:0;

}

#app{

width: 900px;

margin: 30px auto 0 auto;

/*border: 1px solid red;*/

/*position: relative;*/

}

h1{

text-align: center;

color:red;

}

.search{

background-color: blue;

overflow: hidden;

height: 35px;

}

.search>h3{

float: left;

color: #fff;

line-height: 35px;

margin-left: 10px;

}

.search>.right{

position: relative;

width: 200px;

float: right;

border-radius: 8px;

background-color: #eee;

padding:0 10px;

margin-top: 6px;

margin-right: 10px;

}

.search>.right>input{

width:142px;

border: none;

outline: none;

background-color: transparent;

font-size: 12px;

}

.search>.right>button{

position: absolute;

border: none;

background-color: transparent;

font-size:12px;

padding-bottom:3px;

cursor: pointer;

}

.show{

height: 382px;

}

.show>.left{

width: 200px;

height: 374px;

padding-top:8px;

padding-left: 10px;

padding-right: 10px;

overflow:auto;

float: left;

}

ul{

list-style: none;

}

.show>.left>ul>li{

line-height: 24px;

border-bottom: 1px dashed #999;

font-size: 12px;

letter-spacing:-1.5px;

}

.show>.left>ul>li:hover{

background-color: orange !important;

}

.show>.left>ul>li:last-child{

border:none;

}

.show>.left>ul>li:nth-child(2n){

background-color: #E3FAFC;

}

.show>.left>ul>li>a{

display: inline-block;

margin-right:2px;

width:12px;

height:12px;

background-image: url("images/play.png");

background-size: 12px;

}

.show>.left>ul>li>img{

width: 12px;

height: 12px;

float: right;

margin-top: 6px;

cursor: pointer;

}

.show>.middle{

position: relative;

float: left;

width: 400px;

height: 382px;

background-color: #E8FCFC;

text-align: center;

}

.show>.middle>img{

position: absolute;

width:200px;

height:200px;

border-radius: 50%;

/* margin-top:50px;

margin-right: 20px; */

top:110px;

right: 100px;

}

.playing{

animation: rotate 8s linear infinite;

}

@keyframes rotate {

from {

transform: rotateZ(0);

}

to {

transform: rotateZ(360deg);

}

.show>.right{

position: relative;

float: right;

width: 280px;

height: 382px;

/*background-color: pink;*/

padding:5px 0px 5px 5px;

box-sizing: border-box;

overflow:auto;

}

.show>.right>h5{

margin:0;

text-align: center;

padding-bottom:3px;

}

.show>.right>ul>li{

padding:3px 0 10px 0;

border-top: 1px dashed #ccc;

}

.show>.right>ul>li>img{

width:40px;

height:40px;

border-radius: 50%;

float: left;

}

.show>.right>ul>li>p{

margin:0;

margin-left:45px;

font-size: 12px;

letter-spacing:-1.5px;

}

.show>.right>ul>li>p.name{

font-weight: bold;

}

audio{

width: 900px;

height: 34px;

}

div.video_dd{

width: 100%;

height:1500px;

padding-top: 30px;

position: absolute;

left:0;

top:0;

text-align: center;

background-color:rgba(0,0,0);

display: none;

}

video{

width: 900px;

height: 550px;

}

#lv{

font-size: 25px;

font-weight: 100;

}

</style>

</head>

<body>

<h1>音乐播放器</h1>

</div>

<ul>

<span>{{item}}-{{name2[index]}}</span>

</li>

</ul>

</div>

<p id="lv" align="center">{{gename}}</p>

</div>

<ul>

<p class="name">{{pinglunname[index]}}</p>

<p>{{pinglun[index]}}</p>

</li>

</ul>

</div>

</div>

// axios.defaults.baseURL="https://autumnfish.cn";

const vm=new Vue({

el:"#app",

data:{

window:window,

gequ:'周杰伦',

name1:[],

id1:[],

musicurl:[],

name2:[],

tes:'',

pinglun:[],

pingluntou:[],

pinglunname:[],

fengmian:[],

chushi:'images/wf.jpg',

play1:'',

gename:''

methods: {

sousuo:function(){

var t=this;

this.window.axios.get("https://autumnfish.cn/search?keywords=%27"+this.gequ+"%27").then(function(response)

{ t.name1.splice(0,t.name1.length)

t.id1.splice(0,t.id1.length)

t.musicurl.splice(0,t.musicurl.length)

t.name2.splice(0,t.name2.length)

t.fengmian.splice(0,t.fengmian.length)

// t.touids.splice(0,t.touids.length)

try{

var a=response.data.result.songs.length;

var b=response.data.result.songs;}

catch{return}

for(var i=0;i<a;i++){

t.name1.push(b[i].name);

t.id1.push(b[i].id);

if(b[i].artists[0].name=="")

t.name2.push("0")

else t.name2.push(b[i].artists[0].name)

}

var z=t.name1.length;

for(var i=0;i<z;i++)

{

// console.log(t.id1[i]);

t.window.axios.get("https://autumnfish.cn/song/url?id="+t.id1[i]).then(function(response){

if(response.data.data[0].url!=null)

t.musicurl.push(response.data.data[0].url)

else

t.musicurl.push('0');

})

}

for(var i=0;i<z;i++)

{

// console.log(t.id1[i]);

t.window.axios.get("https://autumnfish.cn/song/detail?ids="+t.id1[i]).then(function(response){

console.log(response);

if(response.data.songs[0].al.picUrl!=null)

t.fengmian.push(response.data.songs[0].al.picUrl)

else

t.fengmian.push('0');

})

}

});

}

,kais:function(a,b){

if(a=="0")

{

this.tes=""

this.pinglun.splice(0,this.pinglun.length)

this.pingluntou.splice(0,this.pingluntou.length)

this.pinglunname.splice(0,this.pinglunname.length)

this.window.document.querySelector('#abc').className =''

this.chushi='images/wf.jpg'

this.gename=''

alert("please change music")

return

}

var y=this;

this.tes=a;

this.window.axios.get("https://autumnfish.cn/comment/music?id="+this.id1[b]+"&limit=1").then(function(response){

console.log(response);

var x=response.data.hotComments.length

var z=response.data.hotComments;

y.pinglun.splice(0,y.pinglun.length)

y.pingluntou.splice(0,y.pingluntou.length)

y.pinglunname.splice(0,y.pinglunname.length)

for(var i=0;i<x;i++){

y.pinglun.push(z[i].content);

y.pingluntou.push(z[i].user.avatarUrl)

y.pinglunname.push(z[i].user.nickname)

}

})

this.gename =this.name1[b]

this.chushi=this.fengmian[b]

this.window.document.querySelector('#abc').className =''

}

go1:function(){

this.play1='playing'

document.querySelector('.playing').style.animationPlayState = ''

})

function f2(){

var tt=document.querySelector('#abc')

tt.className='playing'

tt.style.animationPlayState = ''

}

function f3(){

var tt=document.querySelector('#abc')

tt.className='playing'

tt.style.animationPlayState = 'paused'

}

</script>

</body>

</html>

vue实现音乐播放器相关推荐

java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
vue引入音乐播放器插件
欢迎大家进群,一起探讨学习微信公众号,每天给大家提供技术干货博主技术笔记博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star vue引入音乐播放器插件 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
Vue 自定义音乐播放器组件为H5添加背景音乐
自定义音乐播放器组件为H5添加背景音乐: 1.创建music.vue组件 <template><div><div @click="changeOn" ...
vue相关音乐播放器
1.初始化vue,vue-cli,webpack: $ vue init webpack vue-music ? Project name (vue-music) ? Project descript ...
Java和vue实现音乐播放器_vue实现的网易云音乐在线播放和下载功能案例
本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: Document html, body { height: 100%; padding ...
基于VUE的音乐播放器
文章目录前言一.功能分解 1.布局 2.JS功能实现二.例程下载 1.引入库 2.读入数据总结前言 html音乐播放器练习小例子 1.调用网易云的api查询歌曲信息,api不是官方的,而是g ...
Java和vue实现音乐播放器_躁！DJ 风格 Java 桌面音乐播放器
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...

vue实现音乐播放器

vue实现音乐播放器相关推荐

最新文章

热门文章