vuejs之构建简易音乐播放器
一步步来,先看下目前的样式:
<!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>悦听player</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'>
<ul class="song_list">
<li><a href="javascript:;"></a> <b>你好</b> <!----></li>
<li><a href="javascript:;"></a> <b>你好</b> <span><i></i></span></li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" class="playing">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img src="images/cover.png" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl >
<dt><img src="./images/person.png" alt=""></dt>
<dd class="name">盐焗西兰花</dd>
<dd class="detail">
绝对值得一听,吹爆
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<audio ref='audio' src="" controls autoplay loop class="myaudio"></audio>
</div>
<div class="video_con" style="display: none;">
<video controls="controls"></video>
<div class="mask" ></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>
</body>
</html>
效果:
1、搜索音乐并显示
在</body>标签前加上:
<script>
var vue = new Vue({
el: "#player",
data: {
musicList: [],
query: '',
},
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;
},
function (err) { }
);
},
},
});
</script>
其中query用于查询,使用v-model绑定。musicList用于得到搜索后的音乐列表。在浏览器的console中:
歌曲都是在data--result-songs下的。
记得将占位用的“你好”替换为:
<li v-for="item in musicList">
<a href="javascript:;"></a>
<b>{{item.name}}</b>
<!---->
</li>
只需要一个即可,利用v-for进行遍历获取。
当前效果:
搜索名字显示音乐列表。
2、音乐播放
(1)获取歌曲地址
在data中新加入一个musicUrl用于存储歌曲地址。在methods中加入:
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) { }
);
},
在这里加入:通过传入歌曲的id,发送请求之后得到歌曲的地址。有了歌曲的地址才能够真正地播放歌曲。
<li v-for="item in musicList">
<a href="javascript:;" @click="playMusic(item.id)"></a>
<b>{{item.name}}</b>
<!---->
</li>
在控制台可以看到,歌曲是在data.data[0]中的url。
将musicUrl地址放入到播放器中:
<div class="audio_con">
<audio ref='audio' :src="musicUrl" controls autoplay loop class="myaudio"></audio>
</div>
此时效果:搜索之后点击一首歌的播放,即可进行播放了。
3、歌曲封面
首先在data中新加一个用于存储封面地址的musicCover,然后在playMusic方法中加入一个函数:
// 歌曲详情获取
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) { }
);
可以看到封面信息是在data.songs.al下的picUrl中。
接着将url地址放入到唱片那里:
<!-- 歌曲信息容器 -->
<div class="player_con" class="playing">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="musicCover" class="cover autoRotate" />
</div>
看一下效果:
封面已经加上去了。
4、获取评论信息
在data中加入hotComments用于存储评论列表。在playMusic中加入获取评论的函数。
// 歌曲评论获取
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;
},
function (err) { }
);
在相关位置填上信息:
<div class='comment_list'>
<dl v-for="item in hotComments">
<dt>
<img :src="item.user.avatarUrl" alt="">
</dt>
<dd class="name">{{item.nickname}}</dd>
<dd class="detail">
{{item.content}}
</dd>
</dl>
</div>
查看效果:
5、播放动画
监听音乐播放、监听音乐暂停、操作类型。
在data中加入一个isPlaying用于判断是否是暂停还是播放状态,默认为false。在methods中新增两个方法用于更改状态:
// 歌曲播放
play: function () {
// console.log("play");
this.isPlaying = true;
},
// 歌曲暂停
pause: function () {
// console.log("pause");
this.isPlaying = false;
},
在播放时绑定:
<div class="audio_con">
<audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
</div>
为歌曲信息容器添加属性,动态判断playing的值
<!-- 歌曲信息容器 -->
<div class="player_con" class="playing" :class="{playing:isPlaying}">
如果是true,除法css进行播放动画展示,唱片旋转,针头移到唱片上。
看下效果:
6、mv播放
(1)在开始获取歌曲列表时有一个mvid属性,如果它为0表示没有mv,我们可以进行判断,如果有mv,则显示mv小图标。
(2)data中新增mvUrl用于获取mv地址,新增isShow用于显示和关闭mv。新增一个playMv方法,用于播放mv。
(3)点击播放mv,将遮罩层isShow置为true,弹出mv播放,点击除mv之外的遮罩层,关闭mv。
// 播放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;
},
function (err) { }
);
},
// 隐藏
hide: function () {
this.isShow = false;
}
<div class="video_con" v-show="isShow" style="display: none;">
<video :src="mvUrl" controls="controls"></video>
<div class="mask" @click="hide"></div>
</div>
看下效果:
点击倔强的mv
最后是完整代码:
<!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>悦听player</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'>
<ul class="song_list">
<li v-for="item in musicList">
<a href="javascript:;" @click="playMusic(item.id)"></a>
<b>{{item.name}}</b>
<span v-if="item.mvid!=0" @click="playMv(item.mvid)">
<i></i>
</span>
<!---->
</li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" class="playing" :class="{playing:isPlaying}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="musicCover" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="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.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="isShow" style="display: none;">
<video :src="mvUrl" controls="controls"></video>
<div class="mask" @click="hide"></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>
var vue = new Vue({
el: "#player",
data: {
musicList: [],
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;
},
function (err) { }
);
},
// 歌曲播放
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;
},
function (err) { }
);
},
// 隐藏
hide: function () {
this.isShow = false;
}
},
});
</script>
</body>
</html>
- Go 语言Map(集合)
- 简单的java实验,涉及到 类继承以及接口问题,方法体的重写(区别于重载)
- java 快速求素数
- 狄斯奎诺(dijkstra 模板)
- HDUOJ---汉洛塔IX
- 小错误系列
- HDUOJ-----4510 小Q系列故事——为什么时光不能倒流
- HDUOJ----4509湫湫系列故事——减肥记II
- HDUOJ-----4506小明系列故事——师兄帮帮忙
- HDUOJ---4503 湫湫系列故事——植树节
- HDUOJ----4504 威威猫系列故事——篮球梦
- 推荐一款MySQL优化工具
- HDUOJ----4502吉哥系列故事——临时工计划
- HDUOJ----4004The Frog's Games(二分+简单贪心)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
- Python如何实现后端自定义认证并实现多条件登陆
- safari下载文件自动加了html后缀问题
- yii2 上传图片的示例代码
- DataFrame.groupby()所见的各种用法详解
- keras训练曲线,混淆矩阵,CNN层输出可视化实例
- Pandas缺失值2种处理方式代码实例
- ThinkPHP5 的简单搭建和使用详解
- PyInstaller运行原理及常用操作详解
- php使用curl模拟浏览器表单上传文件或者图片的方法
- Python轻量级web框架bottle使用方法解析
- 详解在YII2框架中使用UEditor编辑器发布文章
- 基于python和flask实现http接口过程解析
- Python xpath表达式如何实现数据处理
- Python脚本破解压缩文件口令实例教程(zipfile)