最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
利用HTML5制作漂亮的网页音乐播放器
时间:2015-12-12 编辑:简简单单 来源:一聚教程网
APlayer是一个非常漂亮的HTML5音频播放器,它将audio标签封装,并结合CSS制作出漂亮的播放器UI,它支持设置歌名、歌手和歌词,可以设置是否自动播放,支持缩略图,支持播放进度以及设置播放源。
HTML
首先是要加载播放器样式文件,这个播放器的样式酷似网易云音乐播放器。然后在body中加入播放器div#player1,待会要调用播放。接着载入APlayer.js文件。
css">
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()。
-
下一个: js判断手机或者PC的几个例子
相关文章
- HTML常用网页特效 02-24
- 研究:符合网页标准的结构清晰的xhtml文档 01-26
- HTML网页超链接标记学习教程 01-13
- HTML网页列表标记学习教程 01-13
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31