【Vue2】音乐播放器

最新推荐文章于 2024-06-20 16:28:03 发布
最新推荐文章于 2024-06-20 16:28:03 发布
阅读量835 收藏 3
点赞数 3
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51630625/article/details/124108965
版权

【Vue2】音乐播放器

在这里插入图片描述

需求：

1、输入关键词发起axios请求，获取播放列表

2、点击播放按钮，根据点击的数据id值，发起axios请求获取音频播放路径，并在<audio>标签下的src属性使用该路径，并使黑胶唱片区域开始动画

3、根据播放时的音频id值，发起axios请求获取热门留言区域

4、当点击MV图标时,根据选择视频的id值发起axios请求，播放对应视频，点击空白区域暂停并退出视频

遇到的问题：

问题一：

多次重复写了axios根路径
在这里插入图片描述

代码不足够简洁，利用率不高，没有复用性

应当使代码工程化些，可以设定一个axios默认的基地址

axios.
最低0.47元/天 解锁文章
全局搜索“ ”
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2音乐播放器分析
callmepls1的博客
03-08 572
App.vue和常规一样只包含#app标签，再加上渲染命令router-view,但是这里增加了底部导航栏 NavBottomView, css格式文件为index.css。需要注意的是启用了watch属性来坚挺路由的变化，并通过路由变化来设置底部导航栏是否显示。watch: { $route(to,from){ if(to.path.indexOf('detail')...
Vue实现音乐播放器
xi_yuanl的博客
11-09 348
音乐播放器
vue做音乐播放器完整功能
x1140711243的博客
12-28 6208
vue音乐播放器 一般音乐播放器该有的功能基本都有了，只是有些还没有完成，大部分代码 js 或者其他框架也可以用 功能 1、播放列表 2、切歌 3、暂停/播放 4、歌词显示 5、点击歌词改变进度 6、评论（未完成） 7、收藏歌曲（未完成） 8、滑块改变进度 9、进度条改变进度 10、播放列表 11、播放模式（随机/顺序） 12、播放列表结束提醒 13、播放错误提醒 14、加载/暂停提醒 15、当前播放进度/时间显示 16、侧边小歌词显示 17、缓冲条 部分功能代码 1、解析歌词 把歌词解析成【时间（
vue2使用audio标签实现播放外部音频
@@小旭的博客
06-20 334
preload：是否音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。wav：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几。HTML5 audio支持的音频格式有wav，mp3和ogg格式。ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。mp3：是一种音频压缩技术。controls：是否向用户显示控件，比如播放按钮。autoplay：是否音频在就绪后马上播放。loop：是否音频结束时重新开始播放。src：要播放的音频的 URL。
Vue3音乐播放器组件，可显示歌词
qq_46083602的博客
02-23 1458
vue3音乐播放器组件，歌词滚动
vue引入音乐播放器插件
bright的博客
11-07 3201
vue引入音乐播放器插件 npm install @moefe/vue-aplayer main.js引入 import APlayer from '@moefe/vue-aplayer' Vue.use(APlayer, { defaultCover: 'https://github.com/u3u.png', productionTip: true, }); 测试 <aplayer :audio="audio" :lrcType="1" fixed /> data()
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
weixin_72322475的博客
12-18 4410
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)。该案例需要更换视频中老师的 搜索音乐接口的请求地址 和 获取MV接口的参数，为本文中的地址和参数。！！！本文内含有有声音的效果展示视频，播放的时候注意音量！！！本文案例修改了原代码的BUG：如果退出MV遮罩层之前，不暂停MV的播放。则退出MV之后，依然会有MV中的声音继续播放。
基于springboot+vue的音乐播放器
qq_63471873的博客
06-25 328
用户前台：1.首页，2.歌单，3：歌手，4：我的音乐。基于springboot+vue的音乐播放器，项目结构清晰，代码优美，数据完整，可直接运行。管理员后台：系统管理，用户管理，歌手管理（歌曲管理)，歌单管理（评论，歌曲管理）项目介绍：本系统采用前后端分离的方式构建项目，主要实现了以下功能。框架:前端vue，后端springboot。开发环境：jdk8、node.js-12。开发软件：idea、VSCode。可远程部署，讲解代码。
基于VUE音乐播放器
qq_43205326的博客
10-27 3582
音乐播放器 实现模拟音乐播放器的功能 文章目录音乐播放器前言一、主要用到的技术二、页面布局（三部分）1.导航栏2.主体内容总结 前言 主要实现的功能有，导航栏的音乐播放，中间主体内容的四个路由页面，尾部音乐播放功能 一、主要用到的技术 html、css、JavaScript、vue-cli、vue-router、axios、element ui 二、页面布局（三部分） 1.导航栏 左侧：图标，标题显示块 右侧：搜索框显示 2.主体内容 主要用到vue-router切换四个页面：发现音乐，推荐歌单
vue实现音乐播放器
angelia_w的博客
03-29 1017
vue实现音乐播放器
Vue2.0音乐播放器
05-14
轮播图 2.搜索 3.歌手分类 4.歌曲分类 5.新歌速递 6.每日推荐 排行页 : 1.搜索 2.巅峰榜列表展示(各种类歌单的前三首展示) 歌单页 : 1.轮播图 2.全部歌单(其中一个歌单的全部整个列表图片+歌名) 我的页面 : 个人设置...
vue 音乐播放器 视频播放器
03-17
更新上一个资源BUG,添加了网易云API,提供手机用户登录,添加朋友,MV,下载等核心功能.环境 : node.js , php, windows All . 需要下载node.js服务器 ,地址 ...
vue基础音乐播放器~
12-21
在"vue基础音乐播放器~"项目中，我们可以推测这是一个使用Vue.js技术栈构建的简单音乐播放应用。下面将详细讲解Vue.js以及与音乐播放器相关的技术知识点。 1. **Vue.js 基础**： - **数据绑定**：Vue的核心特性之...
vue2.0 音乐播放器
05-10
Vue2.0音乐播放器项目是一个基于Vue.js框架构建的前端应用，主要功能是实现音乐的在线播放。这个项目的数据来源于知名的音乐平台——网易云音乐，通过调用其公开的API接口获取音乐信息，包括歌曲列表、歌曲详情、...
Vue项目搭建的音乐播放器源码
06-13
2. **Vuex状态管理**：音乐播放器可能涉及多个组件之间的数据共享，Vuex是Vue官方推荐的状态管理库，可以用来集中管理全局状态，确保状态的一致性。 3. **组件设计**：项目中可能会有播放控制组件、歌曲列表组件、...
mpu6050陀螺仪使用方法开发教程文档.docx
最新发布
07-30
mpu6050陀螺仪使用方法
【SCI顶级】龙格库塔算法RUN-CNN-LSTM-Multihead-Attention温度预测【含源码 5747期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
大模型的数学之魂：统计学习理论精要
07-30
大型机器学习模型，通常简称为“大模型”，是指具有数十亿甚至数千亿参数的深度神经网络模型。这些模型因为其庞大的参数量和复杂的计算结构，能够处理非常复杂的任务和数据，展现出强大的表达能力和预测性能。大模型在自然语言处理、计算机视觉、语音识别和推荐系统等多个领域都有广泛的应用。 大模型的设计目的是通过训练海量数据来学习复杂的模式和特征，从而具备强大的泛化能力，能够对未见过的数据做出准确的预测。与参数较少、层数较浅的小模型相比，大模型虽然需要更多的计算资源和时间来训练和推理，但它们展现出了一种被称为“涌现能力”的特性，即从原始训练数据中自动学习并发现新的、更高层次的特征和模式。 大模型的发展历程可以分为几个阶段，从早期的卷积神经网络模型发展到以Transformer为代表的全新神经网络模型，再到当前以GPT为代表的预训练大模型阶段。Transformer架构因其自注意力机制而成为大模型的核心技术，它使得模型能够更好地理解和处理文本数据中的长距离依赖关系。 大模型的分类主要包括语言大模型（NLP）、视觉大模型（CV）和多模态大模型。语言大模型专注于处理文本数据和理解自然语言，而视觉大模型用
vue2音乐播放器组件
05-20
可以使用第三方库如 `vue-audio-visual` 或者 `vue-audio-player` 来实现音乐播放器组件。 例如，使用 `vue-audio-visual`，你可以这样实现： 1. 首先安装依赖： ``` npm install vue-audio-visual --save ``` 2. 在需要使用的组件中引入： ```javascript import AudioVisual from 'vue-audio-visual' export default { components: { AudioVisual }, data () { return { audioSrc: 'http://xxx.xxx.xxx/xxx.mp3', // 音频文件地址 options: { autoplay: false, controls: true, loop: false } } } } ``` 3. 在模板中使用组件： ```html <audio-visual :src="audioSrc" :options="options"></audio-visual> ``` 其中，`audioSrc` 指定了音频文件的地址，`options` 是一个对象，用于配置音频播放器的一些选项，如是否自动播放、是否显示控制条、是否循环播放等。 你也可以自定义组件样式，例如： ```html <audio-visual :src="audioSrc" :options="options" style="width: 100%; height: 60px;"></audio-visual> ``` 这样就可以实现一个简单的音乐播放器组件了。当然，你也可以根据自己的需求进行更多的定制和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值