前段时间分享了一款视频播放器,点击这里。今天介绍一款不错的音频播放器——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。如果想要应用到自己的网站就要自己查看代码,这里就不多说了。