头像

响应式mp3音乐播放器网页底部自适应代码

来源:http://www.sucaihuo.com/js/1937.html 素材火管理员 2017-05-15 11:04浏览(606) 收藏

兼容移动端和PC端的响应式音乐播放器,可以固定在页面底部的MP3播放器,自带音乐列表(可任意添加),可调节音量。
响应式mp3音乐播放器网页底部自适应代码
分类:手机特效 > 响应式模板 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 26

手机扫码访问:

下载资源 下载积分: 40 积分

页面底部自适应的MP3播放器,兼容移动端和PC端。

布局采用两侧固定像素列宽,播放进度条自动计算列宽的方式width: calc(100% - 168px),封面图片添加自动旋转特效。

@-webkit-keyframes rotating {
	from{
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
    	transform: rotate(0deg);
	}
	to{
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

可以任意添加歌曲,自由控制是否自动播放,大家自由发挥一下吧。

var audioFn = audioPlay({
		song : song,
		autoPlay : true  //是否立即播放第一首,autoPlay为true且song为空,会alert文本提示并退出
	});

	/* 向歌单中添加新曲目,第二个参数true为新增后立即播放该曲目,false则不播放 */
	audioFn.newSong({
		'cover' : 'images/cover4.jpg',
		'src' : 'http://so1.111ttt.com:8282/2016/5/06m/06/199061931237.m4a?tflag=1494769315&pin=a0b26b2dddd976d74724841f6d2641d6&ip=114.233.172.33#.mp3',
		'title' : '极乐净土 - GARNiDELiA'
	},false);
评论11
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 10楼
    10-17 21:48
    建宏
    好棒的插件啊!感谢您的分享
  • 头像 9楼
    08-10 19:33
    luogan129
    谢谢分享这么棒的插件,还是响应式的
  • 头像 8楼
    07-25 13:27
    djayong
    要是带频谱就好了
  • 头像 7楼
    07-17 11:28
    余温Simply
    可以的挺不错的
  • 头像 6楼
    05-24 16:01
    xiaowei
    不错!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  • 头像 5楼
    05-23 12:34
    503820911
    挺好的,下载来看看
  • 头像 4楼
    05-21 13:38
    赵清欢
    这个应该不是响应式吧 流泪
    1
    richer

    响应式的,兼容PC和移动端

  • 头像 3楼
    05-21 03:03
    ehgoo
    看起来还可以的说
  • 头像 板凳
    05-16 11:46
    joyer
    自适应效果很棒
  • 头像 椅子
    05-16 09:03
    胡胡
    挺不错的效果,看下!
1 2