HTML5 音频播放器-Javascript代码(短小精悍)

直接上干货咯!

//HTML5 音频播放器 lzpong 2015/01/19
var wavPlayer = function () {
if(window.parent.wavPlayer) return window.parent.wavPlayer;
var CT = null;
var D = null;
var mover = false;
var evtTm = { divout: false, divtimer: 0, divover: false, divshow: true, devwidth: 370 };
D = document.createElement("div");
var cls = "position:absolute;top:0px;right:1px;display:none;width:20px;overflow:hidden;word-break:break-all;word-wrap:break-word;border-radius:20px;".replace(" ", '').split(";");
for (var i = 0; i < cls.length; i++) {
var clss = cls[i].split(":");
if (clss[0].length > 0)
D.style[clss[0]] = clss[1];
}
D.innerHTML = "<audio controls='true' id='wavPlayCtrl' style='width: 500px;min-height: 30px;display: inline;'></audio>";
setTimeout(function () {
document.body.appendChild(D);
setTimeout(function () {
CT = document.querySelector("#wavPlayCtrl");
//播放结束后3秒内鼠标没有on且播放ended的,hide
CT.onended = function (e) {
setTimeout(function () { if (!mover && (CT.src ? CT.paused : true)) hide(); }, 3000);
}
//鼠标100毫秒后还on,show
CT.onmouseover = function (e) {
mover = true;
if (!evtTm.divover) {
evtTm.divover = true;
clearTimeout(evtTm.divtimer);
evtTm.divtimer = setTimeout(function () { if (mover) show(); }, 100);
evtTm.divover = false
}
}
//鼠标out,2秒后且播放ended的,dide
CT.onmouseout = function (e) {
mover = false;
if (!evtTm.divout) {
evtTm.divout = true;
clearTimeout(evtTm.divtimer);
evtTm.divtimer = setTimeout(function () { if (!mover && (CT.src ? CT.paused : true)) hide(); }, 2000);
evtTm.divout = false
}
}
}, 200);
}, 500);
function show() {
var w = parseInt(D.style.width);
if (w < 370) setTimeout(function () { D.style.width = w + 74 + "px"; show(); }, 50);
else D.style.width = "370px";
}
function hide() {
var w = parseInt(D.style.width);
if (w > 37) setTimeout(function () { D.style.width = w - 74 + "px"; hide(); }, 50);
else D.style.width = "20px";
}
return {
//播放
Play: function (path) { show(); D.style.display = "inline"; CT.src = path; CT.play(); },
//暂停
Pause: function () { CT.pause(); },
Stop: function () { if (CT.stop) CT.stop(); else CT.pause(); },
//是否循环播放(设置一次一直生效)
Loop: function (b) { CT.loop = b; },
//隐藏控件
Hide: function () { CT.pause(); hide() },
//显示控件
Show: function () { show() },
//获取控件
CT: function () { return CT; },
Ver:"lzpong 2015/10/19"
};
}();

HTML5 音频播放器

会在页面(或者首页)右上角出现, 会自动隐藏, 一般支持*.wav,*.MP3之类的 等...

当然,样式什么的 就那啥, 不说了, 浏览器基本样式咯 ^,^

上一篇:Redis常用五大数据类型


下一篇:基于android混合开发的JsBridge技术学习