jQuery UI的MP3音乐播放器代码

一款jQuery UI的MP3音乐播放器代码，整体界面比较简洁大方，除了具有正常的播放功能外，还可以设置MP3的下载、收藏和分享等功能，喜欢的童鞋请收下吧。

页面的head部分，需引入播放器样式文件和font-awesome图标字体库，代码如下：

<link type="text/css" rel="stylesheet" href="css/m-details.css" /> <link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">

页面的body部分，用了多个div容器的嵌套结构，对照演示的样式基本都能看懂，代码如下：

<div class="m-content">     <!--播放器-->     <div class="m-player">         <div class="m-player-details">             <div class="m-title">Take Me to Infinity </div>             <!--效果html开始-->             <div id="player">                 <div class="ctrl">                     <div class="control">                         <div class="left lefticon">                             <div class="playback icon"></div>                             <a href="#" class="img"></a>                         </div>                         <div class="timer">0:00</div>                         <div class="progress">                             <div class="slider">                                 <div class="loaded"></div>                                 <div class="pace"></div>                             </div>                         </div> 

                        <div class="volume right">                             <div class="mute icon left"></div>                             <div class="slider left">                                <div class="pace"></div>                             </div>                         </div>                     </div> 

                </div>             </div>             <!--歌曲详细内容-->             <div class="m-song-details">                 <div class="m-singer">歌手：<span>Consoul Trainin</span></div>                 <div class="m-language">语言：<span>英语</span></div>                 <div class="m-album">所属专辑：<span>Take Me to Infinity</span></div>                 <div class="m-time">发行时间：<span>2016-07-15</span></div>             </div>             <div class="download">                 <ul>                     <li class="collection"><a href="#">收藏</a></li>                     <li class="shared">                         <div class="bdsharebuttonbox">                             <a href="#" class="share bds_more" data-cmd="more">分享</a>                          </div>                     </li>                 </ul>             </div>         </div>     </div> </div>

页面的底部，需引入jQuery库、jQuery UI和播放器插件，ginger设置好百度分享的相关参数，代码如下：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script type="text/javascript" src="js/m-details.js"></script> <!-- 百度分享js --> <script type="text/javascript"> window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":["qzone","tsina","weixin","tqq"],"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)]; </script>
赞 (0)

相关推荐