vue.js 使用 vue-aplayer 音频播放器（最全面）

效果图：

代码实现：

1.首先引入 vue-aplayer 包

npm install @moefe/vue-aplayer --save

2.然后在 main.js 中进行配置

import APlayer from '@moefe/vue-aplayer'
Vue.use(APlayer);

3.在代码中进行使用

<template><aplayer :audio="audio" :lrcType="3" ref="aplayer"/>
</template>

上面一点要注意：ref="aplayer" 是为了方便 vue.js 去找到这个标签元素

this.$refs.aplayer 则代表上面所创建的标签元素，可以对这个元素进行一些 api 的调用

4.进行配置

audio: {name: '东西（Cover：林俊呈）',artist: '纳豆',url: '/api/project/getPlayResource/24',cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignorelrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',},

5.API 调用及其他内容配置

https://aplayer.netlify.com/docs/guide/api.html

这里强调一点哦，对上面的标签对象进行操作，使用 this.$refs.aplayer 方式获取定义的标签对象

vue.js 使用 vue-aplayer 音频播放器（最全面）相关推荐

基于vue,js的简单pc 音乐播放器
一.简介项目github地址根据github上的http://www.daiwei.org/components/d-audio/来制作的他的是使用纯ES6来写的,我是通过改写他的,使用VUE来 ...
vue写js代码_vue.js弹出式音乐播放器特效代码
码农那点事儿关注我们,一起学习进步 vue弹出式音乐播放器是一款基于vue.js实现的点击弹出式音乐播放器代码特效,点击图片即可弹出播放界面大图,可切换列表模式,上一首下一首音乐切换等功能. 下载源 ...
Vue - 音频播放器插件（vue-aplayer）
Vue使用音频播放器插件 vue-aplayer vue-aplayer中文文档:https://aplayer.netlify.app/docs/guide/ GitHub文档:https://gi ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
前端页面 h5使用vue搭建带播放列表切换的音频播放器 audio
一个h5的音频播放器,播放列表与播放器上下首切换样式效果对应起来. 五秒后自动收缩形成挂件(不可移动).点击播放器图片即可展开.收起. audio.js audio.css 资源下载详细 ...
如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器
在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器 1.复制依赖文件 1.1 示例通过 webpack 插件自动复制依赖 1.1.1.编辑你的 webpack.config.js ...
VUE实现音频播放器方案（播放列表）
在项目中,需要对某个景点多个介绍音频文件进行播放,建立这个音频播放器还是费了不少周折.前几天在做音频文件上传与管理时时一次是单个文件的上传.加载与播放还是比较简单,网上有很多案例,找来看看基本上就会, ...
vue音频播放器组件
因为原生audio 播放器太丑了重新整理百度综合完成了播放器, 基于element ui 组件书写的需要的自取 <template><div class="audio ...
html5音频插件js,wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件
通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作,包括 Firefox, Chrome, Safari, Mobile S ...
HTML，js自制MP3音频播放器
HTML,js自制音频播放器示意图演示效果 MP3音频播放器文件结构 HTML代码 <!DOCTYPE html> <html><head><meta ...

vue.js 使用 vue-aplayer 音频播放器（最全面）

vue.js 使用 vue-aplayer 音频播放器（最全面）相关推荐

最新文章

热门文章