效果圖:
代碼:
html:
<div class="audio-wrapper clearfix">
<audio src="../images/en_01.mp3" loop="loop" id="audio">
</audio>
<div class="audio-left" id="audioPlayer">
<img class="apl" style="display: block;" src="../images/start.png" alt="">
<img class="apl_01" style="display: none;" src="../images/stop.png" alt="">
</div>
<div class="audio-right">
<p class="font_b">意外.mp3</p>
<div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span>
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span
class="audio-length-total">00:00</span></div>
</div>
</div>
css:
注:1rem = 40px;
.audio-wrapper {
width: 15.45rem;
height: 3rem;
border: .05rem solid #c2d6e5;;
border-radius: 0.8rem;
background-color: #ffffff;
margin: 0 auto;
position: relative;
}
.audio-left {
width: 1.72rem;
height: 1.72rem;
text-align: center;
line-height: 1.72rem;
border-radius: 50%;
// border: 1px solid green;
position: absolute;
left: .85rem;
top: 50%;
margin-top: -1.72/2rem;
cursor: pointer;
overflow: hidden;
}
.audio-left img {
position: relative;
cursor: pointer;
}
.audio-right {
margin-right: 1rem;
float: right;
width: 11.3rem;
height: 100%;
position: relative;
overflow: hidden;
}
.audio-right p {
font-size: .7rem;
position: absolute;
left: 0;
top: .4rem;
color: #ec9400;
width: 11rem;
height: .75rem;
line-height: .75rem;
text-align: left;
}
.progress-bar-bg {
background-color: #d9d9d9;
position: relative;
height: 3/40rem;
cursor: pointer;
// margin-top: 100/2/40rem;
width: 11.3rem;
left: 0;
top: 50%;
margin-top: -3/40rem/2rem;
}
.progress-bar {
background-color: #38b438;
width: 0;
height: 2/40rem;
}
.progress-bar-bg span {
content: " ";
width: 14/40rem;
height: 14/40rem;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #38b438;
border: 2/40rem solid #9cd3b0;
position: absolute;
left: 0;
top: 50%;
margin-top: -8/40rem;
cursor: pointer;
}
.audio-time {
overflow: hidden;
width: 11.3rem;
height: .7rem;
line-height: .7rem;
text-align: center;
position: absolute;
left: 0rem;
bottom: .4rem;
font-size: 24/40rem;
color: #917771;
}
.audio-length-total {
float: right;
}
.audio-length-current {
float: left;
}
js:
--duration:音樂的總時間
--cerrentTime:音樂的目前時間
--canplaythrougn: 事件，監測音樂是否加載完畢
--ended:事件，音樂播放完畢觸發該事件
--play: 音樂播放
--pause:音樂暫停
先引入jq:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=864){
docEl.style.fontSize = '40px';
}else{
docEl.style.fontSize = 40 * (clientWidth / 864) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
<script>
$(document).ready(function () {
// 控制音頻檔案名顯示寬度
var maxW = $('.audio-right').width();
$('.audio-right p').css({
"max-width": maxW
});
// 可能會有多個音頻，逐個初始化音頻控制事件
initAudioEvent();
});
function initAudioEvent() {
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('timeupdate', function () {
var song_time = audio.duration;
console.log(song_time);
var song_time_all = transTime(song_time);
$('.audio-length-total').text(song_time_all);
updateProgress(audio);
}, false);
// 點選播放/暫停圖檔時，控制音樂的播放與暫停
$('#audioPlayer').click(function () {
console.log('333');
// 監聽音頻播放時間并更新進度條
audio.addEventListener('timeupdate', function () {
updateProgress(audio);
}, false);
// 監聽播放完成事件
audio.addEventListener('ended', function () {
audioEnded();
}, false);
// 改變播放/暫停圖檔
if (audio.paused) {
// 開始播放目前點選的音頻
audio.play();
$('.apl').hide();
$('.apl_01').show();
} else {
audio.pause();
$('.apl').show();
$('.apl_01').hide();
}
});
// 點選進度條跳到指定點播放
// PS：此處不要用click，否則下面的拖動進度點事件有可能在此處觸發，此時e.offsetX的值非常小，會導緻進度條彈回開始處（簡直不能忍！！）
$('#progressBarBg').on('mousedown', function (e) {
// 隻有音樂開始播放後才可以調節，已經播放過但暫停了的也可以
if (!audio.paused || audio.currentTime != 0) {
var pgsWidth = $('.progress-bar-bg').width();
var rate = e.offsetX / pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress(audio);
}
});
dragProgressDotEvent(audio);
}
function dragProgressDotEvent(audio) {
var dot = document.getElementById('progressDot');
var position = {
oriOffestLeft: 0, // 移動開始時進度條的點距離進度條的偏移值
oriX: 0, // 移動開始時的x坐标
maxLeft: 0, // 向左最大可拖動距離
maxRight: 0 // 向右最大可拖動距離
};
var flag = false; // 标記是否拖動開始
// 滑鼠按下時
dot.addEventListener('mousedown', down, false);
dot.addEventListener('touchstart', down, false);
// 開始拖動
document.addEventListener('mousemove', move, false);
document.addEventListener('touchmove', move, false);
// 拖動結束
document.addEventListener('mouseup', end, false);
document.addEventListener('touchend', end, false);
function down(event) {
if (!audio.paused || audio.currentTime != 0) { // 隻有音樂開始播放後才可以調節，已經播放過但暫停了的也可以
flag = true;
position.oriOffestLeft = dot.offsetLeft;
position.oriX = event.touches ? event.touches[0].clientX : event.clientX; // 要同時适配mousedown和touchstart事件
position.maxLeft = position.oriOffestLeft; // 向左最大可拖動距離
position.maxRight = document.getElementById('progressBarBg').offsetWidth - position.oriOffestLeft; // 向右最大可拖動距離
// 禁止預設事件（避免滑鼠拖拽進度點的時候選中文字）
if (event && event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
// 禁止事件冒泡
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
}
function move(event) {
if (flag) {
var clientX = event.touches ? event.touches[0].clientX : event.clientX; // 要同時适配mousemove和touchmove事件
var length = clientX - position.oriX;
if (length > position.maxRight) {
length = position.maxRight;
} else if (length < -position.maxLeft) {
length = -position.maxLeft;
}
var pgsWidth = $('.progress-bar-bg').width();
var rate = (position.oriOffestLeft + length) / pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress(audio);
}
}
function end() {
flag = false;
}
}
function updateProgress(audio) {
var value = audio.currentTime / audio.duration;
$('#progressBar').css('width', value * 100 + '%');
$('#progressDot').css('left', value * 100 + '%');
$('#audioCurTime').html(transTime(audio.currentTime));
}
function audioEnded() {
$('#progressBar').css('width', 0);
$('#progressDot').css('left', 0);
$('#audioCurTime').html(transTime(0));
$('.apl').hide();
$('.apl_01').show();
// $('#audioPlayer img')[0].attr('src', './images/start.png');
}
function transTime(value) {
var time = "";
var h = parseInt(value / 3600);
value %= 3600;
var m = parseInt(value / 60);
var s = parseInt(value % 60);
if (h > 0) {
time = formatTime(h + ":" + m + ":" + s);
} else {
time = formatTime(m + ":" + s);
}
return time;
}
function formatTime(value) {
var time = "";
var s = value.split(':');
var i = 0;
for (; i < s.length - 1; i++) {
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
time += ":";
}
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
return time;
}
</script>
注: 如果在audio音頻上加autoplay屬性,安卓上是可以的,在ios上自動播放無效,需要使用者觸發一下,也就是加點選事件觸發;