audio标签样式修改

效果展示

上代码
html:

<div class="audio-box">
  <audio id="audioTag" src="music/tonghuazhen.mp3"></audio>
  <div class="a-progress">
    <span class="played-time" id="playedTime">00:00</span>
    <div class="pgs-total">
      <div class="pgs-play" id="progress" style="width: 1%;"></div>
    </div>
    <span class="audio-time" id="audioTime">0</span>
  </div>
  <div class="a-controls">
    <button class="play-pause" id="playPause">
      <span class="icon-btn icon-play"></span>
    </button>
    <div id="skipForward" class="skip-ward s-right"></div>
    <div id="skipBackward" class="skip-ward s-left"></div>
    <div id="turnNext" class="turn-ward t-right"></div>
    <div id="turnPrev" class="turn-ward t-left"></div>
  </div>
</div>

css:

// 自定义语音样式
.audio-box {
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid #dddddd;
}
.a-progress {
  width: 100%;
  margin: 20px auto;
  position: relative;
  padding: 0 65px;
  color: #3fcccc;
}
.a-progress > span {
  width: 50px;
  position: absolute;
  top: -1px;
}
.a-progress .played-time {
  left: 15px;
  text-align: left;
}
.a-progress .audio-time {
  right: 15px;
  text-align: right;
}
.a-progress .pgs-total {
  width: 100%;
  height: 16px;
  background-color: transparent;
  border-radius: 10px;
  position: relative;
}
.a-progress .pgs-total:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  bottom: 7px;
  background-color: #bbbbbb;
  border-radius: 10px;
  z-index: -1;
}
.a-progress .pgs-total .pgs-play {
  height: 100%;
  position: relative;
  border-radius: 10px;
}
.a-progress .pgs-total .pgs-play:before {
  content: '';
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  right: 0;
  background-color: #3fcccc;
  border-radius: 10px;
  z-index: 1;
}
.a-progress .pgs-total .pgs-play:after {
  content: '';
  position: absolute;
  right: -8px;
  width: 16px;
  height: 16px;
  top: 50%;
  margin-top: -8px;
  background-color: #3fcccc;
  border-radius: 50%;
  z-index: 1;
}
.a-controls {
  width: 100%;
  padding: 0;
  position: relative;
  text-align: center;
  margin-bottom: 28px;
}
.a-controls .play-pause {
  border: 0;
  outline: 0;
  padding: 0;
  width: 65px;
  height: 65px;
  margin: 0 28px;
}
.a-controls .play-pause .icon-btn {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.a-controls .play-pause .icon-play {
  background: url("../images/record-play.png");
  background-size: 100% 100%;
}
.a-controls .play-pause .icon-pause {
  background: url("../images/record-stop.png");
  background-size: 100% 100%;
}
.a-controls .skip-ward {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  margin-top: -15px;
}
.a-controls .s-left {
  left: 15px;
  background: url("../images/s-left.png");
  background-size: 100% 100%;
}
.a-controls .s-right {
  right: 15px;
  background: url("../images/s-right.png");
  background-size: 100% 100%;
}
.a-controls .turn-ward {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  margin-top: -20px;
}
.a-controls .t-left {
  left: 25%;
  margin-left: -20px;
  background: url("../images/t-left.png");
  background-size: 100% 100%;
}
.a-controls .t-right {
  right: 25%;
  margin-right: -20px;
  background: url("../images/t-right.png");
  background-size: 100% 100%;
}

获取音频对象

var audio = $('#audioTag').get(0);

播放暂停控制

$('#playPause').click(function () {
  audio.addEventListener('timeupdate', updateProgress, false); // 监听音频播放时间并更新进度条
  audio.addEventListener('ended', audioEnded, false); // 监听播放完成事件
  // 改变暂停/播放icon
  if (audio.paused) {
    audio.play();
    $('.icon-btn').removeClass('icon-play').addClass('icon-pause');
  } else {
    audio.pause();
    $('.icon-btn').removeClass('icon-pause').addClass('icon-play');
  }
})

添加进度调节控制事件

拖动进度条播放

// 读取视频长度,设置页面时长显示-loadedmetadata:指定视频/音频（audio/video）的元数据加载后触发
// audio.duration 获取音频的时长，单位为秒
$('#audioTag').on("loadedmetadata", function () {
  $('#audioTime').text(transTime(this.duration));
  $(document).on('touchend', '.pgs-total', function (e) {
    var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
    var X = x < 0 ? 0 : x;
    var W = $(this).width();
    var place = X > W ? W : X;
    audio.currentTime = (place / W) * audio.duration;
    $(this).children().css({width: (place / W) * 100 + "%"});
    updateProgress();
  });
});

快进15秒

$('#skipForward').on('click', function (e) {
  skipWard(15);
  updateProgress();
});

后退15秒

$('#skipBackward').on('click', function (e) {
  skipWard(-15);
  updateProgress();
});

四、调用公用事件

// 转换音频时长显示
	function transTime(time) {
		var duration = parseInt(time);
		var minute = parseInt(duration / 60);
		var sec = duration % 60 + '';
		var isM0 = ':';
		if (minute == 0) {
			minute = '00';
		} else if (minute < 10) {
			minute = '0' + minute;
		}
		if (sec.length == 1) {
			sec = '0' + sec;
		}
		return minute + isM0 + sec
	}
	// 更新进度条
	function updateProgress() {
		var audio = document.getElementById('audioTag');
		var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
		$('#progress').css('width', value * 1 + '%');
		$('#playedTime').html(transTime(audio.currentTime));
	}
	// 播放完成
	function audioEnded() {
		var audio = document.getElementById('audioTag');
		audio.currentTime = 0;
		audio.pause();
		$('#playPause>span').removeClass('icon-pause').addClass('icon-play');
	}
	// 快进快退
	function skipWard(value) {
		var audio = document.getElementById('audioTag');
		console.log(audio.currentTime, audio.duration)
		if (audio.currentTime + value >= audio.duration) {
			audio.currentTime = audio.duration;
		} else if (audio.currentTime + value <= 0) {
			audio.currentTime = 0;
		} else {
			audio.currentTime += value;
		}
	}

五、注意：
手机端和PC端存在不同，手机端刚加载页面的时候不会自动加载音频资源，所以获取不到音频的时长信息。
要想一加载页面就获取时长，可以通过启动播放再暂停的方式。

var audio = $('#audioTag').get(0);
audio.play(); // 移动端不自动加载音频，需要启动播放再暂停
audio.pause();

PC端不存在此问题。