经验分享程序开发文档资料数据资源其它资源

扁平html5音乐播放器代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 扁平html5音乐播放器代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

扁平html5音乐播放器代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>扁平html5音乐播放器代码</title>
    <link rel="stylesheet" type="text/css" href="Css/tplayer.css" />
    <link rel="stylesheet" type="text/css" href="Plugins/FontAwesome4.1/css/font-awesome.min.css" />
    <script src="Js/jquery.js"></script>
    <script src="Js/jquery-ui.js"></script>
    <script src="Js/tPlayer.js"></script>
</head>
<body>
    <div id="t_wrapper">
        <div id="t_cover">
        	<img src="Images/logo.png">
        </div>
    	<div id="t_top">
    		<div id="t_title_info">
    			<span class="artist"></span>
    			<span class="title"></span>
    		</div>
    	</div>
    	<div id="t_middle">
    		<div id="play"></div>
    		<div id="pause" class="hidden">
    		</div>
    		<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="t_progress">
                <div id="trackInfo">
                    <div id="error">
    				</div>
                    <div id="current">0:00</div>
                    <div id="duration">0:00</div>
    			</div>
    			<div style="width: 0%;" class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
            	<span style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span>
            </div>
    		<span id="prev"></span>
            <span id="next"></span>
    	</div>
    	<div id="t_bottom">
            <div id="range">
                <div id="val"></div>
                <div id="vol"></div>
                <div id="rangeVal"></div>
            </div>
            <div id="t_pls_show" class="noselectpls"></div>
    	</div>
    </div>
    <div id="playlist">
        <ul>
            <li t_cover="goldfrapp.jpg" t_artist="Transformers2" t_name="Transformers2">
            	<a href="#">Goldfrapp –Jo</a>
            	<audio preload="none">
                    <source src="Media/Transformers2.mp3" type="audio/mp3">
                    <source src="Media/Transformers2.htm" type="audio/ogg; codecs=vorbis">
            	</audio>
            </li>
            <li t_cover="Moby.jpg" t_artist="Moby" t_name="The Last Day (with Skylar Grey)">
            	<a href="#">Moby – The Last Day (with Skylar Grey)</a>
                <audio preload="none">
                    <source src="Media/Transformers2.mp3" type="audio/mp3">
                    <source src="Media/Transformers2.htm" type="audio/ogg; codecs=vorbis">
                </audio>
            </li>
            <li t_cover="lina.jpg" t_artist="LINA nananan" t_name="JIENIFO">
            	<a href="#">LINA nananan– JIENIFO</a>
                <audio preload="none">
                    <source src="Media/Transformers2.mp3" type="audio/mp3">
                    <source src="Media/Transformers2.htm" type="audio/ogg; codecs=vorbis">
                </audio>
            </li>
            <li t_cover="birdy.jpg" t_artist="Birdy" t_name="Shelter">
            	<a href="#">Birdy – Shelter</a>
                <audio preload="none">
                    <source src="Media/Transformers2.mp3" type="audio/mp3">
                    <source src="Media/Transformers2.htm" type="audio/ogg; codecs=vorbis">
                </audio>
            </li>
        </ul>
    </div>
</body>
</html>

JS代码(tPlayer.js):

