baidu-百度音乐)songServer: {type:String,default:'netease'//'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'},// 播放类型(song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家)songType: {type:String,default:'playlist'},// 歌的idsongId: {type:String,default:'1972...
我们选择使用vue-aplayer 同样我们先安装这个插件 npm install vue-aplayer -s 我们需要在main.js里面导入并引用 importvueAplayerfrom'vue-aplayer'Vue.use(vueAplayer) image.gif 那么我们怎么使用了? 首先我们需要在使用的vue文件里面引入他 importaplayerfrom'vue-aplayer'exportdefault{components:{aplayer}} image....
-- 准备一个容器用来存放音乐播放器 --></template> import APlayer from "aplayer"; // 引入音乐插件 import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式 import { ref, onMounted } from "vue"; // 歌曲列表 const audio = ref([ { name: "如愿", // 歌曲名称 artist: "王菲", //...
<el-collapse-item title="播放器配置" name="3"> 设置内容待增加 自动播放 <el-switch v-model="playerAutoplay" inline-prompt :active-icon="CheckSmall" :inactive-icon="CloseSmall" /> 随机播放 <el-switch v-model="playerOrder" inline-prompt :active-icon="CheckSmall" :inactive-icon="Close...
我们在浏览网页的时候,时常会看到一些网页音乐播放器,本文以vue为例,使用aplayer插件,做一个简单的网页播放器。我们先看一下效果图 效果图 正常模式 吸底模式 当然还有迷你模式,就是能隐藏的都隐藏,这里不赘述,做相应配置就会出现对应效果。 注意,吸底模式会出现上一曲下一曲按钮,以及歌词按钮。正常模式是没这个的...
AbelEthan 3声望1粉丝 « 上一篇 Centos 防火墙之 iptables 下一篇 » vue3.0 视频播放插件(vue-vedio-player) 引用和评论 0条评论 得票最新 评论支持部分 Markdown 语法:**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。
3.实例(此实例的样式因为要根据项目原型来,所以样式做了修改重置) 官方效果图: 我使用时的效果图: 源码: <template><!--音乐播放器--><!--动画--><!--播放器--><vue-aplayer@play="handlePlay"v-if="musicList":music='musicList[0]':list='musicList':theme="'#CC1720'":mutex="true"/></...
<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....
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再使用 ...
⾸先，我们先安装 npm install vue-aplayer --save ，之后在组件中引⼊ import VueAplayer from 'vue-aplayer'，下⾯就是源码，可供参考：<template> </template> import axios from 'axios'import VueAplayer from 'vue-aplayer'export default { components: { //别忘了引⼊组件 'a-pl...