前段时间分享了一款视频播放器，点击这里。今天介绍一款不错的音频播放器——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. commons-logging和log4j

    1.Apache通用日志接口(commons-logging.jar)介绍 Apache Commons包中的一个,包含了日志功能,必须使用的jar包.这个包本身包含了一个Simple Logger, ...

  2. C# ADO.NET SqlDataAdapter中传递参数

    ADO.NET的SQL语句中,往往不是静态的语句,而是需要接受传递过来的参数,比如典型的登录功能,需要查找指定的用户名: string sqlQuery = "SELECT * FROM W ...

  3. C#设计模式——单件模式

    一.为何需要单件模式 需求 我们开发了一个大型的项目,其中存在许多的工具类.但是其中很多的工具类我们并不是经常使用得到,甚至 一次都不会使用.但是这些工具类都是静态的类,会消耗很多的内存,即使一次都不 ...

  4. 把HDFS里的json数据转换成csv格式

      1. 全景图 2. 用ListHDFS获取所有文件名   如果想重新再取一次,右健view state:   点击 clear state, 再运行,即可再次采集数据了.   3. 用FetchH ...

  5. 跟我一起学WCF(2)——利用.NET Remoting技术开发分布式应用

    一.引言 上一篇博文分享了消息队列(MSMQ)技术来实现分布式应用,在这篇博文继续分享下.NET平台下另一种分布式技术——.NET Remoting. 二..NET Remoting 介绍 2.1 . ...

  6. Flex开发一周年感悟

    优点: 1.Flex上手简单,与html和js很像,是一种web前端语言,对于简单的界面.图表.交互都有不错的封装.它能够让新手在短时间内开发出比较有模样的项目. 2.有很多第三方api可以使用,如a ...

  7. [学习笔记] Dispose模式

    Dispose模式是.NET中很基础也很重要的一个模式,今天重新复习一下相关的东西并记录下来. 什么是Dispose模式? 什么时候我们该为一个类型实现Dispose模式 使用Dispose模式时应该 ...

  8. HTML5 Canvas实现黑客帝国文字掉落效果

    效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> ...

  9. Xamarin.Forms入门-使用 Xamarin.Forms 来创建跨平台的用户界面

    Xamarin.Forms 是一个跨平台的.基于原生控件的UI工具包,开发人员可以轻松的创建适用于 Android,iOS 以及 Windows Phone的用户界面.Xamarin.Forms 通过 ...

  10. AngularJS快速入门指南04：指令

    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...