vue音乐播放器

最新推荐文章于 2024-04-12 10:02:16 发布
最新推荐文章于 2024-04-12 10:02:16 发布
阅读量184 收藏 1
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46244909/article/details/119076793
版权

实现方法：
1，实现axios通信技术向api获取数据。
2，利用vue实现简单功能
3，截图
在这里插入图片描述

背景图片全屏显示：
.bg {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    overflow: auto;
	}
<div class="bg"style="background-image: url(1.jpg)"></div>

透明度：
background-color: rgba(255, 255, 255, .8);

弧度：
border-radius: 20px;

输入框隐藏边框：
border:none;
outline:medium;

文本垂直水平居中：
text-align: center;
line-height: 50px;设置高度

设置滑块滑动：
overflow-y: auto;
max-height: 350px;

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阿鹏音乐</title>
	</head>
	<style>
	*{margin: 0;padding: 0;}
	.bg {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    overflow: auto;
	}
	.bg .music{    
		width: 50%;
		margin: auto;
		margin-top: 6%;
		height: 500px;
		background-color: rgba(255, 255, 255, .8);
		border-radius: 20px;
	}
	.bg .music .header{
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		background-color: rgba(25, 55, 250, .8);
		border-radius: 20px 20px 0 0 ;
	}
	.search{
		margin-left: auto;
		border-radius: 20px;
		height: 30px;
	}
	input{
		border:none;
		outline:medium;
	}
	.content{
		display: flex;
		justify-content: space-between;
	}
	.right ul li{
		width: 300px;
		height: 50px;
		background-color: rgba(25, 55, 250, .8);
		list-style: none;
		margin: 10px;
		text-align: center;
		line-height: 50px;
		border-radius: 20px;
		}
	.right ul{
		overflow-y: auto;
		max-height: 350px;			
		}
		button{
		margin-left: -100px;
		}
		.foot{
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		background-color: rgba(243 243 245 );
		border-radius: 0 0  20px 20px ;
		}
	.play{
		width: 100%;
		height: 55px;
		outline: none;
		padding: 12.5px 0;
	}
	.mobble{
		margin-right: 80px;
	}
	</style>
	<body>
		<div class="bg"style="background-image: url(1.jpg)">
			<div class="music" id="player">
				<div class="header">
					<h1>&nbsp;&nbsp;阿<span style="font-size: 20px;margin: 10px;">鹏music</span></h1>
					<input
					 autocomplete="off" v-model="query"
					 @keyup.enter="searchMusic"
					 type="text" placeholder=".❤❤❤搜索音乐❤❤❤" id="search" class="search"/>
				</div>
				<div class="content">
					<div class="right">
						<h2 style="margin-left: 65px;">音乐列表</h2>
						<ul>
							<li v-for="item in musicList"><a  href="javascript:;" @click="playMusic(item.id)">📽播放</a>&nbsp;{{ item.name }}</li>
						</ul>
					</div>
					<div class="mobble">
						<div>
							<img src="2.png" />
						</div>
						<div>
							<img src="3.png" />
						</div>
						
					</div>
				</div>
				<div class="foot">
					<audio controls autoplay="autoplay" :src="musicUrl" class="play">
						您的浏览器不支持audio，请更新浏览器！
					</audio>
				</div>
			</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		var app = new Vue({
			el:"#player",
			data:{
				query:"",
				musicList:[],
				musicUrl:""
			},
			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){})
				},
				playMusic:function(musicId){
					var that = this;
					axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function(response){
						//console.log(response);
						that.musicUrl = response.data.data[0].url;
					},function(err){})
				}
			},
		})
	</script>
