我们在浏览网页的时候,时常会看到一些网页音乐播放器,本文以vue为例,使用aplayer插件,做一个简单的网页播放器。我们先看一下效果图 效果图 正常模式 吸底模式 当然还有迷你模式,就是能隐藏的都隐藏,这里不赘述,做相应配置就会出现对应效果。 注意,吸底模式会出现上一曲下一曲按钮,以及歌词按钮。正常模式是没这个...
首先,我们先安装 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...
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 () {/...
import type {PropType}from'@vue/runtime-core'; import {nextTick, onBeforeUnmount, onMounted, ref}from'vue'constplayerRef=ref() let instance: APlayer;// APlayer歌曲信息classAudio{// 音频艺术家artist: String;// 音频名称name: String;// 音频链接url: String;// 音频封面cover: String;// 歌词...
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插件时出现的问题的解决,分享给大家,具体如下: 安装 $ 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...
用了一段时间,很喜欢 APlayer 简洁的 UI,提一些其他可改进的建议: 1.我认为有必要提供动态管理播放列表的 API (如果没有,在需要动态添加歌曲到列表时只能重新初始化) 2.应该提供一个销毁播放器的 API 3.歌词允许异步添加,通常获取歌词接口是单独的
Vue-APlayer 以 @DIYgod/APlayer 为原型,在 Vue 技术栈上进行实现。Vue-APlayer 项目早在 2016-11-22 就已起步,起初是对 APlayer 的简单封装。后来为了便于维护和迭代,干脆直接使用 Vue 实现了一遍。现仍在持续维护和更新中。 如果你在使用 Vue 搭建自己心爱的小站,正想挑选一款好看又好用的音乐播放器,Vue-AP...
【用 TS + Vue 重写 APlayer HTML5 音乐播放器】分享自 @SegmentFault,文章作者:u3u,文章传送门:http://t.cn/R9vFrH0
阿里云为您提供使用vue-aplayer插件时出现的问题的解决相关的3946条产品文档内容及常见问题解答内容,还有等云计算产品文档及常见问题解答。如果您想了解更多云计算产品,就来阿里云帮助文档查看吧,阿里云帮助文档地址https://help.aliyun.com/。