前段时间分享了一款视频播放器，点击这里。今天介绍一款不错的音频播放器——Amazing Audio Player。

介绍：

Amazing Audio Player 是一个使用很方便的 Windows 和 MAC 应用程序，允许你创建 HTML5 音频播放器的网站。该音频播放器兼容 iPhone，ipad，Android，Chrome，Firefox，Safari，Opera 和 IE 7 / 8 / 9 / 10。同时它也可以发布成为一个 WordPress 的音频播放器插件，Joomla 音频播放器模块或 Drupal 音频播放器模块。

DEMO：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <meta name="renderer" content="webkit"/>

    <meta name="keywords" content=""/>

    <meta name="description" content=""/>

    <title>amazing audio player</title>

    <link rel="stylesheet" href="plugin/amazingaudioplayer/initaudioplayer.min.css"/>

</head>

<body>

    <div id="amazingaudioplayer" style="display:block;position:relative;width:300px;height:164px;margin:0px auto 0px;">

        <ul class="amazingaudioplayer-audios" style="display:none;">

            <li data-artist="主题曲" data-title="主题曲" data-image="images/music.jpg" data-duration="30">

                <div class="amazingaudioplayer-source" data-src="mp3/music.mp3" data-type="audio/mpeg"/>

            </li>

        </ul>

    </div>

</body>

</html>

<script src="js/jquery.min.js"></script>

<script src="plugin/amazingaudioplayer/amazingaudioplayer.min.js"></script>

<script>

$(function(){

    $("#amazingaudioplayer").amazingaudioplayer({

        jsfolder: "plugin/amazingaudioplayer/",

        loop: 1,

        imageheight: 100,

        imagewidth: 100,

        infoformat: "By %ARTIST%",

        playpauseimage: "playpause-48-48-0.png",

        playpauseimagewidth: 48,

        playpauseimageheight: 48,

        prevnextimage: "prevnext-48-48-0.png",

        prevnextimageheight: 48,

        prevnextimagewidth: 48,

        volumeimage: "volume-24-24-1.png",

        volumeimageheight: 24,

        volumebarheight: 80,

        volumebarpadding: 8,

        showloop: false,

        showstop: false,

        progressheight: 8,

        showtracklist: false,

        showtitleinbar: false,

        timeformat: "%CURRENT% / %DURATION%"

    });

});

</script>

通过一系列的参数，配置出个性化的音频播放器。

官网地址：点击进入传送门。

DEMO：点击下载。

PS：

官网下载的是一个应用程序（.exe），安装完成后打开程序就可以进行相关设置，比如添加音频、添加音频背景图、选择播放器主题、设置播放器中按钮控制、播放列表等等，所有参数设置完成后发布就可以了。发布后会生成一个 demo，里面有 html、js、css 和图片以及 flash。如果想要应用到自己的网站就要自己查看代码，这里就不多说了。

【jquery】一款不错的音频播放器——Amazing Audio Player的更多相关文章

  1. Wordpress 音频播放器 Wordpress audio player with jQuery audioplayer.swf

    原文地址:http://justcoding.iteye.com/blog/545978 Wordpress audio player with jQuery How to use Wordpress ...

  2. Wavesurfer.js音频播放器插件的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...

  3. 基于canvas和Web Audio的音频播放器

    wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你能够使用它来制作各种HTML5音频播放器,它能够在各种支持 Web A ...

  4. 基于c开发的全命令行音频播放器

    cmus是一个内置了音频播放器的强大的音乐文件管理器.用它的基于ncurses的命令行界面,你可以浏览你的音乐库,并从播放列表或队列中播放音乐,这一切都是在命令行下. Linux上安装cmus 首先, ...

  5. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  6. IOS开发之简单音频播放器

    今天第一次接触IOS开发的UI部分,之前学OC的时候一直在模拟的使用Target-Action回调模式,今天算是真正的用了一次.为了熟悉一下基本控件的使用方法,和UI部分的回调,下面开发了一个特别简易 ...

  7. 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

  8. Unity3D音频播放器 动态装载组件

    大多数在线Unity有关如何只教程Unity在播放音乐.之后如何通过拖动它们无法继续添加音频文件 但有时在游戏中的对象要玩几个声音.这时候我们就需要使用代码控制,拖动推教程AudioClip颂值的方法 ...

  9. 最简单的基于FFMPEG+SDL的音频播放器 ver2 （采用SDL2.0）

    ===================================================== 最简单的基于FFmpeg的音频播放器系列文章列表: <最简单的基于FFMPEG+SDL ...

随机推荐

  1. Maven + 最新SSM整合

    . 1. 开发环境搭建 参考博文:Eclipse4.6(Neon) + Tomcat8 + MAVEN3.3.9 + SVN项目完整环境搭建 2. Maven Web项目创建 2.1. 2.2. 2. ...

  2. MyBatis源码分析（1）-MapConfig文件的解析

    1.简述 MyBatis是一个优秀的轻ORM框架,由最初的iBatis演化而来,可以方便的完成sql语句的输入输出到java对象之间的相互映射,典型的MyBatis使用的方式如下: String re ...

  3. Python3学习(2)-中级篇

    Python3学习(1)-基础篇 Python3学习(2)-中级篇 Python3学习(3)-高级篇 切片:取数组.元组中的部分元素 L=['Jack','Mick','Leon','Jane','A ...

  4. Fix network adapter not present problem in cloned CentOS

    (You can find a lot of articles on this from the internet. I just put it here for my own record.) It ...

  5. python 常用函数（不定时更新）

    1.遍历文件夹 import os def FileList(rootDir): FL=[] for lists in os.listdir(rootDir): path=os.path.join(r ...

  6. sql把一个表数据插入到另一张表

    把一个表数据插入到另一张表 insert into tableB (field1,field2,field3,field4) select field1,field2,field3,'val4' fr ...

  7. SQL Server并行死锁案例解析

    并行执行作为提升查询响应时间,提高用户体验的一种有效手段被大家所熟知,感兴趣的朋友可以看我以前的博客SQL Server优化技巧之SQL Server中的"MapReduce", ...

  8. Xamarin开发Android笔记：背景操作

    使用Xamarin开发Android UI的时可能会遇到一些场景背景的问题,虽然可以利用多层或直接使用图片背景来完成,但这样会增加不少的资源消耗,最终导致内存溢出的情况.最好的方法还是利用内部方法或代 ...

  9. 用c#开发微信 (6) 微渠道 - 推广渠道管理系统 1 基础架构搭建

    我们可以使用微信的“生成带参数二维码接口”和 “用户管理接口”,来实现生成能标识不同推广渠道的二维码,记录分配给不同推广渠道二维码被扫描的信息.这样就可以统计和分析不同推广渠道的推广效果. 本系统使用 ...

  10. Dynamic CRM 2013学习笔记（十四）复制/克隆记录

    经常有这样的需求,一个单据上有太多要填写的内容,有时还关联多个子单据,客户不想一个一个地填写,他们想从已有的单据上复制数据,克隆成一条新的记录.本文将介绍如何克隆一条记录,包括它的子单据以生成一条新的 ...