<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fonts/iconfont.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/player.css" />
</head>
<body>
<script>
if (!window.name) {
window.name = 'test';
window.location.reload();
}
</script>
<script src="/demos/googlegg.js"></script>
<div id="musicApp">
<!-- 头部布局 -->
<header>
<div>
<span class="title">歪比叭比Music</span>
<div class="search">
<input v-model="query" @keyup.enter="getSong" type="text" placeholder="请输入" />
<div class="search_con" @click="getSong"><img src="img/search.png" alt=""></div>
</div>
<span class="joke">玛卡巴卡讲笑话</span>
<img class="gb" @click="getjoke" src="img/sb.png" />
</div>
</header>
<!-- 中间内容区域 -->
<div class="content">
<!-- 左边歌曲区域 -->
<div class="left">
<!-- 歌曲列表 -->
<ul>
<li v-for="(item,index) in songList" :class="{focus:index===playIndex}" v-cloak>
<span class="play" @click="playSong(item.id,item.artists[0].name,item.name,index)" ><img src="img/yy.png" alt=""></span>
<div class="name" @click="playstart" @dblclick="playSong(item.id,item.artists[0].name,item.name,index)">{{item.name}}</div>
<span v-show="item.mvid!=0" @click="showMV(item.mvid)" class="mv"><img src="img/MV%20(1).png" alt=""></span>
</li>
</ul>
<!-- <img src="./images/line.png" class="line" alt=""> -->
</div>
<!-- 中间封面区域 -->
<div class="center" :class="{playing:isPlay}">
<img src="img/bz.png" class="play_bar" alt="">
<!-- 黑胶封面 -->
<img src="img/index.png" class="disc autoRotate" alt="">
</div>
<!-- 右边评论区域 -->
<div class="right">
<h5 class="hot_title">热门留言</h5>
<div class="comment_list">
<dl v-for="item in hotComments" v-cloak>
<dt><img :src="item.user.avatarUrl" alt=""></dt>
<dd class="name">{{item.user.nickname}}</dd>
<dd class="detail">{{item.content}}</dd>
</dl>
</div>
</div>
</div>
<!-- 底部播放器 -->
<div class="audio_con">
<audio @play="play" @pause="pause" :src="songUrl" ref='audio' controls autoplay loop class="myaudio music-player__audio"></audio>
</div>
<div class="video_con" style="display: none;" v-show="isShow">
<video :src="mvUrl" ref='video' controls="controls"></video>
<div class="mask" @click="hide"></div>
</div>
<!-- 播放器主体 -->
<div class="music-player__main">
<!-- 模糊背景 -->
<div class="music-player__blur" :style="{background: 'url('+songCover+') no-repeat center' }"></div>
<!-- 唱片 -->
<div class="music-player__disc">
<!-- 唱片图片 -->
<div class="music-player__image" :class="{playing:isPlay}">
<img width="100%" class="aaa autoRotate" :src="songCover" alt="">
</div>
<!-- 指针 -->
<div class="music-player__pointer" :class="{playing:isPlay}"><img width="100%" src="./images/cd_tou.png" alt=""></div>
</div>
<!-- 控件主体 -->
<div class="music-player__controls">
<!-- 歌曲信息 -->
<div class="music__info">
<h3 class="music__info--title">{{songs}}</h3>
<p class="music__info--singer">{{singer}}</p>
</div>
<!-- 控件... -->
<div class="player-control">
<div class="player-control__content">
<div class="player-control__btns">
<div class="player-control__btn player-control__btn--prev"><i class="iconfont icon-prev"></i></div>
<div class="player-control__btn player-control__btn--play"><i onclick="playstart()" id="bofan" class="iconfont icon-play"></i></div>
<div class="player-control__btn player-control__btn--next"><i class="iconfont icon-next"></i></div>
<div class="player-control__btn player-control__btn--mode"><i class="iconfont icon-loop"></i></div>
</div>
<div class="player-control__volume">
<div class="control__volume--icon player-control__btn"><i class="iconfont icon-volume"></i></div>
<div class="control__volume--progress progress"></div>
</div>
</div>
<!-- 歌曲播放进度 -->
<div class="player-control__content">
<div class="player__song--progress progress"></div>
<div class="player__song--timeProgess nowTime">00:00</div>
<div class="player__song--timeProgess totalTime">00:00</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#musicApp",
data: {
//搜索信息
query: "",
//歌曲列表
songList: [],
//歌曲在线播放地址
songUrl: "",
//歌曲封面地址
songCover: "",
// 人们评论
hotComments: [],
//判断是否在播放
isPlay: false,
//判断遮罩层
isShow: false,
//播放mv的地址
mvUrl: "",
//播放的歌手
singer: "",
//播放的歌曲
songs: "",
//判断是否播放
isSing: false,
//
playIndex: "",
joke:""
},
methods: {
getjoke:function(){
var that = this;
axios.get("https://autumnfish.cn/api/joke").
then(function(response){
//console.log(response.data);
that.joke = response.data;
alert(response.data);
},function(err){
console.log(err);
})
},
getSong: function() {
// console.log(this.query);
var that = this;
this.playIndex = ""
axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function(response) {
//console.log(response.data.result);
that.songList = response.data.result.songs;
console.log(that.songList);
// console.log(that.songList[2].artists[0].name);
if (response.data.result.queryCorrected) {
that.query = response.data.result.queryCorrected;
}
}).catch(function(err) {
// console.log(err);
alert("查询失败");
})
},
playSong: function(songId, singer, songs, index) {
var that = this;
//console.log(songId);
//console.log(singer);
//console.log(songs);
this.playIndex = index;
//console.log(index);
this.singer = singer;
this.songs = songs;
//console.log(this.isSing);
this.isSing = true;
//获取歌曲播放地址
axios.get("https://autumnfish.cn/song/url?id=" + songId).then(function(res) {
//console.log(res);
that.songUrl = res.data.data[0].url;
// console.log(that.songUrl);
console.log(res.data.data);
}, function(err) {
console.log(err);
});
//获取歌曲封面信息
axios.get("https://autumnfish.cn/song/detail?ids=" + songId).then(function(res) {
// console.log(res);
// console.log(res.data.songs[0].al.picUrl);
that.songCover = res.data.songs[0].al.picUrl;
}, function(err) {
console.log(err);
});
//获取热门评论
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + songId).then(function(res) {
// console.log(res);
//头像
// console.log(res.data.hotComments[0].user.avatarUrl);
//昵称
// console.log(res.data.hotComments[0].user.nickna
VUE 唯美网易云音乐播放器
需积分: 5 174 浏览量
2023-08-12
18:43:16
上传
评论 2
收藏 390KB ZIP 举报
vue 网易云音乐播放器.zip （26个子文件） 
vue 网易云音乐播放器 js 
player.js.bak 14KB player.js 12KB vue.js 333KB utill.js 3KB jquery.min.js 91KB vue.min.js 91KB img 
mv.png 5KB MV (1).png 8KB bz.png 67KB sb.png 7KB search.png 6KB
timg.jpg 7KB timg.png 33KB yy.png 7KB index.png 49KB gb.png 2KB css player.css 5KB style.css 7KB reset.css 201B
index.html 9KB images cd.png 7KB songs 你的名字.jpg 3KB 天气之子.jpg 10KB cd_tou.png 2KB index - 副本.html 10KB fonts iconfont.css 4KB资源评论
