vue-axios音乐播放（API）

最新推荐文章于 2022-12-18 18:46:43 发布
最新推荐文章于 2022-12-18 18:46:43 发布
阅读量980 收藏 6
点赞数 1
分类专栏： web前端 案例 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yfy538/article/details/114834267
版权

在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

功能：查询歌曲，播放歌曲，播放MV，显示海报，显示评论，显示评论图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<style>
*{
	margin: 0;
	padding:0;
	list-style: none;
	border:none;
	/*去除得到焦点外边框*/
	outline: none;
	/*怪异盒子模型*/
	box-sizing: border-box;
}
html,body{
	width: 100%;
}
i{
	/*去除斜体*/
	font-style:normal;
	/*图标名字*/
	font-family: 'icomoon';
}
/*图标样式*/
@font-face {
	/*图标名字*/
  font-family: 'icomoon';
  /*图标地址*/
  src:  url('fonts/icomoon.eot?oetgau');
  src:  url('fonts/icomoon.eot?oetgau#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?oetgau') format('truetype'),
    url('fonts/icomoon.woff?oetgau') format('woff'),
    url('fonts/icomoon.svg?oetgau#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
#box{
	width: 100%;
	height: 100vh;
	/*背景渐变*/
	background: linear-gradient(-45deg,rgba(198,92,104,.6),rgba(246,126,63,0.8));
	/*使MP3播放面与MV图层重叠*/
	position: relative;
}
#content{
	width: 800px;
	height: 500px;
	/*使MP3播放固定页面，不影响MV布局*/
	position: fixed;
	left: 50%;
	top: 50%;
	transform:translate(-50%,-50%);
}
/*头部搜索栏*/
.play-head{
	width: 100%;
	height: 50px;
	background-color: skyblue;
	border-radius: 5px 5px 0 0;
}
.play-head .logo{
	color: #fff;
	float: left;
	font-weight: bold;
	font-size: 18px;
	line-height: 50px;
	margin-left:20px; 
}
.play-head .nav{
	float: right;
	line-height: 50px;
	margin-right: 20px;
	/*定位搜索图标*/
	position: relative;
}
.play-head .nav input{
	height: 30px;
	width: 200px;
	border-radius: 15px;
	padding-left: 20px;
	padding-right: 30px; 
	overflow: hidden;
}
.play-head .nav span{
	/*图标名*/
	font-family: 'icomoon';
	color:#959595;
	/*定位搜索图标*/
	position: absolute;
	right: 10px;
	top: 2px;
}

/*身体部位*/
.play-body{
	width: 100%;
	height: 400px;
	background-color: rgba(255,255,255,.2);
}
.play-body .play-body-left{
	height: 100%;
	width: 25%;
	/*background-color: red;*/
	float: left;
	/*溢出滚动条部位隐藏*/
	overflow: hidden;
}
.play-body-left ul{
	padding-top:10px;
	width: 120%;
	height: 100%;
	margin: 0 auto;
	/*滚动页面*/
	overflow: auto;
}
.play-body-left ul li{
	height: 45px;
	line-height: 45px;
	padding-left: 10px;
	/*横向布局*/
	display: flex;
	margin:0 10px;
	margin-right: 30px;
}
.play-body-left ul li span{
	padding-left:5PX;
	width: 125PX;
	/*字体溢出隐藏*/
	overflow: hidden;	
}
.play-body-left ul li i:nth-child(1){
	cursor: pointer;
	color: red;
}
.play-body-left ul li i:nth-child(2){
	display: none;
}
.play-body-left ul li i:last-child{
	height: 45px;
	line-height: 45px;
	padding-left: 5px;
	cursor: pointer;
}
.play-body-left ul li:nth-child(odd){
	background-color: rgba(236,236,236,0.4);
	border-radius: 5px;
}

