首先,你需要在你的Vue项目中安装vue-aplayer库。可以通过npm或yarn进行安装: bash npm install vue-aplayer # 或者 yarn add vue-aplayer 2. 在Vue项目中引入vue-aplayer组件 在你的Vue组件或Vue实例中引入vue-aplayer组件。以下是一个示例,展示了如何在Vue组件中引入并使用vue-aplayer: vue <template>...
我们在浏览网页的时候,时常会看到一些网页音乐播放器,本文以vue为例,使用aplayer插件,做一个简单的网页播放器。我们先看一下效果图 效果图 正常模式 吸底模式 当然还有迷你模式,就是能隐藏的都隐藏,这里不赘述,做相应配置就会出现对应效果。 注意,吸底模式会出现上一曲下一曲按钮,以及歌词按钮。正常模式是没这个...
1.安装 npm i vue-aplayer 2.引入 import VueAplayerfrom'vue-aplayer' name:"Aplayer", props: ["pdfurl"], components: {//别忘了引入组件'a-player': VueAplayer }, 3.初始化 flag:false, musicList:'', songList:{ src:''}, 4.async await 异步加载,先加载出player再使用 asyncmounted () {/...
首先,我们先安装 npm install vue-aplayer --save ,之后在组件中引入 import VueAplayer from 'vue-aplayer',下面就是源码,可供参考: <template></template>importaxiosfrom'axios'importVueAplayerfrom'vue-aplayer'exportdefault{components: {//别忘了引入组件'a-player':VueAplayer}, data () {return{flag:f...
npm install vue-aplayer --save 1. 注意 本文使用的是 vue-aplayer 并不是 @moefe/vue-aplayer,两者之间有些配置项不同,这里暂时不做赘述。 这里也可能会发生一个警告 Can't resolve 'hls.js' in 'D:\MyProject\private-ashcan\frontend\node_modules\vue-aplayer\dist' ...
刚刚接触vue-aplayer,从github上找到了用法,首先需要npm install vue-aplayer –save ,之后在组件中引入import VueAplayer from ‘vue-aplayer',别忘了注册components: { 'a-player': VueAplayer } 这里还有一个问题,用v-if,而不是v-show,因为是异步请求,所以一开始播放器中是没有歌曲的,所有给了个v-if不然...
用了一段时间,很喜欢 APlayer 简洁的 UI,提一些其他可改进的建议: 1.我认为有必要提供动态管理播放列表的 API (如果没有,在需要动态添加歌曲到列表时只能重新初始化) 2.应该提供一个销毁播放器的 API 3.歌词允许异步添加,通常获取歌词接口是单独的
本文介绍了使用vue-aplayer插件时出现的问题的解决,分享给大家,具体如下: 安装 $ npm install vue-aplayer --save 使用 <aplayer autoplay :music="{ title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', url: 'http://devtest.qiniudn.com/Preparation.mp3', pic: 'http://devtest.qiniudn.com...
Vuepress使用vue-aplayer在生产环境会出现document is not defined报错 代码中使用了 Vue.mixin 对全局进行了混入操作,所以在每个文档页面被访问后都会触发该 mounted() 生命周期进行用户权限的校验。在这里需要特别说明的是,原来对于权限检查的操作,本是希望在 Vue Router 的路由守卫中处理,但由于 浏览器的 API 访问...
【用 TS + Vue 重写 APlayer HTML5 音乐播放器】分享自 @SegmentFault,文章作者:u3u,文章传送门:http://t.cn/R9vFrH0