vue使用 APlayer+Meting实现音乐播放，支持多平台音乐：网易云、腾讯、虾米、酷狗、百度

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 4.7k累计阅读 4.8k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄8年

关注

VIP免费原创最新推荐文章于 2026-04-03 09:34:01 发布 4.7k 阅读 AI 写同款· GEO 优化 ›

Vue - 音频播放器插件（vue-aplayer）使用音频播放器插件（vue-aplayer）阅读详情

我之前写过一篇博客：使用 APlayer 实现音乐播放器，虽然 APlayer 让我实现了想要的音乐播放器效果，但是音频列表 audio 的音频链接、音频封面、歌词等，是需要自己去补充的。

那么这些数据从哪里来呢？

我昨天有发愁一会儿会儿，也去搜了获取音乐列表的接口，可以发请求去获取数据嘛。

也有瞅见MetingJS，A powerful plugin connect APlayer and Meting，一个连接APlayer和Meting的功能强大的插件，附上GitHub地址：https://github.com/metowolf/MetingJS

废话不多说，我这里介绍一下APlayer + Meting是如何实现音乐播放的。

1、引入

首先是引入，由于我这里是vue项目，所以我把下面的代码放在了项目的index.html里面。

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script&g

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#前端

vueaplayer便于配置的音乐播放器vue2组件 vue-aplayer：便于配置的音乐播放器vue2组件立即下载

相关推荐

vue2.0实现音乐/视频播放进度条组件

基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释，具体内容如下需求分析： ①：进度条随着歌曲的播放延长，歌曲播放完时长度等于黑色总进度条长度；时间实时更新。 ②：当滑动按钮时，实时更新播放时间，橙色进度条长度也会随着按钮的滑动而改变，当滑动结束时，橙色区域停留在滑动结束的位置，歌曲从当前进度开始播放。 ③：点击进度条，橙色进度条长度变为点击处至起点的长度，并从当前点开始播放歌曲。大概思路： ①：左边的时间可以通过audio播放时派发的timeupdate事件获取，右边的时间为接口获取的当前歌曲的总时间。 ②：进度条子组件的长度通过父组件传入一个percent值计算，perce

vue音乐播放器插件vue-aplayer的配置及其使用实例详解

本篇文章主要介绍了vue音乐播放器插件vue-aplayer的配置及其使用实例详解，具有一定的参考价值，有兴趣的可以了解一下

从零到一：手把手教你用HFSS仿真60GHz圆极化磁电偶极子天线（附参数调优心得）

本文详细介绍了在HFSS中设计60GHz圆极化磁电偶极子天线的全流程，包括仿真环境搭建、参数化建模、收敛性优化和性能验证。通过系统化的参数扫描和优化策略，显著提升了天线的轴比带宽和增益性能，为毫米波通信应用提供了高效的天线设计解决方案。

weixin_42614269的博客 304

每天一个优秀提示词学习收藏 - 文本创作篇（二）

宝子们，今天不藏私啦！我把这段时间四处搜罗、潜心钻研出来的文本创作 Prompt 提示词大礼包双手奉上，这可都是能让你的 AI 创作水平原地起飞的干货！走过路过不要错过，赶紧码住，开启你的 AI 创作进阶之旅吧！

2386

【WireShark】WireShark windows平台编译问题解决

最近工作中需要基于wireshark做二次开发，在windows平台构建过程中遇到了找不到Glib库的问题，具体报错如下： Working in D:\WorkSpace\WIRESHARK\wiresharksource\wireshark-win64-libs Tag 2021-08-14 not found. Refreshing. Downloading https://anonsvn.wireshark.org/wireshark-win64-libs/tags/2021-08-14/pac

qq_35456540的博客 1539

NVIDIA DRIVE SDK学习（二）——NvMedia

可以通过使用NvSciBuf API通过NvMedia Tensor属性分配NvSciBuf来创建NvMedia张量。由于NvSciBuf API有助于NvMedia和NVIDIA®CUDA®之间的数据共享，这使得分配的张量可以在NvSciBuf API允许的情况下重复使用。它支持图像聚合操作。NvSciSync组件使得NvMedia组件可以与其他组件保持同步，比如CUDA组件、基于NvSciSync的组件等。立体视差模式：在这种模式下，该模块通过左图像和右图像来产生立体视差，从而进行物体深度测量。

weixin_39592381的博客 3037

Gazebo手册：【1】gazebo基本操作案例

欢迎来到初学者模块！本模块将引导您了解 Gazebo 的最基本功能。我们将构建一个简单的车辆来演示这些功能。这些教程适用于 Gazebo 新手和/或没有编程或 Linux 经验的人。每个教程都建立在上一个教程的基础上，因此我们建议您按顺序学习这些教程。一、何为Gazebo？ Gazebo 是一款 3D 动态模拟器，能够准确有效地模拟复杂室内和室外环境中的机器人种群。虽然类似于游戏引擎，但 Gazebo 提供了更高保真度的物理模拟、一套传感器以及用于用户和程序的接口。 1............

gongdiwudu的专栏 2万+

【SigmaStudio】自定义算法组件之源码规范（二）

工作中自定义算法组件一般是dll文件，生成dll文件需要XML文件和DLB文件，记录一下DLB文件代码的编码规范，定义SigmaStudio SHARC算法开发的编码规则，涵盖函数原型、内存管理、接口结构体等关键要求，确保算法模块与SigmaStudio环境兼容

liang_song的博客 1372

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版【x86|x64】

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

文档：亲测可用解决vnc灰屏，黑屏，鼠标大黑叉情况

主要解决vnc-viewer灰屏，黑屏，鼠标大黑叉等现象，详细见文档。

霍尼韦尔SoftMaster使用说明

上一篇：实现随机标签，字体大小、颜色随机显示