曹え 5811 发布于：2017-09-06 14:42:21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/cui.css" />
<link rel="stylesheet" href="css/lib.css" />
<link rel="stylesheet" href="css/audio.css" />
<link rel="stylesheet" href="css/reset.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if IE]>
<script src="js/html5.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body style="background-color:#f9f9f9;">
<div class="viewport">
<div class="slideshow">
<div class="music-player">
<div class="zj"></div>
<div class="info">
<div class="center">
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="progress jp-seek-bar">
<span class="jp-play-bar" style="width: 0%"></span>
<div class="timer right" id="all-time">00:00</div>
<div class="timer left" id="now-time">00:00</div>
</div>
</div>
<div class="controls"> <br>
<div class="play-controls"> <a href="javascript:;" class="icon-previous jp-previous" title="previous"></a> <a href="javascript:;" class="icon-play jp-play" title="play"></a> <a href="javascript:;" class="icon-pause jp-pause" title="pause"></a> <a href="javascript:;" class="icon-next jp-next" title="next"></a> </div>
<div class="volume-level jp-volume-bar disblock">
<!-- <span class="jp-volume-bar-value disblock" style="width: 50%" ></span> -->
<div id="volume"></div>
<a href="javascript:;" class="icon-volume-up jp-volume-max disblock" title="max volume" ></a>
<a href="javascript:;" class="icon-volume-down jp-mute disblock" title="mute"></a>
</div>
</div>
<div id="jquery_jplayer" class="jp-jplayer"></div>
</div>
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.jplayer.min.js"></script>
<script src="js/jplayer.playlist.min.js"></script>
<link rel="stylesheet" href="css/nouislider.css">
<script src="js/nouislider.js"></script>
<script>
// 自定义音量控制条
var slider = document.getElementById('volume');
noUiSlider.create(slider, {
start: [40],
connect: [true, false],
Step: 1,
range: {
'min': 0,
'max': 100
}
});
slider.noUiSlider.set()
slider.noUiSlider.on('change', function(){
$('audio')[0].volume = Math.floor(slider.noUiSlider.get() / 100);
});
// 音频
$(document).ready(function(){
var playlist = [
{
// 添加切换项目
title:"1",
artist:"",
mp3:"mp3/1.mp3",
poster: "images/1.jpg"
},
{
// 添加切换项目
title:"2",
artist:"",
mp3:"mp3/2.mp3",
poster: "images/bg.jpeg"
},
{
// 添加切换项目
title:"3",
artist:"",
mp3:"mp3/3.mp3",
poster: "images/1.jpg"
},
{
// 添加切换项目
title:"4",
artist:"",
mp3:"mp3/4.mp3",
poster: "images/bg.jpeg"
},
{
// 添加切换项目
title:"5",
artist:"",
mp3:"mp3/5.mp3",
poster: "images/1.jpg"
}
];
/* {
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://jq22.qiniudn.com/i2.mp3",
poster: "http://33.media.tumblr.com/bf9dc125a47dcca91ce5b3575bc3ba92/tumblr_nbmb3j8nU51sq3g2zo1_500.png"
},
这个可以自己随便加了
/mxlogo/web/fmbox/mp3/
*/
var cssSelector = {
jPlayer: "#jquery_jplayer",
cssSelectorAncestor: ".music-player"
};
// 音频参数
var options = {
swfPath: "http://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",
supplied: "ogv, m4v, oga, mp3"
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
var mp3 = document.getElementById('jp_audio_0');
settime = setInterval(function(){
alltime = $.jPlayer.convertTime(mp3.duration);
nowtime = $.jPlayer.convertTime(mp3.currentTime);
$('#all-time').text(alltime);
$('#now-time').text(nowtime);
},1000);
});
</script>
</body>
</html>下载地址：
登录后可以留言提问！
微信扫码登录
