植 树 节
简易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. 基于UDP协议的socket通信

    服务器端: 1.创建DatagramSocket,指定端口号 2.创建DatagramPacket 3.接收客户端发送的数据信息 4.读取数据 客户端: 1.定义发送信息 2.创建DatagramPa ...

  2. ArcGIS10.2直连PostgreSQL存在问题

    现象: 将下载到的libeay32.dll, libiconv-2.dll, libintl-8.dll, libpq.dll, ssleay32.dll文件拷贝到Desktop 安装目录的bin目录 ...

  3. 《JAVASCRIPT高级程序设计》选择框脚本和富文本编辑

    一.选择框脚本 选择框也是表单的一个字段,是通过<select>和<option>元素来创建的,需要使用javascript来控制.选择框拥有以下的属性和方法: 以下介绍一些选 ...

  4. [html5] 学习笔记-服务器推送事件

    1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是Html5规范的一个组成部分,可以用来从服务端实时推送数据到浏览器端. 传统的服务器推送技术----WebSo ...

  5. SpringMVC:学习笔记(2)——RequestMapping及请求映射

    SpringMVC--RequestMapping及请求映射 @RequestMapping 说明 Spring MVC 使用 @RequestMapping 注解为控制器指定可以处理哪些 URL 请 ...

  6. 矢量切片(Vector tile)

    说明:本月的主要工作都是围绕制作矢量切片这一个核心问题进行的,所以2月的主题就以这个问题为主,目前分支出来的一些内容主要包括了TMS(Tile map service),OpenLayers3中的Pr ...

  7. Unity预计算光照的学习(速度优化,LightProb,LPPV)

    1.前言 写这篇文章一方面是因为unity的微博最近出了关于预计算光照相关的翻译文章,另一方面一些美术朋友一直在抱怨烘培速度慢 所以抱着好奇的心态来学习一下unity5的PRGI预计算实时光照 2.基 ...

  8. 【原创】python中文编码问题深入分析（二）：print打印中文异常及显示乱码问题分析与解决

    在学习python以及在使用python进行项目开发的过程中,经常会使用print语句打印一些调试信息,这些调试信息中往往会包含中文,如果你使用python版本是python2.7,或许你也会遇到和我 ...

  9. win8 wifi开关显示关闭，且设置里面wifi开关显示灰色的解决办法

    只要从华硕官网下载驱动,电源管理驱动,安装下面显示的几个软件即可,然后重启电脑,即可看见wifi热点,另外设置里面的wifi开关也将显示正常(刚开始安装了个驱动人生根本没用,最后在华硕官网下载了个电源 ...

  10. pod install 报错

    更新pod出现如下警告 The `SmartCloud_TS [Debug]` target overrides the `GCC_PREPROCESSOR_DEFINITIONS` build se ...