H5Audio音频案例

效果图: 

代码:

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);

}

 

/**

* 鼠标拖动进度点时可以调节进度

* @param {*} 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;

}

}

/**

* 更新进度条与当前播放时间

* @param {object} audio - audio对象

*/

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');

}

/**

* 音频播放时间换算

* @param {number} value - 音频当前播放时间，单位秒

*/

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;

}

/**

* 格式化时间显示，补零对齐

* eg：2:4 --> 02:04

* @param {string} value - 形如 h:m:s 的字符串

*/

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上自动播放无效,需要用户触发一下,也就是加点击事件触发;