让你的博客不再寂寞——博客背景music by:嘟嘟电台

  • 内容
  • 相关

    首先做一个说明。

    q:为何不愿分享播放器?

    a:开始代码刚从李明浩博客移植过来,一些东西不完善,代码是死的。php代码涉及到数据库不便分享;

        并且,添加音乐比较繁琐,所以就暂时保留,不是我小气

 

   注:要达到效果,请先联系博主开通api,免费开通(为了防止恶意盗用)

    

    1.右键查看本博客源码下载


css部分:
<link href="http://tv1314.com/content/templates/bowen/js/font-awesome.min.css" rel="stylesheet/less">
<link href="http://tv1314.com/content/templates/bowen/player.less" rel="stylesheet/less">
<link href="http://tv1314.com/content/templates/bowen/js/font-awesome.min.css" rel="stylesheet">
js部分
<script src="/player/js/mousewheel.js"></script>
<script src="/player/js/scrollbar.js"></script>
<script src="/player/player.js" type="text/javascript"></script>
html部分
<div id="wenkmPlayer">
		<div class="player">
			<div class="infos">
				<div class="songstyle"><i class="fa fa-music"></i> <span class="song"></span></div>
                <div class="timestyle"><i class="fa fa-clock-o"></i> <span class="time"></span></div>
				<div class="artiststyle"><i class="icon-user"></i><span class="artist"></span><span class="artiststyle1"><i class="icon-th-list"></i><span class="artist1"></span></span></div>
			</div>
			<div class="control">
				<i class="loop fa fa-retweet current" title="顺序播放"></i>
				<i class="prev fa fa-backward" title="上一首"></i>
				<div class="status">
					<b>
						<i class="play fa fa-play" title="播放"></i>
						<i class="pause fa fa-pause" title="暂停"></i>
					</b>
				</div>
				<i class="next fa fa-forward" title="下一首"></i>
				<i class="random fa fa-random" title="随机播放"></i>
			</div>
			<div class="bottom">
				<div class="volume">
					<i class="mute fa fa-volume-off"></i>
					<i class="volumeup fa fa-volume-up"></i>
					<div class="progress">
						<div class="volume-on ts5">
							<div class="drag" title="音量"></div>
						</div>
					</div>
				</div>
				<div class="switch-playlist">
					<i class="fa fa-bars" title="播放列表"></i>
				</div>
			</div>
			<div class="cover"></div>
		</div>
		<div class="playlist">
			<div class="header"><i class="fa fa-music"></i></div>
			<div class="list"></div>
		</div>
		<div class="flat">
			<i class="fa fa-music"></i>
			<i class="fa fa-music"></i>
			<i class="fa fa-music"></i>
			<i class="fa fa-music"></i>
			<i class="fa fa-music"></i>
			<i class="fa fa-music"></i>
		</div>
		<div class="switch-player">
			<i class="fa fa-angle-right"></i>
		</div>
	</div>
<div id="wenkmTips"></div>
<div id="wenkmLrc"></div>
<div id="wenkmKsc"></div>
<div class="myhk_pjax_loading_frame"></div><div class="myhk_pjax_loading"></div>

    请自行下载本地化,不要调用本站,一经发现,后果自负


    在头部适当位置载入css ,在html结束之前载入js,在body结束之前载入html

    完成上述部分,刷新网页看是否加载播放器,成功进入下一步


    2.进入fm.tv1314.com 注册你的音乐账户。添加几首喜欢的音乐。然后记下你的账户ID

        打开player.js 找到user_id 设置为你的id

        完成上述操作,刷新浏览器看是否读取音乐正常播放。


现在你就可以通过嘟嘟音乐管理你的背景音乐了。是不是很方便呢?


如有不懂的请回复或联系博主。

本文标签:

版权声明:若无特殊注明,本文皆为《鬼少》原创,转载请保留文章出处。

本文链接:让你的博客不再寂寞——博客背景music by:嘟嘟电台 - http://tv1314.com/post-207.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

63条评论
  1. avatar

    Twitter营销 Lv.1 Firefox 47.0 Firefox 47.0 Windows Windows 回复

    [美味] 支持,不错的文章

    广东省广州市 电信

    1. 鬼少 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Windows Windows 回复

      广东省深圳市 电信

  2. avatar

    小冉博客 Lv.1 Chrome 52.0.2743.116 Chrome 52.0.2743.116 Windows Windows 回复

    用的wp音乐插件修改的 就是没有歌词

    山东省济南市 联通

    1. avatar

      博客大全网 Lv.1 Chrome 47.0.2526.108 Chrome 47.0.2526.108 Windows 7 Windows 7 回复

      不错 支持

      山东省聊城市 联通

      1. avatar

        张文庆 Lv.1 Chrome 51.0.2704.106 Chrome 51.0.2704.106 Windows Windows 回复

        wenkmPlayer插件很漂亮,背景音乐也很赞

        山西省运城市 联通

        1. avatar

          传奇私服 Lv.1 Chrome 45.0.2454.101 Chrome 45.0.2454.101 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          很喜欢这个博客啊
          传奇私服 http://bbs.caipiaodian.com.cn 热血传奇私服sf

          辽宁省辽阳市 联通

          1. avatar

            安好gg520 Lv.1 Chrome 45.0.2454.101 Chrome 45.0.2454.101 Windows 8.1 x64 Edition Windows 8.1 x64 Edition 回复

            真的很不错。。。。www.anhao520.com

            广东省深圳市 联通

            00:00 / 00:00
            顺序播放