wordpress音乐播放器(纯代码,免插件)

          阅读(182)

    wordpress音乐播放器(纯代码,免插件)

    分享一个音乐播放器,纯代码的,我这里用在了wordpress上,当然,大家亦可以移植其他平台哦。

    wordpress音乐播放器(纯代码,免插件)

    1.文件准备

     

    下载文章最后的懒人包,解压得到三个文件。js、css、使用说明。

    将“player.js”丢到主题的js目录,同理可得,将“player.css”丢到主题目录的css目录。“说明文件”呢,咱不丢了,打开吧。

    2.footer.php引用

    打开主题目录下的“footer.php”文件,在文件的</html>前插入以下代码。

    <!--音乐播放器-->
    <link rel="stylesheet" href="/wp-content/themes/forget/css/player.css">
    <script src="/wp-content/themes/forget/js/jquery.marquee.min.js"></script>
    <div id="QPlayer"><div id="pContent"><div id="player"><span class="cover"></span><div class="ctrl"><div class="musicTag marquee"><strong>Title</strong><span> - </span><span class="artist">Artist</span></div><div class="progress"><div class="timer left">0:00</div><div class="contr"><div class="rewind icon"></div><div class="playback icon"></div><div class="fastforward icon"></div></div><div class="right"><div class="liebiao icon"></div></div></div></div></div><div class="ssBtn"><div class="adf"></div> </div></div><ol id="playlist"></ol></div>
    <script src="/wp-content/themes/forget/js/player.js"></script>

    刷新一下网页,可以发现音乐播放器已经可以显示了。

    3.DIY

    1.能显示效果还不够呢,播放列表里都是兆兆添加的歌吧,你肯定不稀饭。想替换成你自己的歌不~求我啊~

    打开“player.js”,懂了吧~替换链接即可。对应如下。

    title --> 音乐名

    artist --> 歌手名

    mp3 --> 歌曲名

    cover –>专辑(歌手)图片,最好是正方形的

    你一定又在发愁了,一首首歌挺费空间流量的……兆兆之前写过几篇文章,关于音乐外链的,有兴趣的童鞋可以看看哦。

    2.关于播放器的颜色、样式等DIY呢,打开“player.css”,发挥你的创意吧~

    好了,教程到此结束。

    谢谢!

    哦对了,忘了链接哈。


    2017-03-18 22:21:25


    喜欢 1



还没有人抢沙发呢~

加载中……