<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 样式 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrap">
<div class="play_wrap" id="player">
<div class="search_bar">
<img src="images/player_title.png" alt="" />
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" />
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper' ref='song_wrapper'>
<ul class="song_list">
<li v-for="item in musicList">
<!-- 点击放歌 -->
<a href="javascript:;" @click='playMusic(item.id)'></a>
<b>{{item.name}}</b>
<span>
<i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>
</span>
</li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isPlay}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper" ref='comment_wrapper'>
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="item in hotComments">
<dt>
<img :src="item.user.avatarUrl" alt="" />
</dt>
<dd class="name">{{item.user.nickname}}</dd>
<dd class="detail">
{{item.content}}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
</div>
<div class="video_con" v-show="showVideo">
<video ref='video' :src="mvUrl" controls="controls"></video>
<div class="mask" @click="closeMv"></div>
</div>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
// 设置axios的基地址
axios.defaults.baseURL = 'https://autumnfish.cn';
// axios.defaults.baseURL = 'http://localhost:3000';
// 实例化vue
var app = new Vue({
el: "#player",
data: {
// 搜索关键字
query: '',
// 歌曲列表
musicList: [],
// 歌曲url
musicUrl: '',
// 是否正在播放
isPlay: false,
// 歌曲热门评论
hotComments: [],
// 歌曲封面地址
coverUrl: '',
// 显示视频播放
showVideo: false,
// mv地址
mvUrl: ''
},
// 方法
methods: {
// 搜索歌曲
searchMusic() {
if (this.query == 0) {
return
}
axios.get('/search?keywords=' + this.query).then(response => {
// 保存内容
this.musicList = response.data.result.songs;
})
// 清空搜索
this.query = ''
},
// 播放歌曲
playMusic(musicId) {
// 获取歌曲url
axios.get('/song/url?id=' + musicId).then(response => {
// 保存歌曲url地址
this.musicUrl = response.data.data[0].url
})
// 获取歌曲热门评论
axios.get('/comment/hot?type=0&id=' + musicId).then(response => {
// console.log(response)
// 保存热门评论
this.hotComments = response.data.hotComments
})
// 获取歌曲封面
axios.get('/song/detail?ids=' + musicId).then(response => {
// console.log(response)
// 设置封面
this.coverUrl = response.data.songs[0].al.picUrl
})
},
// audio的play事件
play() {
this.isPlay = true
// 清空mv的信息
this.mvUrl = ''
},
// audio的pause事件
pause() {
this.isPlay = false
},
// 播放mv
playMv(vid) {
if (vid) {
this.showVideo = true;
// 获取mv信息
axios.get('/mv/url?id=' + vid).then(response => {
// console.log(response)
// 暂停歌曲播放
this.$refs.audio.pause()
// 获取mv地址
this.mvUrl = response.data.data.url
})
}
},
// 关闭mv界面
closeMv() {
this.showVideo = false
this.$refs.video.pause()
},
// 搜索历史记录中的歌曲
historySearch(history) {
this.query = history
this.searchMusic()
this.showHistory = false;
}
},
})
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
vue.js入门源代码
共69个文件
html:25个
png:20个
jpg:12个
需积分: 0 7 下载量 108 浏览量
2022-08-07
21:22:42
上传
评论
收藏 3.43MB 7Z 举报
温馨提示
vue.js入门源代码
资源详情
资源评论
资源推荐
收起资源包目录
vue源代码.7z (69个子文件)
vue源代码
data数据对象.html 1KB
vue基础.html 591B
demo-计数器
css
index.css 683B
img
图片1.gif 9KB
计数器模板.html 2KB
index.html 1KB
模板.html 1KB
07.Demo-计数器模板_.html 2KB
img
monkey.gif 9KB
black.png 8KB
demo-图片切换
css
index.css 2KB
images
01.jpg 280KB
05.jpg 371KB
next.png 477B
07.jpg 435KB
04.jpg 299KB
prev.png 476B
08.jpg 318KB
10.jpg 227KB
logo.png 8KB
03.jpg 246KB
00.jpg 278KB
06.jpg 368KB
02.jpg 247KB
09.jpg 232KB
模板.html 2KB
示例.html 2KB
v-for指令.html 1KB
v-model指令.html 1KB
v-if指令.html 1KB
v-bind指令.html 1KB
axios基本使用.html 2KB
v-show指令.html 1KB
v-text指令.html 812B
demo-悦听player
css
index.css 6KB
images
shutoff.png 1KB
person01.png 5KB
disc.png 44KB
line01.png 1KB
player_bar.png 11KB
player_title.png 1KB
zoom.png 2KB
cover.png 190KB
table.png 3KB
bg.jpg 57KB
line.png 1KB
play.png 3KB
line02.png 1KB
person.png 4KB
js
main.js 3KB
模板.html 3KB
示例.html 6KB
v-on补充.html 987B
demo-记事本
css
index.css 7KB
img
black.png 8KB
js
example.js 450B
模板.html 2KB
示例.html 2KB
el挂载点.html 727B
v-html指令.html 622B
axios+vue.html 2KB
demo-天知道
css
reset.css 434B
index.css 2KB
img
logo.png 4KB
line.png 1020B
loading.gif 9KB
js
main.js 897B
模板.html 2KB
示例.html 3KB
共 69 条
- 1
步、步、为营
- 粉丝: 1w+
- 资源: 12
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0