/*content-content*/
.play-body .play-body-midder{
	height: 100%;
	width: 50%;
	float: left;
	position: relative;
	box-shadow: -1px 0px 2px rgba(236,236,236,0.4),1px 0px 2px rgba(236,236,236,0.4);
}
.anim{
	animation:rota 4s infinite linear;
}
@keyframes rota{
	0%{transform: rotate(0deg)}
	100%{transform: rotate(360deg)}
}
.play-body-midder span{
	display: block;
	width: 250px;
	height: 250px;
	border:50px solid black;
	/*opacity: 0.2;*/
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
.play-body-midder img{
	width: 180px;
	border-radius: 50%;
	position: absolute;
	top: 28%;
	left: 28%;
}

/*content-right*/
.play-body .play-body-right{
	height: 100%;
	width: 25%;
	float: right;
	
	overflow: hidden;
}
.play-body-right .w{
	margin:10px 5px 0 10px;
	height: 100%;
	width: 106%;
}
.play-body-right .w ul{
	margin-top: 10px;
	width: 100%;
	height: 100%;
	overflow: auto;
}
.play-body-right ul li{
	margin-top: 5px;
	
}
.play-body-right img {
	width: 23%;
	border-radius: 50%;
	vertical-align: top;
}
.play-body-right span {
	overflow: hidden;
	display: inline-block;
	padding-left: 5px;
	width: 72%;
	min-height: 40px;
	font-size: 14px;
}
/*MP3播放*/
.play-fooder{
	width: 100%;
	height: 50px;
	background-color: #ececec;
}
.play-fooder audio{
	width: 100%;
	height: 50px;
}

#video{
	position: relative;
	z-index: 1;
	width:100%;
	height: 100vh;
	display: none;
}
.display{
	display: block !important; 
}
#video video{
	width: 800px;
	height: 500px;
	background-color: black;
	transform: translate(70%,38%);
	position: absolute;
	z-index: 2
}
#video span{
	display: inline-block;
	width:100%;
	height: 100vh;
	background-color: #ccc;
	position: absolute;
	z-index: 1
}
</style>
<body>
	
<div id="box">
	<div id="content">
		<div id="play">
			<!-- Mp3头部页面 -->
			<div class="play-head">
				<div class="logo">畅听音乐</div>
				<div class="nav">
					<input type="text"/ v-model="name" @keyup.enter="getkeyword">
					<span></span>
				</div>
			</div>

			<!-- Mp3内容页面 -->
			<div class="play-body">
				<!-- Mp3内容页面-左边 -->
				<div class="play-body-left">
					<ul>
						<li v-for="item in muisclist">
							<i @click="getMusic(item.id)"></i>
							<i></i>
							<span>{{item.name}}</span>
							<i @click="getmv(item.mvid)" v-if="item.mvid!=0"></i>
						</li>
					</ul>
				</div>
				<!-- Mp3内容页面-中间 -->
				<div class="play-body-midder" >
					<span></span>
					<img :src="musicimage" :class="{anim:isunplay}">
				</div>
				<!-- Mp3内容页面-右边 -->
				<div class="play-body-right">
					<div class="w">
						<h3>热门留言</h3>
						<ul>
							<li class="nav" v-for="item in usertell">
								<img :src="item.user.avatarUrl" alt="">
								<span>{{item.content}}</span>
							<li>
						</ul>
					</div>
				</div>
			</div>

			<!-- Mp3尾部页面 -->
			<div class="play-fooder">
				<audio  :src="musicUrl" controls="controls" autoplay @play="play" @pause="pause"></audio>
			</div>
		</div>
	</div>
	
	<!-- mv播放页面 -->
	<div id="video" :class="{display:isplay}" >
		<video :src="mvUrl" controls="controls" ></video>
		<span @click="hid" ></span>
	</div>
