music功能 vue_基于vue-element组件实现音乐播放器功能

最新推荐文章于 2024-07-16 01:25:59 发布
最新推荐文章于 2024-07-16 01:25:59 发布
阅读量612 收藏
点赞数
文章标签： music功能 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36451983/article/details/111899961
版权

最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下

效果

使用到的组件

element组件

布局 Layout

按钮 Button

滑块 Slider

进度条 Progress

弹出框 Popover

html5组件

audio

实现代码

placement="top-start"

trigger="hover">

color="#67C23A"

type="circle"

:percentage="music.volume">

@click="changeVolume(-10)"

icon="el-icon-minus"

circle>

@click="changeVolume(10)"

icon="el-icon-plus"

circle>

@click="play"

id="play"

slot="refer

最低0.47元/天 解锁文章
王雪皎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【音乐App】—— Vue-music 项目学习笔记：歌曲列表组件开发
柳柳66的博客
12-27 561
【音乐App】—— Vue-music 项目学习笔记：歌曲列表组件开发 前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。 项目github地址：https://github.com/66Web/ljq_vue_music，欢迎Star。 当前歌曲播放列表 添加歌曲到队列 component...
c#播放.wav音频
u011511086的专栏
08-31 1679
播放用到的类 System.Media.SoundPlayer /// <summary> /// 播放有新订单来了，播放.wav格式的波形声音文件 /// </summary> public static void PlaySoundOrderComming() { Task.Run(() => { //播放声音 try { //LogHelpter.AddLog("播放订单来了音频"); System.Media.SoundPlayer sndP
用vue写一个音频播放器的组件（一）
最新发布
m0_57836225的博客
07-16 434
另外，需要注意的是，在 Vue 3 的 `<script setup>` 语法中，更推荐将相关的变量和函数定义在 `setup()` 内部，以便于更好地组织和管理组件的逻辑，并且能够直接在模板中使用这些响应式数据和方法。需要注意的是，只有在组件挂载后才能访问通过 `ref` 获取的引用，如果在初始渲染时访问，可能会得到 `null`，因为此时对应的元素或组件实例还不存在。- `props` 定义了一个名为 `message` 的属性，其类型为字符串 `String`，默认值为空字符串 `''`。
vue-music
底层码农
11-24 6790
Vue
vue-music ...
jjsnc
08-25 712
1:脚手架安装vue init webpack vue-music 2：目录介绍，资源准备 重要配置文件修改//引入 stylus npm install stylus --save // 配置信息保存在 package.json dependencies 信息下 //引入 stylus-loader npm install stylus-loader --save-dev // 依赖的配置信
vue+element 实现音乐播放（已修正element slider自动滑动的bug）
weixin_49452182的博客
07-17 2981
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
electronic-vue-music：基于electronic-vue开发的音乐播放器，界面模仿QQ音乐，技术栈electron-vue + vue + vuex + vue-router + element-UI。
02-04
一个基于electron-vue开发的音乐播放器 运行 git clone https://github.com/SmallRuralDog/electron-vue-music.git cd electron-vue-music npm install # 运行开发模式 npm run dev # 打包安装文件 npm run build ...
基于 electron-vue 开发的音乐播放器，界面模仿QQ音乐，技术栈electron-vue+vue+vuex+vue-r
05-25
总的来说，这个项目展示了如何利用现代前端技术栈构建一个功能完善的桌面音乐播放器，同时也提供了一个学习和实践 electron-vue、vue、vuex、vue-router 和 element-ui 的实战案例。对于想要提升前端全栈能力的...
使用vue-element组件制作简单的音乐播放器
weixin_40425232的博客
05-17 1428
使用到的组件 element组件 布局 Layout 按钮 Button 滑块 Slider 进度条 Progress 弹出框 Popover html5组件 audio <template> <div> <el-row> <el-col :span="4"> <el-popover p...
使用vue.js+element ui制作音乐播放器
少为人的博客
04-24 1249
功能包括 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
基于vue-element组件实现音乐播放器功能
08-27
主要介绍了基于vue-element组件实现音乐播放器功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue 音乐播放器 视频播放器
03-17
更新上一个资源BUG,添加了网易云API,提供手机用户登录,添加朋友,MV,下载等核心功能.环境 : node.js , php, windows All . 需要下载node.js服务器 ,地址 https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi
vuepress-plugin-meting:一个简单的插件连接APlayer，Meting和VuePress
05-19
vuepress-plugin-meting :shortcake: A simple plugin connect APlayer, Meting and VuePress. Document: LiveDemo: Install yarn add vuepress-plugin-meting -D # or use npm npm i vuepress-plugin-meting -D Usage module.exports = { plugins: [ 'meting', { metingApi, meting, aplayer, mobile, }, ], } 使用该插件后将自动注册 <Meting> 组件与 <APlayer> 组件，你可以在任意位置使用它们 <Meting
Vue-Music：一款基于Vue.js的开源音乐播放器应用
gitblog_00027的博客
04-08 446
Vue-Music：一款基于Vue.js的开源音乐播放器应用 项目地址:https://gitcode.com/poetries/vue-music Vue-Music 是一个优雅且功能丰富的在线音乐播放器，它利用了现代前端框架Vue.js的强大功能，为开发者和音乐爱好者提供了一种全新的构建音乐应用的方式。 项目简介 Vue-Music 是一个完全响应式的Web应用，它的设计目标是提供类似原生应用...
【音乐App】—— Vue-music 项目学习笔记：歌手页面开发
柳柳66的博客
12-23 538
【音乐App】—— Vue-music 项目学习笔记：歌手页面开发 前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。 项目github地址：https://github.com/66Web/ljq_vue_music，欢迎Star。   一、歌手页面布局与设计 需求：联系人列表形式、左右联动的滚动列表...
Vue+Vuex+Element-ui实现歌曲播放控件、播放列表功能
weixin_44200288的博客
05-24 5044
写在前面： 根据思路写代码和写文章的区别还是挺大的，后者更多需要的是一个总结表述的能力，以及需要判断文章中呈现的东西是否有价值。做笔记和写博客同样是在记录，而博客还承担了一个供别人浏览的职能，所以如何把自己的逻辑表达得让大众都能理解，也是一个值得研究的地方。 由于个人技术的影响，文章中可能会出现一些错误，小到格式排版，大到逻辑错误都正常，所以写博客的原因主要是： 帮助重新梳理自己的逻辑，记录自己的学习过程 希望能与更多伙伴进行技术上的交流，如果还能大佬指出问题或提一些建议，那就是赚到 如果还能帮到一些可能
vue + element 音频播放控件
weixin_42115781的博客
10-26 3500
参考: https://github.com/wangduanduan/element-audio 效果： 代码： // 音乐播放组件 <template> <div id='playMusic'> <audio ref='audio' :src='src' @pause="onPause" @play='onplay' @timeupdate="onTimeupdate" @loadedmetadata="onLoaded
vue实现音乐播放器
angelia_w的博客
03-29 1061
vue实现音乐播放器
基于vue的音乐播放器的设计与实现
01-04
基于Vue的音乐播放器的设计与实现可以包括以下几个步骤： 1. 创建Vue项目：首先，你需要使用Vue CLI创建一个新的Vue项目。可以使用以下命令创建一个新的Vue项目： ```shell vue create music-player ``` 2. 安装所需的依赖：在项目目录下，使用以下命令安装所需的依赖： ```shell cd music-player npm install axios vuex vue-router element-ui ``` 3. 设计页面结构：根据需求，设计音乐播放器的页面结构。可以使用Vue的组件来构建页面，例如创建一个播放器组件、歌曲列表组件等。 4. 实现音乐播放功能：使用Vue的生命周期钩子函数和Vue的事件处理机制，实现音乐的播放、暂停、切换等功能。可以使用第三方库如`howler.js`来处理音频播放。 5. 获取音乐数据：使用Axios库发送HTTP请求，从后端API获取音乐数据。可以使用Vue的状态管理库Vuex来管理音乐数据的状态。 6. 显示音乐信息：将获取到的音乐数据显示在页面上，例如歌曲名称、歌手、专辑封面等。 7. 实现歌曲列表功能：根据获取到的音乐数据，实现歌曲列表的展示和切换功能。可以使用Vue Router来实现歌曲列表的路由。 8. 添加其他功能：根据需求，可以添加其他功能，例如搜索歌曲、添加歌曲到收藏夹等。 9. 样式美化：使用CSS和Element UI等库来美化音乐播放器的样式。 10. 测试和部署：在开发完成后，进行测试并部署到服务器上。 这是一个基本的基于Vue的音乐播放器的设计与实现的步骤。根据具体需求，还可以添加其他功能和优化。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值