【jquery】一款不错的音频播放器—

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

介绍：

DEMO：

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

DEMO：点击下载。

最新文章

热门文章