var styleChange ={
	pause:{
}
,play:{
}
,plsbutton:{
}
}
;
	styleChange.play.change = function(){
	$('#play').addClass('hidden');
	$('#pause').removeClass('hidden');
}
;
	styleChange.pause.change = function(){
	$('#pause').addClass('hidden');
	$('#play').removeClass('hidden');
}
;
	styleChange.plsbutton.change = function(){
	$('#t_pls_show').addClass('selectpls');
	$('#t_pls_show').removeClass('noselectpls');
}
;
	styleChange.plsbutton.recovery = function(){
	$('#t_pls_show').addClass('noselectpls');
	$('#t_pls_show').removeClass('selectpls');
}
;
	function initAudio(elem){
	var title = elem.attr('t_name');
	var cover = elem.attr('t_cover');
	var artist = elem.attr('t_artist');
	$('.title').text(' - ' + title);
	$('.artist').text(artist);
	$('#t_cover').html('<img src="Images/' + cover+'">');
}
$(document).ready(function(){
	var dur,durM,val,mus,elem,prog;
	var Pl = 0;
	$('#playlist ul li a').click(function(){
	$('#t_title_info').animate({
	top:"-1.5em",opacity:"hide"}
,0);
	initAudio($(this).parent("li"));
	$('#error').text('');
	styleChange.play.change();
	console.log(mus);
	if(mus){
	mus[0].pause();
	mus[0].currentTime = 0;
	$('li').removeClass('active');
}
mus = $(this).next("audio");
	$(this).parent("li").addClass('active');
	mus[0].play();
}
);
	$('#t_progress').slider({
	value:0,orientation:"horizontal",range:"min",animate:true,step:1}
);
	$('audio').on("timeupdate",function(){
	mus[0].volume = val/100;
	d = this.duration;
	c = this.currentTime;
	curM = Math.floor(c/60);
	curS = Math.round(c - curM*60);
	$('#current').text(curM + ':' + curS);
	$('#t_progress').slider({
	max:d,min:0,value:c}
);
}
);
	$('audio').on("playing",function (){
	dur = this.duration;
	durM = Math.floor(dur/60) + ':' + Math.round((dur - Math.floor(dur/60))/10);
	$('#duration').text(durM);
	$(this).parent("li").addClass('active');
	$('#t_title_info').animate({
	top:"0em",opacity:"show"}
,500);
}
);
	$('audio').on("ended",function(){
	mus = $(this).parent('li').next('li').first();
	mus = mus.children('audio');
	$(this).parent("li").addClass('active');
	var next = $('li.active').next();
	$('li').removeClass('active');
	if(mus[0]){
	initAudio(next);
	mus[0].play();
}
else{
	$('#error').text('最后一首歌！');
	$('#t_cover').html('<img src="Images/logo.png">');
}
}
);
	//play button$('#play').click(function(){
	if(mus){
	mus[0].play();
	styleChange.play.change();
	$('#error').text('');
}
else{
	$('#error').text('请先选择要播放的歌曲！');
}
}
);
	// pause button$('#pause').click(function(){
	if(mus){
	mus[0].pause();
	styleChange.pause.change();
}
else{
	$('#error').text('请先选择要播放的歌曲！');
}
}
);
	//next button$('#next').click(function(){
	mus[0].pause();
	mus[0].currentTime = 0;
	mus = mus.parent('li').next('li').first();
	mus = mus.children('audio');
	var next = $('li.active').next();
	$('#t_title_info').animate({
	top:"-1.25em",opacity:"hide"}
,0);
	$('li').removeClass('active');
	if(mus[0]){
	initAudio(next);
	mus[0].play();
}
else{
	$('#error').text('已经到底啦，请选择歌曲！');
	$('#t_cover').html('<img src="Images/logo.png">');
	mus = null;
}
}
);
	//prev button$('#prev').click(function(){
	mus[0].pause();
	mus[0].currentTime = 0;
	mus = mus.parent('li').prev('li').last();
	mus = mus.children('audio');
	var prev = $('li.active').prev();
	$('li').removeClass('active');
	$('#t_title_info').animate({
	top:"-1.25em",opacity:"hide"}
,0);
	if(mus[0]){
	initAudio(prev);
	mus[0].play();
}
else{
	$('#error').text('已经到顶啦，请选择歌曲！');
	$('#t_cover').html('<img src="Images/logo.png">');
	mus = null;
}
}
);
	//volume$('#rangeVal').slider({
	value:60,orientation:"horizontal",range:"min",animate:true,step:1}
);
	// volume textval = $('#rangeVal').slider("value");
	$('#val').text(val);
	var tooltip = $('#val');
	tooltip.hide();
	$('#rangeVal').slider({
	start:function( event,ui ){
	tooltip.fadeIn('fast');
}
,stop:function(event,ui){
	tooltip.fadeOut('fast');
}
,slide:function( event,ui ){
	val = ui.value;
	tooltip.css('left',val-30).text(ui.value);
	$('#val').text(val);
	if(mus){
	mus[0].volume = val/100;
}
else{
	$('#error').text('请先选择要播放的歌曲！');
}
}
}
);
	// progress$('#t_progress').slider({
	start:function( event,ui ){
	mus[0].pause();
}
,stop:function( event,ui ){
	prog = ui.value;
	mus[0].currentTime = prog;
	mus[0].play();
	styleChange.play.change();
}
}
);
	//playlist button$('#t_pls_show').click(function(){
	if (Pl == 0){
	styleChange.plsbutton.change();
	Pl = 1;
}
else{
	styleChange.plsbutton.recovery();
	Pl = 0;
}
$('#playlist').slideToggle();
}
);
}
);

CSS代码(tplayer.css):

