码迷,mamicode.com
首页 > Web开发 > 详细

非常漂亮的HTML5音乐播放器

时间:2017-05-05 17:12:21      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:view   放音   hub   播放器   str   tps   第三方   zepto   下载   

APlayer是一个非常漂亮的HTML5音频播放器,它将audio标签封装,并结合CSS制作出漂亮的播放器UI,它支持设置歌名、歌手和歌词,可以设置是否自动播放,支持缩略图,支持播放进度以及设置播放源。

技术分享

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

声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接:http://www.helloweba.com/view-blog-338.html

非常漂亮的HTML5音乐播放器

标签:view   放音   hub   播放器   str   tps   第三方   zepto   下载   

原文地址:http://www.cnblogs.com/wanzhongjun/p/6813651.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!