</html>
花小猪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 音乐播放器 视频播放器
03-17
更新上一个资源BUG,添加了网易云API,提供手机用户登录,添加朋友,MV,下载等核心功能.环境 : node.js , php, windows All . 需要下载node.js服务器 ,地址 https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi
vue基础音乐播放器~
12-21
用vue基础做的音乐播放器~
使用vue制作一个属于自己的音乐播放器
Baymax的博客
10-28 2680
前言 其中在想在博客中添加音乐播放功能的时候，也考虑也其它音乐播放器插件如APlayer,页面和功能都能满足要求。而且播放页面也很好看，功能几乎都有。但是我不需要那么多功能，所以我自己尝试制作一个属于自己博客的音乐播放器。页面布局及样式参考APlayer 案例预览 <style> .isshow { left: -66px !important; } .music-row { height: 66px;
推荐一款开源音乐播放器：Vue-Music-Player
gitblog_00095的博客
04-12 427
推荐一款开源音乐播放器：Vue-Music-Player 项目地址:https://gitcode.com/microzz/vue-music-player 项目简介 Vue-Music-Player 是一个基于 Vue.js 构建的轻量级音乐播放器组件，它提供了一套完整的音乐播放解决方案，包括播放、暂停、切换歌曲、调整音量等基本功能，并且拥有美观的界面和丰富的自定义选项。 技术分析 核心技术栈：...
【笔记】vue实现音乐播放器
劲枫的博客
01-17 2064
1、eslintrc.js中添加符合编辑器的规则，参照这里 2、在build/webpack.base.conf.js中找到resolve设置别名，方便在引用路径的时候使用 3、安装依赖：babel-runtime（转移es6语法），fastclick（消除移动端300ms点击延迟），babel-polyfill（可以用es6的api） 4、npm install jsonp再封装成pr...
vue中播放音乐
weixin_30565327的博客
09-20 435
第一种： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"...
使用vue实现简易的音乐播放器
qq_42335551的博客
08-06 3913
使用的是font-awesome字体图标 需要先安装 npm install font-awesome --save。代码中使用的ivewUI前端框架。
第七章 Electron Vue3实现音乐播放器
Etc.End的博客
06-09 3280
一个音乐播放器应该具备播放、暂停、上一首、下一首、播放模式（单曲循环、列表循环、顺序播放……）。除了这些比如还可以扩展进度条的展示、拖拽、音量大小的调节，如果资源允许的话可以进行一些歌词的展示等等。由于博主爬虫的资源没有合适的歌词，所以歌词这块功能暂时没有进行开发，感兴趣的小伙伴可以自行去完善。
在VUE中播放音频（audio介绍与使用）
热门推荐
qq_45820271的博客
08-25 3万+
本文介绍了如何使用audio标签播放音频，并在vue2,vue3以及uniapp中使用
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
weixin_72322475的博客
12-18 4037
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)。该案例需要更换视频中老师的 搜索音乐接口的请求地址 和 获取MV接口的参数，为本文中的地址和参数。！！！本文内含有有声音的效果展示视频，播放的时候注意音量！！！本文案例修改了原代码的BUG：如果退出MV遮罩层之前，不暂停MV的播放。则退出MV之后，依然会有MV中的声音继续播放。
Vue播放音频文件（声音）
publicman_的博客
08-31 1万+
Vue播放音频文件
vue实现音乐播放器
angelia_w的博客
03-29 997
vue实现音乐播放器
Vue2.0音乐播放器
05-14
四个页面分类(推荐,排行,路由,我的) 基本样式结构搭建 颜色暂定 rgb(105, 25, 51) 首页页 : 1.轮播图 2.搜索 3.歌手分类 4.歌曲分类 5.新歌速递 6....排行页 : 1....歌单页 : 1....我的页面 : 个人设置部分 (细节待定 暂为空)
crabMusic:vue 音乐播放器
05-15
crabMusicvue 音乐播放器（注意，运行时候一定要放到英文文件夹下，不要用中文，容易出现错误）首先保证运行的电脑进行了vue环境配置——然后 vue install（配置环境依赖）——最后vue run dev进行项目运行
用vue做一个音乐播放器
weixin_55510188的博客
03-15 652
开源协议MIT License github: https://github.com/huangweizhi/xz-music.git gitee: https://gitee.com/weizhihuang/xz-music.git 使用了开源的网易云音乐 NodeJS 版 API vue全家桶 vite + vue3 + vue-router4 +pinia2
使用vue简单实现音乐播放器
zovz的博客
08-18 7077
音乐播放器实战 实现效果 在搜索框中搜索歌曲，可以点击“搜索”按钮或者摁下回车键开始搜索 返回的结果会在左边显示，点击“播放”按钮开始播放，有MV的歌曲将会显示“播放MV”的按钮 选择一首歌曲开始播放时，右边会出现该歌曲的热门评论，有评论者的id，头像和内容 音乐在播放时，歌曲封面会360度转动，点击暂停后，封面也会停止 项目准备 音乐数据的axios接口： 使用axios返回response数据时，可以先使用console.log(response)在控制台打印输出，需要在页面展示
Vue 综合应用 -网页音乐播放器
X_188773的博客
06-23 451
GETkeywords查询关键字响应：歌曲搜索结果 （ 包含要使用的歌曲 idmvid。
基于vue的音乐播放系统
weixin_42605397的博客
02-11 342
Vue 是一个前端 JavaScript 框架，您可以使用它构建一个基于 Web 的音乐播放系统。下面是一个简单的流程： 安装 Vue CLI：Vue CLI 是 Vue 的命令行界面，您可以使用它创建和管理 Vue 项目。 创建 Vue 项目：使用 Vue CLI 创建一个新的 Vue 项目。 构建音乐播放器界面：使用 Vue 组件和指令构建音乐播放器的界面。 获取音乐数据：使用 API...
vue音乐播放器代码
最新发布
05-08
Vue音乐播放器代码的实现过程需要较为详细的代码解释，我在这里给您提供一份开源的Vue音乐播放器项目，您可以参考其中的代码实现方式。 这个开源项目是一个基于Vue.js和NeteaseCloudMusicApi的在线音乐播放器，实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值