web简易MP3播放插件 Aplayer篇章一
效果如图所示：
写入初始代码，定义一个id唯一的div player1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<title>Aplayer mp3播放器</title>
</head>
<body>
<div id="player1" class="aplayer"></div>
</body>
</html>
script载入Aplayer插件
<div id="player1" class="aplayer"></div>
<script src="http://www.wuhairui.cn/aplayer/dist/APlayer.min.js"></script>
在之后进行初始化插件，并展示出来即可
<script>
var ap1=new APlayer({
element:document.getElementById("player1"),//植入的divid
narrow: false,//宽窄
autoplay: false,//是否自动播放
showlrc: false,//是否展示歌词
mutex: true,//是否互斥
theme: '#f00',//进度条颜色
mode: 'circulation',//渲染方式
music: {//mp3信息 （标题 演唱 音频地址 音频封面）
title: '限界突破×サバイバー',
author: '冰川清志',
url: '//note.youdao.com/yws/api/personal/file/4E5475A244DB4A84A8DD3C7A7AD8EC63?method=download&inline=true&shareKey=174234ed101e2697114bde87be19ed14',
pic: '//img001.photo.21cn.com/photos/album/20080306/o/4F07E017A6D82D0BA864FC2054BFD8C5.jpg'
}
});
</script>
以及这里还有一些播放器的回调接口，让你更好地控制播放器。
ap1.on('play', function () {//播放开始时执行
console.log('play');
});
ap1.on('pause', function () {//播放暂停时执行
console.log('pause');
});
ap1.on('canplay', function () {//加载完毕时执行
console.log('canplay');
});
ap1.on('playing', function () {//播放中时多次执行
console.log('playing');
});
ap1.on('ended', function () {//播放完时执行
console.log('ended');
});
ap1.on('error', function () {//播放错误时执行
console.log('error');
});
web简易MP3播放插件 Aplayer篇章一的更多相关文章
- 音乐播放插件Aplayer+WebAPI的使用【附下载】
本次介绍的是音乐播放器APlayer结合WebAPI的使用,先给各位看下效果: 上面就是APlayer的效果,然后这插件的地址是 https://github.com/DIYgod/APlayer ...
- 小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...
- 一个MP3播放的插件jPlayer
Jplayer小样 最近应公司要求需要一个MP3播放的插件,网上找了很多插件,看来看去还是jPlayer用着最舒服也最容易扩展.所以就找了个资料研究了下,简单做了个小DEMO.支持实时控制列表,常 ...
- 如何安装整个linux系统中所需要的mp3播放库插件? 可以在安装rpmfusion仓库后直接通过dnf install进行按照就可以了
在vi的界面中, 前面的数字, 表示一行. 而对于中文而言, 并不一定是"一个文本行"就是一行, 而是以 回车(硬回车)为标志, 来判定一行的. 而dd, yy等也是以" ...
- Web页面使用VLC播放插件
一.原生态Demo下载 选择原因:我们为什么选择VLC播放插件?原因是它支持IE8浏览器播放视频,如果高版本的浏览器大可不必选择该插件,很多html5插件既好用又简单,但是有些交管或政府 部门还是限制 ...
- C# wave mp3 播放器探寻
C# wave mp3 播放器探寻 最近无聊,想听听歌曲.可怜新电脑上歌曲就两三首,要听其它的就得在旧电脑上播放.可是,那台古董但不失健壮的本本被老婆无情的霸占了.无奈. 思来想去,得,写个程序播 ...
- 功能强大的滚动播放插件JQ-Slide
查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大,滚动方式自由多样全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式 ...
- jQuery语音播放插件
自己做jQuery插件:将audio5js封装成jQuery语音播放插件 日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...
- x宝23大洋包邮的老式大朝华MP3播放器简单评测
(纯兴趣测评,非广告) 最近逛X宝,看到了这个古董级MP3播放器居然还在售,于是脑抽+情怀泛滥买了一个. 然后呢,从遥远的深圳跨越好几千公里邮过来了这个玩意: 那节南孚5号电池是我自己的,是为了对比一 ...
随机推荐
- easyui treegrid实现显示checkbox并能获取到选定值的
闲聊: 小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕. 也不知道最近是怎么了,一向特别爱吃的小颖 ...
- quagga源码学习--BGP协议路由更新
BGP的核心就是交换路由,所以关键的部分还是在路由的更新与撤销上面,这之间包含了冗长的属性,community等等处理过程,不做详述. bgp_read函数是路由更新的事件处理函数,在收到BGP_MS ...
- OpenLayers.Map的一些特殊事件
开年上班的第二天,无意中看到一些没见过的事件,特地来给广大人民群众报个信. 众所周知的,map里面的 eventListeners 支持的事件挺多的,比如: var map = new OpenLay ...
- 1activiti认识和数据库和插件配置
工作流介绍 工作流(Workflow),就是通过计算机对业务流程自动化执行管理.它主要解决的是"使在多个参与者之间按照某种预定义的规则自动进行传递文档.信息或任务的过程, 从而实现某个预期的 ...
- js设计模式--策略模式
策略模式: 定义了一系列的算法,把他们封装起来,是它们之间可以互相替换,此模式不会影响到使用算法的客户. 回忆下jquery里的animate方法: $( div ).animate( {" ...
- TJOI2015 day2解题报告
TJOI2015终于写完啦~~~ T1:[TJOI2015]旅游 描述:(BZ没题面只能口述了..)一个人在一棵树上走,每次从a->b会进行一次贸易(也就是在这条路径上买入物品然后在后面卖出)然 ...
- [Noi2014]魔法森林( 动态mst lct)
以前一直觉得lct特别难写，自从学了丽洁姐的lct之后，觉得lct居然能这么短，这个主程序能40行左右解决~~~~ 这道嘛~~虽说能用spfa解决，但还是写下lct吧 把边按a值排序后一条一条插入并维 ...
- php与微信基础的学习
我们要搞的是用php来与微信进行信息交互,现在是一个学习过程...结合慕课网渔夫老师的讲解. 微信公众号的申请具体可百度,太简单不予说明,微信本身功能也挺多,也有相关第三方平台,然而我们学习编程--具 ...
- 【CNMP系列】PHP配置和调优
上一节我们说到PHP5.6.30在CentOS7.0下的整个安装过程,http://www.cnblogs.com/riverdubu/p/6428226.html 今天我来和大家讲解一下PHP-FP ...
- jsp判断为空用not empty
试过 !='' 不管用,只好百度,现在知道了 <c:if test="${not empty pos.requireDegreeName }"> ${pos.requi ...