zoukankan      html  css  js  c++  java
  • 【jquery】一款不错的音频播放器——Amazing Audio Player

    前段时间分享了一款视频播放器,点击这里。今天介绍一款不错的音频播放器——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;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,
            image 100,
            infoformat: "By %ARTIST%",
            playpauseimage: "playpause-48-48-0.png",
            playpauseimage 48,
            playpauseimageheight: 48,
            prevnextimage: "prevnext-48-48-0.png",
            prevnextimageheight: 48,
            prevnextimage 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。如果想要应用到自己的网站就要自己查看代码,这里就不多说了。

  • 相关阅读:
    面试中遇到递归算法题别慌--常见递归算法题的解题思路
    Xml日志记录文件最优方案(附源代码)
    linux下源码安装软件
    文本比较算法Ⅴ——回顾贴,对前面几篇文章的回顾与质疑
    从内存中直接运行PE程序
    谈谈Linux内核驱动的coding style
    【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox
    玩转C链表
    麻省理工《C内存管理和C++面向对象编程》笔记---第一讲:认识C和内存管理
    Dll注入技术之输入法注入
  • 原文地址:https://www.cnblogs.com/yjzhu/p/4826093.html
Copyright © 2011-2022 走看看