<template><APlayer></APlayer></template>import APlayer from "../../components/APlayer/APlayer.vue";/* 在这里添加你的样式 */ 3. 展示完成效果# 我这里用的是我的歌单id,可以正常显示并播放音乐。 至于第一首歌为只有30秒,是因为这种方式并没有登录,只能试听(就是没有VIP-_-)。 三、关于Meting设置...
同样我们先安装这个插件 npm install vue-aplayer -s 我们需要在main.js里面导入并引用 import vueAplayer from 'vue-aplayer' Vue.use(vueAplayer) 那么我们怎么使用了? 首先我们需要在使用的vue文件里面引入他 import aplayer from 'vue-aplayer' export default { components: { aplayer } } 我们的html部分 <t...
首先,创建一个新的Vue3项目。如果你已经有一个Vue3项目,可以跳过这一步。 vuecreatevue3-aplayer AI代码助手复制代码 按照提示选择配置,完成后进入项目目录: cdvue3-aplayer AI代码助手复制代码 集成APlayer 1. 引入APlayer 在Vue3项目中,我们可以在组件中引入APlayer。首先,在src/components目录下创建一个新的组件...
引言 自己弄新版博客想用APlayer,到github看了一圈没见有vue3版本的,所以就用基于Aplayer组件化了下,顺带看了下Meting.js,用Meting.js的服务去获取指定歌曲,详见代码 参考: https://github.com/DIYgod/APlayer https://aplayer.js.org/#/zh-Hans/
"fetch-jsonp": "^1.2.3", "pinia": "^2.0.23", "pinia-plugin-persistedstate": "^3.0.0", "swiper": "^9.3.2", "vue": "^3.3.4", "vue3-aplayer": "^1.7.3" "vue": "^3.3.4" }, "devDependencies": { "@icon-park/vue-next": "^1.4.2", 538 changes: 172 additions & 366...
我们在浏览网页的时候,时常会看到一些网页音乐播放器,本文以vue为例,使用aplayer插件,做一个简单的网页播放器。我们先看一下效果图 效果图 正常模式 吸底模式 当然还有迷你模式,就是能隐藏的都隐藏,这里不赘述,做相应配置就会出现对应效果。 注意,吸底模式会出现上一曲下一曲按钮,以及歌词按钮。正常模式是没这个的...
要在Vue项目中使用vue-aplayer拖拽进度,你需要确保正确集成了vue-aplayer,并且正确配置和使用其相关方法。1、确保正确安装和引入vue-aplayer,2、在组件中正确配置vue-aplayer,3、使用vue-aplayer的事件和方法实现拖拽进度。以下是详细描述这些步骤及其实现细节。 一、确
要在Vue中使用APlayer切换歌曲,主要步骤包括1、初始化APlayer实例,2、设置播放列表,3、调用实例方法进行切换。详细步骤如下。 一、初始化APLAYER实例 首先,需要引入APlayer库并在Vue组件中初始化APlayer实例。 import APlayer from 'aplayer'; export default { ...
3. 配置vue-aplayer的基础设置 在上面的代码中,我们已经通过option对象配置了vue-aplayer的基础设置,如自动播放、主题色、循环模式、预加载方式、音量和互斥性等。 4. 在Vue模板中使用vue-aplayer组件 在Vue模板中,我们通过<aplayer>标签来使用vue-aplayer组件,并绑定了audio和option属性。 5. 测试vue-aplaye...
<template></template>importaxiosfrom'axios'importVueAplayerfrom'vue-aplayer'exportdefault{components: {//别忘了引入组件'a-player':VueAplayer}, data () {return{flag:false,musicList:'',songList:[] } },asyncmounted () {//异步加载,先加载出player再使用awaitthis.init();letaplayer =this.$refs....