audio标签的播放、暂停、重播、进度拖拽等操作
//练习模式听力题
$(window).load(function () {
var audio = document.getElementById("audioAll");
if (!audio) {
return false;
}
document.getElementById("audioAll").load();
$(".control").click(function () {
$(".audioBox").addClass("audioShow");
});
$(".closeBtn").click(function () {
$(".audioBox").removeClass("audioShow");
document.getElementById("audioAll").load();
audioEnded();
$(".control").css("pointer-events", "auto");
});
});
(
"DOMContentLoaded",
function () {
//设置音频地址(必须是服务器地址)
var audioMp3 = document.getElementById("audioMp3");
var audioWav = document.getElementById("audioWav");
$(".control").click(function () {
$(".audioBox").addClass("audioShow");
drag(document.getElementById('audioDrag'))
// 初始化音频控制事件
var mp3Add = $(this).parents(".listenQuest").find(".audioMp3")[0].src;
var wavAdd = $(this).parents(".listenQuest").find(".audioWav")[0].src;
audioMp3.setAttribute("src", mp3Add);
audioWav.setAttribute("src", wavAdd);
document.getElementById("audioAll").load();
var audio = document.getElementById("audioAll");
audio.play();
$('#audioPlayer').removeClass('play')
$(".control").css("pointer-events", "auto");
$(this).css("pointer-events", "none");
});
var audio = document.getElementById("audioAll");
if (audio) {
initAudioEvent();
}
},
false
);
function initAudioEvent() {
console.log("初始化");
var audio = document.getElementById("audioAll");
var audioPlayer = document.getElementById("audioPlayer");
var resetBtn = document.getElementById("resetBtn");
//音频初始化
("loadeddata", function () {
var allTime = ;
timeChange(allTime, "allTime");
});
// 监听音频播放时间并更新进度条
(
"timeupdate",
function () {
updateProgress(audio);
},
false
);
// 监听播放完成事件
(
"ended",
function () {
audioEnded();
},
false
);
// 点击播放/暂停图片时，控制音乐的播放与暂停
(
"click",
function () {
// 改变播放/暂停图片
if () {
// 开始播放当前点击的音频
audio.play();
$('#audioPlayer').removeClass('play')
} else {
audio.pause();
$('#audioPlayer').addClass('play')
}
},
false
);
(
"click",
function () {
= 0;
audio.play();
$('#audioPlayer').removeClass('play')
},
false
);
// 点击进度条跳到指定点播放
// PS：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时的值非常小，会导致进度条弹回开始处（简直不能忍！！）
var progressBarBg = document.getElementById("progressBarBg");
(
"mousedown",
function (event) {
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
if (! || != 0) {
var pgsWidth = parseFloat(
window.getComputedStyle(progressBarBg, null).width.replace("px", "")
);
var rate = / pgsWidth;
= * rate;
updateProgress(audio);
}
},
false
);
// 拖动进度点调节进度
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 (! || != 0) {
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
flag = true;
= ;
= ? [0].clientX : ; // 要同时适配mousedown和touchstart事件
= ; // 向左最大可拖动距离
=
document.getElementById("progressBarBg").offsetWidth -
; // 向右最大可拖动距离
// 禁止默认事件（避免鼠标拖拽进度点的时候选中文字）
if (event && ) {
event.preventDefault();
} else {
= false;
}
// 禁止事件冒泡
if (event && ) {
event.stopPropagation();
} else {
= true;
}
}
}
function move(event) {
if (flag) {
var clientX = ? [0].clientX : ; // 要同时适配mousemove和touchmove事件
var length = clientX - ;
if (length > ) {
length = ;
} else if (length < -) {
length = -;
}
var progressBarBg = document.getElementById("progressBarBg");
var pgsWidth = parseFloat(
window.getComputedStyle(progressBarBg, null).width.replace("px", "")
);
var rate = ( + length) / pgsWidth;
= * rate;
updateProgress(audio);
}
}
function end() {
flag = false;
}
}
/**
* 更新进度条与当前播放时间
* @param {object} audio - audio对象
*/
function updateProgress(audio) {
var value = / ;
console.log(audio, value);
document.getElementById("progressBar"). = value * 100 + "%";
document.getElementById("progressDot"). = value * 100 + "%";
document.getElementById("audioCurTime").innerText = transTime(
);
}
/**
* 播放完成时把进度调回开始的位置
*/
function audioEnded() {
document.getElementById("progressBar"). = 0;
document.getElementById("progressDot"). = 0;
document.getElementById("audioCurTime").innerText = transTime(0);
// document.getElementById("audioPlayer").src =
// imgDomain + "/static/platform/pic/";
$('#audioPlayer').addClass('play')
}
/**
* 音频总时间计算
*/
function timeChange(time, timePlace) {
//默认获取的时间是时间戳改成我们常见的时间格式
var timePlace = document.getElementById(timePlace);
var minute = time / 60;
var minutes = parseInt(minute);
if (minutes < 10) {
minutes = "0" + minutes;
}
var second = time % 60;
seconds = parseInt(second);
if (seconds < 10) {
seconds = "0" + seconds;
}
var allTime = "" + minutes + "" + ":" + "" + seconds + "";
= allTime;
}
/**
* 音频播放时间换算
* @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 < - 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;
}
// 元素的拖拽
function getInner() {
if (typeof innerHeight == "undefined") {
return {
w: ,
h: ,
}; //IE浏览器适用
} else {
return {
w: innerWidth,
h: innerHeight,
}; //非IE浏览器适用
}
}
// 窗口拖拽
function drag(obj) {
var box = document.getElementById("audioDrag");
//当鼠标在被拖拽元素上按下，开始拖拽
= function (event) {
//设置obj捕获所有的鼠标按下事件，而不仅仅是在元素内部区域
event = event || ;
//鼠标在元素中的偏移量等于 鼠标的clientX - 元素的offsetLeft
var ol = - ;
var ot = - ;
//为document绑定一个onmousemove事件
= function (event) {
event = event || ;
//获取鼠标的坐标
var left = - ol;
var top = - ot;
//修改元素的位置 修改元素的位置只能通过 元素.style.属性 = "属性值";
= left + "px";
= top + "px";
//边界判断
if (left <= 0) {
//左右边界限定
left = 0;
= 0 + "px";
} else if (left >= getInner().w - ) {
//元素在最右边时的判定，屏幕的宽度减去元素自身的宽度
left = getInner().w - -12;
= left + "px";
}
if (top <= 0) {
//上下边界限定
top = 0;
= 0 + "px";
} else if (top >= getInner().h - ) {
//元素在最下边时的判定，屏幕的高度减去元素自身的高度
top = getInner().h - -12;
= top + "px";
}
};
//为document绑定一个鼠标松开事件onmouseup
= function () {
= null;
= null;
};
return false;
};
}