免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享

APlayer(H5)播放器+素材

本文来自:★flash之路-flash技术交流★ 转帖请注明出处! 作者:flashroad 您是第1052个浏览者

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
flashroad友情提示:公用账号【武汉加油 wuhanjiayou】仅可用于下载flashIDE
“点评”不是“回帖”!
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
附件: 您需要登录才可以下载或查看附件。没有帐号?注册

友情提示:单击下列任意一个表情,即可瞬间自动回复本帖!

好贴......
郁闷......
开心......
擦汗......
鄙视......
狂怒
谢谢
爱你呦
拜托了
嗯嗯
OMG
求关注
伤心......
无奈.....
无奈.....
无奈.....
无奈.....
无奈.....
哈哈哈
NO
OK
what
我来了

最近访问本帖者列表:

武汉加油
访问时间:2020-02-05 23:13
flashroad
访问时间:2018-12-24 16:36

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by 爱秀代码,分享从这里开始,精彩与您同在

点评
B Color Smilies

您还可以输入:个字符
X

X

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
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

楼下的是另一款
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

位于font文件夹内的四个文件:










根目录内的两个文件:

您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
附件: 您需要登录才可以下载或查看附件。没有帐号?注册
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

 

B Color Image Link Quote Code Smilies
高级模式 | 发新话题

您需要登录后才可以回帖 登录|立即注册

快速
返回顶部
返回首页