*{margin:0em;padding:0em;}
:focus{outline:none;}
::selection{background:#3ec3d5;/* Safari */
color:#fff;}
::-moz-selection{background:#3ec3d5;/* Firefox */
color:#fff;}
body{-webkit-tap-highlight-color:rgba(0,0,0,0);background:#F1F2F3;font-family:'Open Sans';font-weight:100;font-size:100%;margin:0em;padding:0em;}
/* tplayer style*/
#t_wrapper{position:relative;width:960px;margin:0px auto;height:12.5em;background:#fff;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;}
#t_cover{position:relative;float:left;height:12.5em;width:12.5em;overflow:hidden;}
#t_cover img{position:relative;min-width:12.5em;max-height:12.5em;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
#t_cover img{-webkit-animation:coveroin 0.75s;-webkit-animation-fill-mode:forwards;-moz-animation:coveroin 0.75s;-moz-animation-fill-mode:forwards;-mos-animation:coveroin 0.75s;-mos-animation-fill-mode:forwards;-o-animation:coveroin 0.75s;-o-animation-fill-mode:forwards;animation:coveroin 0.75s;animation-fill-mode:forwards;}
#t_top{position:relative;height:3.375em;padding-top:2.25em;padding-left:13.75em;padding-right:1.25em;}
#t_title_info{position:relative;color:#555;font-size:1.75em;text-align:center;line-height:.67em;white-space:nowrap;-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
.artist{font-weight:400;}
#t_middle{position:relative;height:1.25em;margin:0em 1.25em 0 13.75em;}
#play{position:relative;width:1.25em;height:1.25em;float:left;color:#555;cursor:pointer;}
#play:hover{color:#3EC3D5;}
#play:before{position:absolute;margin-top:-.074em;content:"\f04b";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:1.5em;}
#pause{position:relative;width:1.25em;height:1.25em;float:left;color:#555;cursor:pointer;}
#pause:hover{color:#3EC3D5;}
#pause:before{position:absolute;margin-top:-.074em;content:"\f04c";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:1.5em;}
.visible{display:block;}
.hidden{display:none;}
#t_progress{position:relative;margin:0 1.25em;width:-webkit-calc(100% - 7.5em);width:-moz-calc(100% - 7.5em);width:-mos-calc(100% - 7.5em);width:-o-calccalc(100% - 7.5em);width:calc(100% - 7.5em);height:1.25em;float:left;background:#555;cursor:pointer;}
.ui-slider-horizontal{}
.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;}
.ui-slider-horizontal .ui-slider-range{top:0;height:100%;background-color:#3ec3d5;}
#current{position:absolute;left:0.3125em;color:#fff;z-index:5;}
#duration{position:absolute;right:0.3125em;color:#fff;z-index:5;}
#error{position:absolute;color:#fff;z-index:5;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);}
#prev{position:relative;width:1.25em;height:1.25em;float:left;color:#555;cursor:pointer;}
#prev:hover{color:#3EC3D5;}
#prev:before{position:absolute;margin-top:-.074em;content:"\f04a";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:1.5em;}
#next{position:relative;width:1.25em;height:1.25em;float:left;margin-left:1.25em;color:#555;cursor:pointer;}
#next:hover{color:#3EC3D5;}
#next:before{position:absolute;margin-top:-.074em;content:"\f04e";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:1.5em;}
#t_bottom{position:relative;height:5.625em;margin:0 1.25em 0 13.75em;}
#range{position:absolute;bottom:1.25em;right:0em;}
#vol:before{content:"\f028";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:1.15em;position:absolute;left:-25px;top:-5px;color:#555;}
#val{position:absolute;display:block;top:-2.188em;width:2.188em;height:1.3em;text-align:center;border:1px solid #3EC3D5;box-sizing:border-box;background:#3EC3D5;color:#fff;}
#val:after{position:absolute;content:"";bottom:-0.68em;right:-0.068em;width:0;height:0;border-top:0.625em solid #3EC3D5;border-left:0.625em solid transparent;}
#rangeVal{position:relative;width:6.25em;height:0.3125em;background:#555;cursor:pointer;}
#range .ui-slider-handle{position:absolute;width:0.75em;height:0.75em;border-radius:100%;top:-0.175em;background:#555;}
.noselectpls{position:absolute;bottom:2em;left:50%;cursor:pointer;color:#555;-webkit-animation:heyopenpls 2s ease infinite;-moz-animation:heyopenpls 2s ease infinite;-mos-animation:heyopenpls 2s ease infinite;-o-animation:heyopenpls 2s ease infinite;animation:heyopenpls 2s ease infinite;}
.noselectpls:hover{color:#3EC3D5;}
.noselectpls:before{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:900;font-size:2.25em;position:absolute;-webkit-animation:plshowbtndwn .5s;-webkit-animation-fill-mode:forwards;-moz-animation:plshowbtndwn .5s;-moz-animation-fill-mode:forwards;-mos-animation:plshowbtndwn .5s;-mos-animation-fill-mode:forwards;-o-animation:plshowbtndwn .5s;-o-animation-fill-mode:forwards;animation:plshowbtndwn .5s;animation-fill-mode:forwards;}
.selectpls{color:#3EC3D5;position:absolute;bottom:2em;left:50%;cursor:pointer;}
.selectpls:before{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:900;font-size:2.25em;position:absolute;-webkit-animation:plshowbtnup .5s;-webkit-animation-fill-mode:forwards;-moz-animation:plshowbtnup .5s;-moz-animation-fill-mode:forwards;-mos-animation:plshowbtnup .5s;-mos-animation-fill-mode:forwards;-o-animation:plshowbtnup .5s;-o-animation-fill-mode:forwards;animation:plshowbtnup .5s;animation-fill-mode:forwards;}
@-webkit-keyframes heyopenpls{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
40%{-webkit-transform:translateY(-1.25em);}
60%{-webkit-transform:translateY(-.75em);}
}
@-moz-keyframes heyopenpls{0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
40%{-moz-transform:translateY(-1.25em);}
60%{-moz-transform:translateY(-.75em);}
}
@-mos-keyframes heyopenpls{0%,20%,50%,80%,100%{-mos-transform:translateY(0);}
40%{-mos-transform:translateY(-1.25em);}
60%{-mos-transform:translateY(-.75em);}
}
@-o-keyframes heyopenpls{0%,20%,50%,80%,100%{-o-transform:translateY(0);}
40%{-o-transform:translateY(-1.25em);}
60%{-o-transform:translateY(-.75em);}
}
@keyframes heyopenpls{0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(-1.25em);}
60%{transform:translateY(-.75em);}
}
@-webkit-keyframes plshowbtnup{0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(180deg);}
}
@-moz-keyframes plshowbtnup{0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(180deg);}
}
@-mos-keyframes plshowbtnup{0%{-mos-transform:rotate(0deg);}
100%{-mos-transform:rotate(180deg);}
}
@-o-keyframes plshowbtnup{0%{-o-transform:rotate(0deg);}
100%{-o-transform:rotate(180deg);}
}
@keyframes plshowbtnup{0%{transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
@-webkit-keyframes plshowbtndwn{0%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes plshowbtndwn{0%{-moz-transform:rotate(180deg);}
100%{-moz-transform:rotate(360deg);}
}
@-mos-keyframes plshowbtndwn{0%{-mos-transform:rotate(180deg);}
100%{-mos-transform:rotate(360deg);}
}
@-o-keyframes plshowbtndwn{0%{-o-transform:rotate(180deg);}
100%{-o-transform:rotate(360deg);}
}
@keyframes plshowbtndwn{0%{transform:rotate(180deg);}
100%{transform:rotate(360deg);}
}
@-webkit-keyframes coveroin{0%{-webkit-transform:translate(-50%,-150%);}
100%{-webkit-transform:translate(-50%,-50%);}
}
@-moz-keyframes coveroin{0%{-moz-transform:translate(-50%,-150%);}
100%{-moz-transform:translate(-50%,-50%);}
}
@-mos-keyframes coveroin{0%{-mos-transform:translate(-50%,-150%);}
100%{-mos-transform:translate(-50%,-50%);}
}
@-o-keyframes coveroin{0%{-o-transform:translate(-50%,-150%);}
100%{-o-transform:translate(-50%,-50%);}
}
@keyframes coveroin{0%{transform:translate(-50%,-150%);}
100%{transform:translate(-50%,-50%);}
}
/* playlist style*/
#playlist{background:#3EC3D5;color:#fff;width:960px;margin:0px auto;}
#playlist ul{margin-left:2.15em;}
#playlist li{height:2.5em;padding-left:0.75em;border-bottom:1px solid rgba(255,255,255,0.25);position:relative;white-space:nowrap;}
#playlist li:hover{background:rgba(255,255,255,0.25);}
#playlist a{display:block;width:100%;height:100%;color:#fff;text-decoration:none;line-height:2.5em;font-weight:400;overflow:hidden;text-overflow:ellipsis;}
.active{background:rgba(255,255,255,0.25);list-style-type:none;}
.active:before{content:'\f001';font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:1.15em;position:absolute;left:-25px;top:12px;}
/* mobile */
@media all and (max-width:640px){#t_wrapper{height:25em;}
#t_cover{height:12.5em;width:100%;}
#t_cover img{min-width:100%;max-height:200%;}
#t_top{height:3.375em;padding-top:14.75em;padding-left:1.25em;padding-right:1.25em;}
#t_middle{margin:-0.25em 1.25em 0.5em 1.25em;}
#t_bottom{margin:0 1.25em 0 1.25em;}
#t_progress{position:absolute;margin:2.5em 0em;width:100%;height:1.25em;float:left;background:#555;cursor:pointer;}
#prev{margin-left:1.25em;}
}
/* mobile */
@media all and (max-width:350px){.noselectpls{left:40%;}
.selectpls{left:40%;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
2.09 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
2.09 MB
立即下载
涂蓓
了解
打赏作者 鼓励作者
Html Js 播放器
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章