功能
- 上一曲下一曲
- 显示进度与时间
- 能够快进和后退
- 调节音量大小
- 实际情况样式需求可调
- 后期可能补充歌词功能
实现
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="stylesheet" href="../css/myreset.min.css">
<link rel="stylesheet" href="../css/swiper.min.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<section class="pages">
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<section class="topBtn clearfix">
<div class="voice"></div>
<div class="progressWrap">
<p>在线听宪法</p>
<p>科大讯飞提供语音合成</p>
<div class="progress">
<div class="bar"></div>
</div>
<div class="current">00:00</div>
<div class="duration">36:12</div>
</div>
</section>
</li>
<li class="swiper-slide">
<section class="topBtn clearfix">
<div class="voice"></div>
<div class="progressWrap">
<p>在线听宪法</p>
<p>科大讯飞提供语音合成</p>
<div class="progress">
<div class="bar"></div>
</div>
<div class="current">00:00</div>
<div class="duration">36:12</div>
</div>
</section>
</li>
</ul>
<!--底部按钮-->
<section class="butBtn">
<div class="swiper-pagination swiper-pagination-fraction" id="swiper-pagination"><span
class="swiper-pagination-current">1</span> / <span class="swiper-pagination-total">3</span></div>
<button class="getPoster">分享</button>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</section>
</div>
</section>
<script src="../js/common.js"></script>//兼容移动端处理rem的js
<script src="../js/jquery.js"></script>
<script src="../js/swiper.js"></script>
<script src="../js/index.js"></script>//下文中的js
</body>
</html>
css(实际用less写，抛弃传统的css写法)
html {
font-size: 100px;
width: 100%;
height: 100%;
max-width: 640px;
margin: 0 auto;
overflow: hidden;
background: #fff;
}
body {
width: 100%;
height: 100%;
max-width: 640px;
background: #fff no-repeat;
overflow: hidden;
font-size: .28rem;
position: relative;
top: 0;
left: 0;
}
.pages {
width: 100%;
height: 100%;
position: relative;
}
.pages .swiper-container {
width: 100%;
height: 100%;
position: relative;
}
.pages .swiper-wrapper {
position: relative;
}
.pages .swiper-slide {
width: 100%;
height: 100%;
position: relative;
float: left;
font-size: 18px;
background: #ffeec6;
}
.pages .topBtn {
display: block;
width: 4.6rem;
height: 1.4rem;
padding: .05rem .25rem;
padding-bottom: 0;
margin: .2rem auto;
background: #fcfcfc;
}
.pages .voice {
width: .82rem;
height: .82rem;
float: left;
background: url("../images/pause_03.png") no-repeat;
background-size: 100%;
margin-top: .1rem;
}
.pages .progressWrap {
float: left;
font-size: .2rem;
color: #b3b3b3;
width: 3.4rem;
margin: .1rem;
position: relative;
}
.pages .progressWrap p:nth-of-type(1) {
font-size: .26rem;
line-height: .26rem;
color: #b12e29;
}
.pages .progressWrap p:nth-of-type(2) {
font-size: .2rem;
margin-top: .1rem;
line-height: .2rem;
margin-bottom: .1rem;
color: #666666;
}
.pages .progressWrap .current {
position: absolute;
width: .7rem;
margin-top: .14rem;
text-align: center;
overflow: hidden;
color: #666666;
}
.pages .progressWrap .progress {
width: 3.4rem;
height: .06rem;
vertical-align: middle;
display: inline-block;
border-radius: .03rem;
background: #efefef;
position: relative;
}
.pages .progressWrap .progress .bar {
content: "";
display: block;
width: .06rem;
height: .3rem;
background: #b12e29;
position: absolute;
top: -0.1rem;
}
.pages .progressWrap .duration {
position: absolute;
color: #666666;
right: 0;
top: .26rem;
margin-top: .7rem;
text-align: center;
}
.pages .listsHide {
position: absolute;
right: -6.4rem;
transition: all .5s linear;
}
.butBtn {
width: 100%;
height: 1rem;
position: absolute;
z-index: 9;
bottom: 0;
background: rgba(255,238,198,.8);
-webkit-tap-highlight-color: transparent;
-webkit-box-shadow: 20px -20px 30px #ffeec6;
box-shadow: 20px -20px 30px #ffeec6;
}
.getPoster {
display: block;
height: .5rem;
line-height: .5rem;
text-align: center;
width: 2.4rem;
font-size: .28rem;
border: none;
border-radius: .25rem;
color: #fff;
-webkit-tap-highlight-color: transparent;
margin: 0 auto;
margin-top: .25rem;
margin-left: 2.5rem;
background: #333;
background-size: 100%;
background: #b12e29;
}
.swiper-pagination {
width: 1rem;
height: 1rem;
line-height: 1rem;
font-size: .28rem;
color: #d9000e;
margin-left: 1rem;
bottom: 0;
}
.swiper-button-prev {
width: .52rem;
height: .52rem;
background: url("../images/footBtn.png") no-repeat;
background-size: 100%;
margin-top: -0.28rem;
}
.swiper-button-prev:hover,
.swiper-button-prev:active {
background: url("../images/footBtn.png") no-repeat;
background-size: 100%;
}
.swiper-button-next {
width: .52rem;
height: .52rem;
background: url("../images/footBtn_05.png") no-repeat;
background-size: 100%;
margin-top: -0.28rem;
}
.swiper-button-next:hover,
.swiper-button-next:active {
background: url("../images/footBtn_05.png") no-repeat;
background-size: 100%;
}
js（定义类）
//初始化swiper
var voiceList = ['0.mp3','1.mp3', '2.mp3', '3.mp3',"4.mp3","5.mp3","6.mp3","7.mp3","8.mp3","9.mp3","10.mp3","11.mp3"];
function swiperInit() {
var mySwiper=new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationType: 'fraction',
touchAngle : 25,//触发水平角
touchMoveStopPropagation : false,//阻止touchmove冒泡事件
threshold : 80,//触发最小距离
//onlyExternal : true,
onSlideChangeEnd: changeCallback,
});
return mySwiper
}
swiperInit();
//换页回调
function changeCallback() {
if (myAudio.audio) {
myAudio.audioInit()
myAudio.audioProgressContral()
}
}
function DefinedAudio(voiceList,progressRemW){
this.voiceList=voiceList;//歌曲列表
this.timer='';//计时器
this.ProgressW=progressRemW*document.documentElement.clientWidth/640*100;//进度条长度
var that=this;
this.init=(function(){
that.createAudio();
that.audioInit();
that.play();
that.audioProgressContral();
})();
}
//创建audio标签
DefinedAudio.prototype.createAudio=function(){//创建audio
this.audio = document.createElement('audio');
document.body.appendChild(this.audio);
}
//初始audio
DefinedAudio.prototype.audioInit=function(){//初始化
var that=this;
this.audio.pause();
$('.voice').css('background-image','url(../images/pause_03.png)')
$('.bar').css('left', 0);
clearInterval(this.timer);
$('.current').html('00:00');
var curIndex = $('.swiper-pagination-current').html() - 1;
this.audio.src = 'http://microblog.people.com.cn/htmlfile/xfAudio/' + this.voiceList[curIndex]+'?'+Math.random();
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {//苹果设备预加载
this.audio.play()
this.audio.addEventListener('canplay', function () {
that.audio.pause();
var time = that.timeFormat(that.audio.duration);
$('.duration').html(time);
}, false);
} else {
this.audio.addEventListener('canplay', function () {
var time = that.timeFormat(that.audio.duration);
$('.duration').html(time);
}, false)
}
}
//时间格式换
DefinedAudio.prototype.timeFormat=function (time) {
var min = Math.floor(time / 60);
var sec = Math.floor(time % 60);
min = min < 10 ? "0" + min : "" + min;
sec = sec < 10 ? "0" + sec : "" + sec;
return min + ":" + sec;
}
//手动控制音频进度
DefinedAudio.prototype.audioProgressContral=function (){
var that=this;
var bar= $('.bar')[$('.swiper-pagination-current').html()-1];
bar.addEventListener('touchstart',start,false);
bar.addEventListener('touchmove',move,false)
bar.addEventListener('touchend',end,false)
function start(e){
that.audio.L=$('.bar').css('left');
that.audio.X=e.touches[0].clientX
if(that.audio.paused){
that.audio.ProgressFlag=1;
}else{
that.audio.ProgressFlag=0;
}
return false;
}
function move(e){
that.audio.changeX=e.changedTouches[0].clientX-that.audio.X;
that.audio.changeX=that.audio.changeX+parseFloat(that.audio.L)
that.audio.endX=that.audio.changeX<0?0:(that.audio.changeX>that.ProgressW?that.ProgressW:that.audio.changeX)
$('.bar').css('left',that.audio.endX);
that.audio.currentTime=that.audio.endX/that.ProgressW*that.audio.duration;
var time = that.timeFormat(that.audio.currentTime);
$('.current').html(time);
return false;
}
function end(e){
if(that.audio.ProgressFlag!==1){
that.audio.play();
}else{
that.audio.pause();
}
return false;
}
}
//播放与暂停
DefinedAudio.prototype.play=function () {
var that=this;
clearInterval(this.timer);
if (this.audio.paused) {
this.audio.play();
$('.voice').css('background-image','url(../images/play_03.png)')
} else {
this.audio.pause();
$('.voice').css('background-image','url(../images/pause_03.png)')
clearInterval(this.timer);
return;
}
//进度条
progress()
this.timer = setInterval(progress, 1000);
function progress() {
if (that.audio.currentTime > that.audio.duration) {
clearInterval(that.timer);
}
var time = that.timeFormat(that.audio.currentTime);
$('.current').html(time);
var $bar = $('.bar');
$bar.css('left', that.audio.currentTime / that.audio.duration * 100 + "%");
}
}
//控制音量(volume 属性设置或返回音频的音量，从 0.0 (静音) 到 1.0 (最大声)。)
DefinedAudio.prototype.vol=function(n){
this.volume = n;
}
//实例
var myAudio=new DefinedAudio(voiceList,'3.4');
$('.voice').on('click',function(){
myAudio.play();
})
