植 树 节
简易MP3播放插件（Aplayer）
[3/12]

效果如图所示：

写入初始代码，定义一个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: '限界突破&times;サバイバー',
      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篇章一的更多相关文章

  1. 音乐播放插件Aplayer+WebAPI的使用【附下载】

    本次介绍的是音乐播放器APlayer结合WebAPI的使用,先给各位看下效果:   上面就是APlayer的效果,然后这插件的地址是 https://github.com/DIYgod/APlayer ...

  2. 小型音乐播放器插件APlayer.js的简单使用例子

      本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...

  3. 一个MP3播放的插件jPlayer

    Jplayer小样   最近应公司要求需要一个MP3播放的插件,网上找了很多插件,看来看去还是jPlayer用着最舒服也最容易扩展.所以就找了个资料研究了下,简单做了个小DEMO.支持实时控制列表,常 ...

  4. 如何安装整个linux系统中所需要的mp3播放库插件? 可以在安装rpmfusion仓库后直接通过dnf install进行按照就可以了

    在vi的界面中, 前面的数字, 表示一行. 而对于中文而言, 并不一定是"一个文本行"就是一行, 而是以 回车(硬回车)为标志, 来判定一行的. 而dd, yy等也是以" ...

  5. Web页面使用VLC播放插件

    一.原生态Demo下载 选择原因:我们为什么选择VLC播放插件?原因是它支持IE8浏览器播放视频,如果高版本的浏览器大可不必选择该插件,很多html5插件既好用又简单,但是有些交管或政府 部门还是限制 ...

  6. C# wave mp3 播放器探寻

    C# wave mp3 播放器探寻   最近无聊,想听听歌曲.可怜新电脑上歌曲就两三首,要听其它的就得在旧电脑上播放.可是,那台古董但不失健壮的本本被老婆无情的霸占了.无奈. 思来想去,得,写个程序播 ...

  7. 功能强大的滚动播放插件JQ-Slide

    查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大,滚动方式自由多样全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式 ...

  8. jQuery语音播放插件

    自己做jQuery插件:将audio5js封装成jQuery语音播放插件   日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...

  9. x宝23大洋包邮的老式大朝华MP3播放器简单评测

    (纯兴趣测评,非广告) 最近逛X宝,看到了这个古董级MP3播放器居然还在售,于是脑抽+情怀泛滥买了一个. 然后呢,从遥远的深圳跨越好几千公里邮过来了这个玩意: 那节南孚5号电池是我自己的,是为了对比一 ...

随机推荐

  1. SpringMVC通过实体类返回json格式的字符串,并在前端显示

    一.除了搭建springmvc框架需要的jar包外,还需要这两个jar包 jackson-core-asl-1.9.2.jar和jackson-mapper-asl-1.9.2.jar 二.web,. ...

  2. 在点击div中的p时，如何阻止事件冒泡？

    今天整理笔记,发现在学习javaScript的过程中,遇到过一个在当时看来很棘手的问题,现在特地总结一下,也希望能帮助到曾像我一样迷惘的初学者. 我还是以一个案例来说明问题,html代码如下: < ...

  3. 11G内存设置一例

    11G的内存设置参数有memory_target.memory_max_target.sga_target.pga_aggregate_target等. 一个特别繁忙的数据库,前期内存设置较低,物理内 ...

  4. 安卓TCP通信版本2

    PC做服务器,安卓做客户端. 安卓获取输入框的内容并发送,然后等待接收服务器的消息 服务器先行开启,接收到客户端的数据,然后回复消息. 实现了对线程类的封装,通过按钮启动线程发送并接收 服务器代码(j ...

  5. bootstrap 响应式工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. java-4-类和对象

    一.以下代码为何无法通过编译?哪儿出错了? 错误:只定义了一个有参数的构造函数.而在主函数中定义的Foo类对象调用的是无参数的构造函数. 更改后: 二.多当个类之间有继承关系时,创建子类对象会导致父类 ...

  7. <context:component-scan>详解

    默认情况下,<context:component-scan>查找使用构造型(stereotype)注解所标注的类,如@Component(组件),@Service(服务),@Control ...

  8. .net是最牛逼的开发平台没有之一

    .net是最牛逼的开发平台没有之一 .net是最牛逼的开发平台没有之一 .net是最牛逼的开发平台没有之一 .net是最牛逼的开发平台没有之一 .net是最牛逼的开发平台没有之一 .net是最牛逼的开 ...

  9. 20130620—ant和java杂学随笔

    ant知识点: 1.使用属性定义相对路径的时候,一定要使用location,而不要去使用value  对于<property></property>中location和valu ...

  10. Java包装类缓存

    1.基本概念 在jdk1.5及之后的版本中,Java在5大包装类中(Byte,Charactor,Short,Integer,Long)增加了相应的私有静态成员内部类为相应包装类对象提供缓存机制,In ...