mgtv - 素材

当前位置:Gxlcms > 播放器 > jQuery支持PC手机音乐播放器插件

jQuery支持PC手机音乐播放器插件

时间:2021-07-01 10:21:17 帮助过:0人阅读

jQuery支持PC手机音乐播放器插件 jQuery支持PC手机音乐播放器插件是一款基于Jplayer插件实现的,支持自定义歌曲地址、名称、图片等,响应式设计,对移动设备兼容良好。
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>jQuery支持PC手机音乐播放器插件 - mgtv素材</title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/styles.css"/>
</head>
<body>
<div id="example-wrapper">
    <ul id="example-size-picker">
        <li data-size="mobile">Mobile</li>
        <li data-size="large">Large</li>
        <li data-size="full">Full Screen</li>
    </ul>
    <div id="example-outer">
        <div id="example" data-size="large">

        </div>
    </div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/ttw-clarity-player.js"></script>
<script src="js/yepnope.js"></script>
<script type="text/javascript">
    $(function () {
        var myPlaylist = [
            {
                mp3:'playlist/yangcong.mp3',
                duration:'2:21',
                cover:'playlist/covers/yangcong.jpg',
                title:'洋葱',
                artist:'平安',
                background:'playlist/covers/bg.jpg'
            },
            {
                mp3:'playlist/Sugar.mp3',
                duration:'3:55',
                cover:'playlist/covers/Maroon5.jpg',
                title:'Maroon 5 - Sugar',
                artist:'Maroon 5',
                background:'playlist/covers/bg.jpg'
            },
            {
                mp3:'playlist/yangcong.mp3',
                duration:'3:49',
                cover:'playlist/covers/jay.jpg',
                title:'你听得到 - 无与伦比演唱会',
                artist:'周杰伦',
                background:'playlist/covers/bg.jpg'
            }
        ];
		
        var clarity = $('#example').ttwClarityPlayer(myPlaylist,{
				jPlayer:{
					supplied:'mp3',
					errorAlerts:true,	
					autoPlay:true,				
					warningAlerts:true,
					consoleAlerts:true
				}
			});
        
		$('#example-size-picker').on('click', 'li', function(){
            $('#example').attr('data-size', $(this).data('size'));
            clarity.manageLayout();
        });
    });
</script>


</body>