Vue+axios应用---悦听播放器

最新推荐文章于 2023-01-25 18:44:01 发布
最新推荐文章于 2023-01-25 18:44:01 发布
阅读量273 收藏 3
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46186155/article/details/119304016
版权

效果图

在这里插入图片描述

功能分析

1、在右上角搜索框搜索歌手或歌曲，即可在左侧显示内容，若歌曲有mv还可以显示图标，点击改图标可以播放mv。
2、播放音乐时可以显示封面和热门评论。

功能实现

1、通过axios调用网易云各功能接口搜索并返回信息。
2、对信息进行处理并显示。
3、各详细功能可以使用vue的v指令实现。

代码

代码地址：GitHub地址

向歌啊
关注
专栏目录
基于vue.js的网络音乐播放器源码 悦听播放器源码
07-27
本案例是对vue基础的加强练习，包含了vue基础指令的运用，如v-bing v-for等，同时也是对原生的html，css加以巩固，学编程，重在练习，本案例还有很多需要完善的地方，希望与大家多多交流。
vue综合项目——悦听音乐播放器
wcy8733996wcy的博客
01-28 4586
B站看完一位老师讲的vue项目（悦听），是一个音乐播放器，花了两天时间完成了这个项目，第一次将前几天学习的vue知识应用到项目中，虽然有些地方还需要完善，但是通过这几天的学习，无论是vue入门，还是对html、css知识的复习，都很有收获，很有成就感。之前，每次网页布局的时候，有很多次，仅仅改变了一个元素的属性，页面整体发生了“很奇怪”的变化，很有挫败感，这几天重新学习了css中有关文档流、浮动、定位、弹性盒字等知识，感觉豁然开朗。 前两天学习了vue，仅仅算是入门了，主要是一些vue指令和axios的使用
5案例带你快速入门Vue.js：综合应用--悦听播放器
薛定谔的猫
01-25 272
服务器返回的数据比较复杂时，获取的时候需要注意。的方式设置类名，类名生效与否取决于后面值的。本地无法获取的数据，基本都会有对应的。的结果，对于不用的数据也需要关注。事件会在音频播放的时候触发。事件会在音频暂停的时候触发。快速定位到需要操纵的元素。响应式的数据都需要定义在。不同的接口需要的数据是。页面结构复杂之后，通过。
悦听player音乐播放器
curacaolb的博客
04-06 3356
悦听player音乐播放器： 悦听player 1.歌曲搜索 2.歌曲播放 3.歌曲封面 4.歌曲评论 5.播放动画 6.mv播放 音乐查询： 根据关键字查询你想听的歌 1.按下回车进行歌曲搜索(v-on .enter) 2.查询数据(axios 接口 v-model) 3.渲染数据(v-for 数组 that) 歌曲搜索接口： 请求地址： https://autumnfish.cn/sear...
悦听(自己实现).rar
04-06
在b站看完vue教程的悦听音乐播放器案例，有很大的收获，这里自己参考并写的代码
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
10-30
首先，Vue-Router是Vue.js官方的路由管理器，它允许我们在单页面应用（SPA）中定义和管理不同的路由，实现页面间的平滑切换。通过设置路由规则，我们可以根据URL路径动态加载对应的组件，从而实现页面的无刷新跳转。...
使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + exp.zip
最新发布
02-23
在构建现代Web应用程序时，Vue.js是一个非常流行的前端框架，Vue 2.x是其稳定且广泛采用的版本。本项目使用Vue 2.x与一系列工具和技术进行集成，以实现一个功能丰富的SPA（单页应用程序）。以下是这个项目所涉及的...
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
05-23
Vue2项目是一个基于Vue.js框架的前端开发应用，它提供了构建用户界面的高效工具。Vue2引入了许多增强功能，如虚拟DOM、组件化、指令优化等，使得开发更灵活、性能更优。在这个项目中，Vue2是核心，用于创建可复用、...
vue3+电商后台管理系统+elementplus+axios
07-04
在这个电商后台管理系统中，Vue3是基础架构的核心，用于构建整个应用的视图层。 ElementPlus 是一套基于 Vue3 的高质量UI组件库，它继承了 Element UI 的设计理念，提供了丰富的组件，如表格、按钮、输入框、通知等...
Vue+Electron+Vue-router+Vuex+Axios+Element-UI全家桶开发模式编写前端展示与交互界面
10-20
在"Vue+Electron+Vue-router+Vuex+Axios+Element-UI全家桶开发模式"中，首先，Vue.js作为基础框架，用于构建应用的核心结构和视图。Vue-router负责管理应用的路由，定义各个页面间的导航逻辑。Vuex则用于管理全局...
大视频上传 分片及显示进度 vue
你好的博客
09-27 693
封装一个js文件 /* * @Descripttion: * @version: * @Author: xumingcai * @Date: 2020-04-15 17:58:03 * @LastEditors: xumingcai * @LastEditTime: 2020-04-20 16:22:45 */ import SparkMD5 from 'spark-md5'; import axios, { CancelToken, Cancel} from 'axios'; impor
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
weixin_72322475的博客
12-18 4805
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)。该案例需要更换视频中老师的 搜索音乐接口的请求地址 和 获取MV接口的参数，为本文中的地址和参数。！！！本文内含有有声音的效果展示视频，播放的时候注意音量！！！本文案例修改了原代码的BUG：如果退出MV遮罩层之前，不暂停MV的播放。则退出MV之后，依然会有MV中的声音继续播放。
七、VUE基础——悦听音乐播放器案例（vue+axios）
qq_41841658的博客
04-06 2183
在b站看完vue教程的悦听音乐播放器案例，有很大的收获，这里自己总结一下，由于之前不太理解弹性盒子的知识，又去b站看了另一位老师的课，也将其所给的资源下载下来发布在博客中：弹性盒子flex 首先对界面功能进行分析，从上到下是搜索栏、主体部分、音频播放进度条；其中主体部分昨从到右分为音乐播放列表、黑胶碟片的歌曲图片、留言列表。 一、功能总结 歌曲搜索：输入歌曲的相关内容按回车键搜索数据；具体步骤为按下回车-->查询数据-->渲染数据 歌曲播放 歌曲封面 歌曲评论 播放动画 mv
基于Vue和Axios的小型在线音乐播放器
MJOY791270505的博客
04-25 679
基于Vue和Axios的小型在线音乐播放器 文章目录基于Vue和Axios的小型在线音乐播放器思路：一、音乐查询二、音乐播放三、歌曲封面四、歌曲评论五、播放动画六、播放MV总结 思路： 一个音乐播放器的功能： 1、歌曲信息：封面，歌名，专辑，作者 2、控制器：上一首，下一首，暂停播放 3、进度条：总进度，缓存进度，播放进度，播放时间，总时间，进度拖拽按钮 4、播放方式：单曲循环，顺序播放，随机播放，列表循环 5、声音：总声音长度，当前声音长度，声音长度拖拽按钮 6、播放列表：序号，操作，歌名，歌手，专
2020 零基础 Vue综合应用 教开发音乐播放器—悦听（激发编程乐趣）【整理+源码】
超逸の学习技术博客
01-14 5735
文章目录1、引言2、音乐播放器完整版效果图如下：3、接口引用4、示例代码5、结束语 1、引言 这是Vue学习的综合应用篇，教你开发一个音乐播放器，能听歌，能看热门留言，能看mv，开发主要是以下环节： ① 歌曲搜索 ② 歌曲播放 ③ 歌曲封面 ④ 歌曲评论 ⑤ 播放动画 ⑥ mv播放 2、音乐播放器完整版效果图如下： 3、接口引用 3.1:歌曲搜索接口 请求地址:htt...
vue综合项目--悦听播放器
qq_50896786的博客
05-26 726
1、实现要求 2、相关接口 1.歌曲搜索接口 请求地址:https://autumnfish.cn/search 请求方法:get 请求参数:keywords(查询关键字) 响应内容:歌曲搜索结果 2.歌曲url获取接口 请求地址:https://autumnfish.cn/song/url 请求方法:get 请求参数:id(歌曲id) 响应内容:歌曲url地址 3.歌曲详情获取 请求地址:https://autumnfish.cn
基于Vue和axios的音乐播放器——悦听音乐效果展示及代码分享
qq_45654741的博客
02-27 1093
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
vue项目，解决ios下audio无法播放问题
热门推荐
Helen
05-21 1万+
最近在做一个关于aduio的项目，奈何audio在pc端能正常播放，在ios端确无法播放，着实踩了不少的坑！！！ 也看了不少的网上的教程，最后的实现结果如下： 1、html代码 // html <audio id="audio" :src="src" ref="audio" @timeupdate="updateTime" >该浏览器不支持audio属性</audio> ...
2021年基于VUE开发的一套移动端APP小说 听书AI男女多种 支持云端存储书籍记录
tuonioooo
08-26 1406
2021年基于VUE开发的一套移动端APP小说 前端架构主要采用： "axios": "^0.21.1", "better-scroll": "^2.1.1", "core-js": "^3.6.5", "css-vars": "^2.3.0", "date-fns": "^2.21.1", "lodash": "^4.17.21", "mobile-detect": "^1.4.4", "storejs": "^1.1.0", "uuid": "^8.3.2", "vant": "^2.12..
vue+axios+el-upload实现.csv文件上传的例子
07-13
当然可以！以下是一个使用Vue、Axios和Element UI的例子，演示如何实现.csv文件的上传： 首先，确保你已经安装了Vue、Axios和Element UI。你可以通过以下命令进行安装： ```bash npm install vue axios element-ui ``` 接下来，创建一个Vue组件，比如命名为Upload.vue。在该组件中，你可以使用`el-upload`组件来实现文件上传，`axios`来发送请求： ```vue <template> <div> <el-upload class="upload-demo" action="/upload" :on-success="handleSuccess" :before-upload="beforeUpload" :auto-upload="false" accept=".csv" > <el-button slot="trigger" size="small" type="primary">选择文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传</el-button> <div slot="tip" class="el-upload__tip">只能上传.csv文件</div> </el-upload> </div> </template> <script> import axios from 'axios'; export default { methods: { handleSuccess(response, file, fileList) { // 文件上传成功的处理逻辑 console.log(response); }, beforeUpload(file) { // 文件上传前的逻辑处理 console.log(file); }, upload() { // 手动触发文件上传 this.$refs.upload.submit(); } } } </script> <style scoped> .upload-demo { display: inline-block; margin-top: 20px; } </style> ``` 在上述代码中，`el-upload`组件用于实现文件上传，`action`属性指定了上传文件的目标地址，`:on-success`属性指定了文件上传成功后的回调函数，`:before-upload`属性指定了文件上传前的逻辑处理函数，`:accept`属性指定了只能上传.csv文件。 在`handleSuccess`函数中，你可以处理上传成功后的逻辑，比如从服务器返回的响应中获取上传后的文件信息。 在`beforeUpload`函数中，你可以对上传的文件进行一些验证，比如文件类型、大小等。 在`upload`函数中，我们通过`this.$refs.upload.submit()`来手动触发文件上传。 最后，在你的Vue应用中使用该组件即可： ```vue <template> <div> <upload></upload> </div> </template> <script> import Upload from './Upload.vue'; export default { components: { Upload } } </script> ``` 在上述代码中，我们将刚才创建的`Upload.vue`组件引入，并在模板中使用`<upload></upload>`来调用该组件。 这样，你就可以在Vue应用中实现.csv文件的上传了！记得根据你的实际需求，修改`action`属性指定的上传地址和相应的处理逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值