前段時(shí)間分享了一款視頻播放器,點(diǎn)擊這里。今天介紹一款不錯(cuò)的音頻播放器——Amazing Audio Player。
Amazing Audio Player 是一個(gè)使用很方便的 Windows 和 MAC 應(yīng)用程序,允許你創(chuàng)建 HTML5 音頻播放器的網(wǎng)站。該音頻播放器兼容 iphone,ipad,Android,Chrome,Firefox,Safari,Opera 和 IE 7 / 8 / 9 / 10。同時(shí)它也可以發(fā)布成為一個(gè) WordPRess 的音頻播放器插件,Joomla 音頻播放器模塊或 Drupal 音頻播放器模塊。
<!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>
通過一系列的參數(shù),配置出個(gè)性化的音頻播放器。
PS:
官網(wǎng)下載的是一個(gè)應(yīng)用程序(.exe),安裝完成后打開程序就可以進(jìn)行相關(guān)設(shè)置,比如添加音頻、添加音頻背景圖、選擇播放器主題、設(shè)置播放器中按鈕控制、播放列表等等,所有參數(shù)設(shè)置完成后發(fā)布就可以了。發(fā)布后會(huì)生成一個(gè) demo,里面有 html、js、css 和圖片以及 Flash。如果想要應(yīng)用到自己的網(wǎng)站就要自己查看代碼,這里就不多說了。
新聞熱點(diǎn)
疑難解答
圖片精選