flash之路-flash技术交流 - Powered by Discuz! Board

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

新浪微博

QQ空间

Facebook

Google+

Plurk

Twitter

Line

标题: APlayer(H5)播放器+素材 [打印本页]

作者: flashroad 时间: 2018-9-7 09:54 标题: APlayer(H5)播放器+素材

[attach]1153[/attach]

作者: flashroad 时间: 2018-9-7 09:56

HTML
首先是要加载播放器样式文件，这个播放器的样式酷似网易云音乐播放器。
然后在body中加入播放器div#player1，待会要调用播放。
接着载入APlayer.js文件。

<link rel="stylesheet" href="APlayer.min.css">
<div id="player1" class="aplayer"></div>
<script src="APlayer.min.js"></script>

JavaScript
现在我们来调用APlayer，首先new一个对象，绑定播放器元素，设置各种选项，最后使用ap.init();载入播放器。
注意APlayer不依赖诸如jQuery或Zepto等第三方JS库，它直接将html5中的audio标签封装起来，所以开发者只需简单几句代码就可在页面上呈现漂亮的音乐播放器了。

var ap = new APlayer({
element: document.getElementById('player1'),
narrow: false,
autoplay: true,
showlrc: false,
music: {
      title: 'Preparation',
      author: 'Hans Zimmer/Richard Harvey',
      url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
      pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
}
});
ap.init();

选项说明
element：绑定的播放器元素。

narrow：是否使用窄屏模式，即只显示缩略图和播放按钮，请看演示demo中的样式3。

autoplay：是否自动播放，注意这个在移动端手机上不支持自动播放的。

showlrc：是否展示歌词，请看演示demo中的样式1。

music：用来设置播放音乐相关信息的集合，其中title表示音乐标题，author表示音乐的作者，url表示播放文件地址，pic当然就是播放的音乐缩略图。

APlayer还提供了播放器事件，如载入播放器：ap.init()；播放：ap.play()和暂停：ap.pause()。

有关APlayer项目的最新进展，大家可以关注APlayer项目地址：https://github.com/DIYgod/APlayer

作者: flashroad 时间: 2018-10-23 09:41

楼下的是另一款

作者: flashroad 时间: 2018-10-23 09:41

位于font文件夹内的四个文件：
[attach]1307[/attach]

[attach]1308[/attach]

[attach]1309[/attach]

[attach]1310[/attach]

根目录内的两个文件：
[attach]1311[/attach]
[attach]1312[/attach]

欢迎光临 flash之路-flash技术交流 (http://flashroad.joinbbs.net/)