zoukankan      html  css  js  c++  java
  • web简易MP3播放插件 Aplayer篇章一

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


    效果如图所示:

    blob.png

    写入初始代码,定义一个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');
    });


  • 相关阅读:
    Docker 简单部署 ElasticSearch
    Anaconda更新失败简单解决[CondaHTTPError: HTTP 000 CONNECTION FAILED for url]
    TermKit的新一代Mac终端,在Ubuntu 11.04 轻松安装TermKit
    Linux下如何测试网速
    centos7安装yum
    Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
    yum 安装指定版本Docker
    如何在 Apache Hive 中解析 Json 数组
    unzip解压失败( cannot find zipfile directory)
    Linux 定时任务crontab_014
  • 原文地址:https://www.cnblogs.com/wuhairui/p/6592117.html
Copyright © 2011-2022 走看看