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

来源:https://www.sucaihuo.com//js/1937.html 2017-05-15 11:04浏览(2668) 收藏

兼容移动端和PC端的响应式音乐播放器,可以固定在页面底部的MP3播放器,自带音乐列表(可任意添加),可调节音量。
响应式mp3音乐播放器网页底部自适应代码
分类:手机特效 > 响应式模板 难易:初级
查看演示 下载资源 下载积分: 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);

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2