<!DOCTYPE html>
<html lang="en">
head>
meta charset="UTF-8" />
name="viewport" content="width=device-width,initial-scale=1.0" http-equiv="X-UA-Compatible"="ie=edge" title>悦听player</<!-- 样式 -->
link rel="stylesheet" href="./css/index.css"bodydiv class="wrap">
播放器主体区域 -->
="play_wrap" id="player">
="search_bar">
img src="images/player_title.png" alt="" />
搜索歌曲 -->
input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
div="center_con" 搜索歌曲列表 ='song_wrapper'>
ul ="song_list">
li><a href="javascript:;"></a> b>你好<!---->spaniul="images/line.png" class="switch_btn"="" 歌曲信息容器 ="player_con"="playing"="images/player_bar.png"="play_bar" />
黑胶碟片 -->
="images/disc.png"="disc autoRotate" ="images/cover.png"="cover autoRotate" 评论容器 ="comment_wrapper"h5 ='title'>热门留言h5='comment_list'>
dl >
dt="./images/person.png"dd ="name">盐焗西兰花dd="detail">
绝对值得一听，吹爆
dl="right_line"="audio_con"audio ref='audio' src="" controls autoplay loop class="myaudio"audio="video_con" style="display: none;"video controls="controls"video="mask" 开发环境版本，包含了有帮助的命令行警告 script ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"script 官网提供的 axios 在线地址 ="https://unpkg.com/axios/dist/axios.min.js"html>
<script>
var vue = new Vue({
el: "#player",data: {
musicList: [],query: ''function () {
var that = this;
axios.get("https://autumnfish.cn/search?keywords=" + .query).then(
(response) {
// console.log(response);
that.musicList = response.data.result.songs;
}, (err) { }
);
},});
</script>
li v-for="item in musicList">{{item.name}}<!---->
>
playMusic: (musicId) {
;
获取歌曲地址
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
(response) {
console.log(response);
console.log(response.data.data[0].url);
that.musicUrl = response.data.data[0].url;
},
="javascript:;" @click="playMusic(item.id)">
='audio' :src="musicUrl">
歌曲详情获取
axios.get("https://autumnfish.cn/song/detail?ids=" + console.log(response.data.songs[0].al.picUrl);
that.musicCover = response.data.songs[0].al.picUrl;
},1)"> (err) { }
);
歌曲评论获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + console.log(response);
console.log(response.data.hotComments);
that.hotComments = response.data.hotComments;
},1)"> (err) { }
);
dl ="item in hotComments">
:src="item.user.avatarUrl">{{item.nickname}}
{{item.content}}
>
歌曲播放
play: function () {
console.log("play");
this.isPlaying = true;
},1)"> 歌曲暂停
pause: function () {
console.log("pause");
false
@play="play" @pause="pause"="musicUrl">
="playing" :class="{playing:isPlaying}">
播放mv
playMv: (mvid) {
;
axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
console.log(response.data.data.url);
that.isShow = ;
that.mvUrl = response.data.data.url;
},1)"> 隐藏
hide: this.isShow = ;
}
v-show="isShow" stylevideo ="mvUrl" controls="mask"="hide">
="javascript:;"="playMusic(item.id)"span v-if="item.mvid!=0"="playMv(item.mvid)"="musicCover"
var vue = new Vue({
el: "#player",query: '',musicUrl: '',musicCover: '',// 歌曲评论
hotComments: [],isPlaying: false,isShow: false,mvUrl: '',methods: {
searchMusic: function () {
var that = this;
axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
function (response) {
// console.log(response);
that.musicList = response.data.result.songs;
console.log(response);
},function (err) { }
);
},playMusic: function (musicId) {
var that = this;
// 获取歌曲地址
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
function (response) {
console.log(response);
// console.log(response.data.data[0].url);
that.musicUrl = response.data.data[0].url;
},function (err) { }
);
// 歌曲详情获取
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
function (response) {
console.log(response);
// console.log(response.data.songs[0].al.picUrl);
that.musicCover = response.data.songs[0].al.picUrl;
},function (err) { }
);
// 歌曲评论获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
function (response) {
// console.log(response);
// console.log(response.data.hotComments);
that.hotComments = response.data.hotComments;
},// 歌曲播放
play: function () {
// console.log("play");
this.isPlaying = true;
},// 歌曲暂停
pause: function () {
// console.log("pause");
this.isPlaying = false;
},// 播放mv
playMv: function (mvid) {
var that = this;
axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
function (response) {
// console.log(response);
//console.log(response.data.data.url);
that.isShow = true;
that.mvUrl = response.data.data.url;
},// 隐藏
hide: function () {
this.isShow = false;
}
},});
>
服务热线 19970861797
