音频/视频

仿网易云音乐外链HTML5音乐播放器

也想出现在这里?联系我们
面包多

仿网易云音乐外链HTML5音乐播放器-创客云
APlayer 是一款仿网易云音乐外链播放器 UI 的 HTML5 音乐播放器插件。APlayer 音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的 HTML5 音乐播放器插件。使用 APlayer 音乐播放器插件需要引入 APlayer.min.css 和 APlayer.min.js 文件。

  1. <link rel="stylesheet" href="APlayer.min.css">
  2. <script src="APlayer.min.js"></script>
也想出现在这里?联系我们
创客主机

HTML 结构:

可以使用一个[div]元素作为音乐播放器的容器。

  1. <div id="player1" class="aplayer"></div>

如果需要为歌曲添加同步歌词,可以在容器中使用 pre.aplayer-lrc-content 来设置歌词。

  1. <div id="player1" class="aplayer">
    
  2.     [pre class="aplayer-lrc-content"]
    
  3.         [ti:平凡之路]
    
  4.         [ar:朴树]
    
  5.         [al:《后会无期》主题歌]
    
  6.         [by:周敏]
    
  7.  
  8.         [00:00.00]平凡之路 - 朴树
    
  9.         [00:04.01]作词:韩寒 朴树
    
  10.         [00:08.02]作曲:朴树 编曲:朴树
    
  11.         [00:12.02]徘徊着的 在路上的
    
  12.         [00:17.37]你要走吗
    
  13.         [00:23.20]易碎的 骄傲着
    
  14.         [00:28.75]那也曾是我的模样
    
  15.         <!-- ... -->
    
  16.     [/pre]
    
  17. </div>

初始化插件:

可以通过下面的方式来初始化 APlayer 音乐播放器插件。

  1. var ap = new APlayer({
  2.     element: document.getElementById('player1'),
  3.     narrow: false,
  4.     autoplay: true,
  5.     showlrc: false,
  6.     music: {
  7.         title: 'Preparation',
  8.         author: 'Hans Zimmer/Richard Harvey',
  9.         url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
  10.         pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
  11.     }
  12. });
  13. ap.init();

配置参数:

  1. {
  2.     element: document.getElementById('player1'),
  3.     narrow: false,
  4.     autoplay: true,
  5.     showlrc: false,
  6.     music: {
  7.         title: 'Preparation',
  8.         author: 'Hans Zimmer/Richard Harvey',
  9.         url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
  10.         pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
  11.     }
  12. }

element:可选参数,音乐播放器元素

narrow:可选参数,简洁模式

autoplay:可选参数,自动播放,移动手机不支持该参数

showlrc:可选参数,是否显示歌词

music:必选参数,音乐信息

title:必选参数,歌曲的标题

author:必选参数,歌手信息

url:必选参数,歌曲所在的 URL

pic:必选参数,歌曲的封面

方法:

APlayer 音乐播放器插件有以下 3 个控制方法:

ap.init():初始化

ap.play():播放

ap.pause():暂停
APlayer 音乐播放器插件的 github 地址为:https://github.com/DIYgod/APlayer

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(1)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!