</div>
<script>
var vm = new Vue({
	el:'#box',
	data:{
		name:'',
		muisclist:[],
		musicUrl:'',
		mvUrl:'',
		isplay:false,
		isunplay:false,
		musicimage:'',
		usertell:[],
	},
	methods:{
		// 控制封面图旋转
		play(){
			this.isunplay = true;
		},
		pause(){
			this.isunplay = false;
		},
		// 控制MV的css隐藏
		hid(){
			this.isplay = false;
		},
		getkeyword(){
			var that =this;
			// 搜索歌曲
			// 请求地址：https://autumnfish.cn/search
			// 请求方式：get
			// 请求参数：keywords（查询关键词）
			// 响应内容：歌曲搜索结果
			axios.get("https://autumnfish.cn/search?keywords="+this.name).then(function(respontse){
				that.muisclist = respontse.data.result.songs
				console.log(respontse)
				console.log(respontse.data.result.songs)
			},function(err){console.log(err)})
		},
		getMusic(musicId){
			console.log(musicId)
			var that = this;
			
			// 歌曲播放接口
			// 请求地址：https://autumnfish.cn/song/url
			// 请求方式：get
			// 请求参数：id（歌曲id）
			// 响应内容：歌曲的url地址
			axios.get("https://autumnfish.cn/song/url?id="+musicId)
			.then(function(respontse){
				that.musicUrl=respontse.data.data[0].url;
				//console.log(respontse.data.data[0].url)
			},function(err){console.log(err)});

			// 歌曲封面接口
			// 请求地址：https://autumnfish.cn/song/detail
			// 请求方式：get
			// 请求参数：ids（歌曲id）
			// 响应内容：歌曲详情，包含页面信息
			axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
			.then(function(respontse){
				that.musicimage=respontse.data.songs[0].al.picUrl;
				console.log(respontse)
			},function(err){console.log(err)});

			// 留言接口
			// 请求地址：https://autumnfish.cn/comment/hot?type=0
			// 请求方式：get
			// 请求参数：id（id歌曲，type=0固定）
			// 响应内容：歌曲的热门评论
			axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId)
			.then(function(respontse){
				// 响应内容：歌曲的热门评论
				that.usertell=respontse.data.hotComments;
				console.log(respontse)
				},function(err){console.log(err)});
		},
		getmv(mvid){
			console.log(mvid)
			var that = this;
			// Mv接口
			// 请求地址：https://autumnfish.cn/mv/url
			// 请求方式：get
			// 请求参数：id（mvid为0，则没有mv）
			// 响应内容：mv地址
			axios.get("https://autumnfish.cn/mv/url?id="+mvid)
			.then(function(respontse){
				// 响应内容：mv地址
				that.mvUrl=respontse.data.data.url
				console.log(respontse)
			}
			,function(err){console.log(err)});
			// 控制MV的css显示
			that.isplay=true;
		}
	},
})
</script>
</body>
</html>
yfy538
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue&Axios制作音乐播放器(bilibili黑马程序员Vue入门学习记录)
xxxrsongseven的博客
04-09 5492
使用Vue制作一个音乐播放器 前言 第一次写，如有不足请指正！ 音乐播放器效果展示音乐播放器（密码：He371226）（域名出了点问题，临时使用） 学习链接：黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibili Vue Vue导入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 将vue导入进项目 Vue挂载 <div id="app
vue-axios使用详解
08-30
Vue-Axios 使用详解 Vue-Axios 是一个基于 Axios 的 Vue.js 插件，用于在 Vue 项目中实现 HTTP 请求。下面是 Vue-Axios 的使用详解： 一、GET 请求 在 Vue-Axios 中，GET 请求可以使用 `axios.get()` 方法实现。...
vue webapp之music（六）利用axios与后端接口代理请求歌单推荐数据
chaitong2204的博客
08-29 382
1.慕课网视屏是很早之前录制的，所以与现在build目录有所不同。 以下是自己总结的 在webpack.dev.conf.js搭建服务器 const express = require('express') const app = express() const apiRoutes = express.Router() //后端路由 app.use('/api', apiRoutes) ...
axios实现后端代理，请求qq音乐接口数据
JaneChelle
10-18 394
以下两篇文章有详细介绍： https://blog.csdn.net/qq_14988399/article/details/80692789 https://blog.csdn.net/tangxiujiang/article/details/80342465#commentsedit
8.Vue+axios音乐播放应用
qq_34620296的博客
12-11 890
效果如下 代码如下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &lt...
vue+axios音乐播放器
科技毒瘤君
09-04 596
数据全部动态生成，数据由接口提供axios介绍：Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。功能：从浏览器中创建 XML...
Vue-axios-pubsub-js：基于vue-axios和利用pubsub-js实现组件通信的前相互作用案例
02-04
本案例是调用GitHub官方提供的API，基于axios，pubsub-js实现一个演示，目的是让自己更加熟悉vue组件化开发思想，和前分离开发中调用接口来获取数据渲染页面。 本文最初发表在博客园，喜欢看博客的同学也可以前往---...
vue-axios + vue3-axios Axiso解决跨域访问完整源码
02-16
import VueAxios from 'vue-axios' import axios from 'axios' Vue.use(VueAxios, axios) ``` 3. 对于 Vue3 项目，安装 vue3-axios： ``` npm install @vue/axios ``` 在 main.js 或者 setup 函数中导入...
vue-axios-plugin-结合了axios和Vuejs的插件，使HTTP请求更加轻松。-Vue.js开发
05-27
import VueAxios from 'vue-axios-plugin' import axios from 'axios' Vue.use(VueAxios, axios) new Vue({ render: h => h(App) }).$mount('#app') ``` 这里，`Vue.use()`方法用于注册插件，同时传入...
vue-axios.zip
08-30
import VueAxios from 'vue-axios' import Axios from 'axios' Vue.use(VueAxios, Axios) ``` 这样，axios就被注入到了Vue原型链中，可以直接在Vue组件内使用`this.$axios`发起请求。 3. **请求封装** 使用...
vue 音乐播放器 视频播放器
03-17
更新上一个资源BUG,添加了网易云API,提供手机用户登录,添加朋友,MV,下载等核心功能.环境 : node.js , php, windows All . 需要下载node.js服务器 ,地址 https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi
vue调用语音播放的方法
10-16
主要为大家详细介绍了vue调用语音播放的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
003_Vue音乐播放器（音乐推荐列表API接口及调用）
友人C君的博客
10-16 2048
先来分享几个 音乐的API接口 酷狗、QQ音乐、网易云API接口 酷狗API详细 那么Vue使用axios访问这些API接口的时候 会得到后台返回的数据，根据这个数据，先了解其数据格式，比如你需要的播放链接，歌曲名称等，一般来说都是json格式，数组格式，或者字符串格式。 有时候，Vue访问的API接口跨域了，可以通过以下方式解决跨域问题。 在项目目录中congfig文件夹下的in...
基于Vue和Axios的小型在线音乐播放器
MJOY791270505的博客
04-25 661
基于Vue和Axios的小型在线音乐播放器 文章目录基于Vue和Axios的小型在线音乐播放器思路：一、音乐查询二、音乐播放三、歌曲封面四、歌曲评论五、播放动画六、播放MV总结 思路： 一个音乐播放器的功能： 1、歌曲信息：封面，歌名，专辑，作者 2、控制器：上一首，下一首，暂停播放 3、进度条：总进度，缓存进度，播放进度，播放时间，总时间，进度拖拽按钮 4、播放方式：单曲循环，顺序播放，随机播放，列表循环 5、声音：总声音长度，当前声音长度，声音长度拖拽按钮 6、播放列表：序号，操作，歌名，歌手，专
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
weixin_72322475的博客
12-18 4436
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)。该案例需要更换视频中老师的 搜索音乐接口的请求地址 和 获取MV接口的参数，为本文中的地址和参数。！！！本文内含有有声音的效果展示视频，播放的时候注意音量！！！本文案例修改了原代码的BUG：如果退出MV遮罩层之前，不暂停MV的播放。则退出MV之后，依然会有MV中的声音继续播放。
使用vue.js+element ui制作音乐播放器
少为人的博客
04-24 1231
功能包括 1.歌曲播放，暂停 2.切换上下首 3.显示歌词（自动滑动） 4.搜索音乐（分页） 5.加载评论 6.列表循环，单曲循环，列表随机 7.拉动进度条歌词自动滑动 更多功能可查看api文档https://autumnfish.cn/ 外部文件引用 1.element.min.js 2.element.min.css 3.axios.min.js 4.axios.min.js
axios上传视频或音频时后端接口405
sunny327的专栏
05-20 2140
最近在做一个后台管理项目，视频上传到腾讯云点播，音频上传到对象存储。这就需要区分是视频或音频了。 当上传音频时调用后端给的接口，上传到对象存储。 这里遇到的问题主要是自己对axios不太熟练，导致后台接口返回405， HTTP Status 405 – Method Not Allowed TypeStatus Report MessageRequest method 'GET' n...
3、Vue案例：音乐播放器（Axios发送AJAX请求）
ShawnYue_08的博客
08-03 403
<!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>天天悦
vue 请求api一行_vue+axios音乐播放器
weixin_39796116的博客
11-27 170
数据全部动态生成，数据由接口提供axios介绍：Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。功能：从浏览器中创建 XMLHttpRequest从 node.js 中创建 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换 JSON 数据客户端支持防止 XSRF 攻击示例代码：执行一个...
vue-axios实现异步请求
最新发布
09-27
import VueAxios from 'vue-axios' import axios from 'axios' Vue.use(VueAxios, axios) ``` 接下来，你可以在组件中使用vue-axios进行异步请求。例如，在一个组件的created生命周期中发送一个GET请求： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值