Aplayer音乐播放插件

APlayer中文官网

安装

使用 npm:
npm install aplayer --save

使用 Yarn:
yarn add aplayer

入门

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
const ap = new APlayer({container: document.getElementById('aplayer'),audio: [{name: 'name',artist: 'artist',url: 'url.mp3',cover: 'cover.jpg'}]
});

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音乐播放器插件</title><link rel="stylesheet" href="css/aplayer.min.css"><style type="text/css">#main{width: 400px;margin: 0 auto;}</style>
</head>
<body><div id="main"><div id="aplayer"></div></div>
<script src="js/aplayer.min.js"></script>
<script>var ap = new APlayer({element: document.getElementById('aplayer'),narrow: false,/*自动播放，默认值为false，true为开启自动播放*/autoplay: true,showlrc: true,/*lrc歌词显示方式,默认值为1,HTML显示方式，2为JavaScript字符串显示方式，3为lrc文件加载显示方式*/lrcType: 3,/*主题颜色*/theme: '#00b5ad',/*歌曲集合列表*/audio:[{/*歌名*/title: '爱你没差',/*作者*/author: '周杰伦',/*歌曲*/url: 'music/爱你没差-周杰伦.mp3',/*音乐专辑图片*/pic: 'images/爱你没差.jpg',/*歌词*/lrc: 'lrc/ainimeicha.lrc'}]});
</script>
</body>
</html>

效果

Aplayer音乐播放插件相关推荐

Hexo博客使用aplayer音乐播放插件
首先:本文基于CentOS 8.5 64位,其他操作系统请注意修改对应命令关键字,并且本文只介绍Hexo部署的方法和过程, 文章目录前情提要〇.懒人版一.独立部署写法1 写法2 二.插件配置 ...
好用的Typecho在线音乐播放插件-APlayer
Typecho在线音乐播放插件-APlayer 支持国内五大音乐平台(网易云.QQ.虾米.百度.酷狗)的单曲/专辑/歌单播放简单快捷,复制音乐详情页面网址,后台自动生成播放代码前端 APlayer ...
Hexo全局添加APlayer音乐播放器
本人博客相关站点 APlayer APlayer Github Hexo-Tag-Aplayer 音乐直链搜索工具基于 Yilia 主题全局添加 APlayer 音乐播放器编辑文件 hexo-t ...
php 播放多个音乐,meting 音乐播放插件多域名跨域解决方法
换了模板使用了meting音乐播放插件由于我解析了两个域名一个是顶级域名nnnuo.com,还有个www二级域名. 但是meting插件在后台设置云解析地址的时候只要是使用其中一个域名另外一个域名访 ...
个人博客的APlayer音乐播放器
大家好,今天看到的个人了博客音乐播放器,就想自己搞一个.弄了几个小时才搞懂.在网上找了好多资料,最后发现没用.出差各种问题,因为小编我一开始也不是很理解.我目前找到了三种方法,给大家分享一下,如果还有 ...
jekyll个人博客中添加音乐播放插件
方法一: 环境要求 jekyll 七牛开始使用 step1 首先下载这个文件open-embed.html,右键,另存为Html;下面是源码,也可以复制保存下面的源码; <style> ...
音乐播放插件Aplayer+WebAPI的使用【附下载】
本次介绍的是音乐播放器APlayer结合WebAPI的使用,先给各位看下效果: 上面就是APlayer的效果,然后这插件的地址是 https://github.com/DIYgod/APlayer 下 ...
Hexo主题插入音乐之aplayer音乐播放器
原文首发自:https://wiki.hushhw.cn/posts/a84d1ef1.html 今天折腾的点是给博客中插入音乐,找到的具体可行的方案有: 使用音乐平台提供的插件体验很差使用hex ...
如何在博客中添加Aplayer音乐播放器
前言是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗.音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受. 我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有 ...

Aplayer音乐播放插件

APlayer中文官网

安装

入门

示例

效果

Aplayer音乐播放插件相关推荐

最新文章

热门文章