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"
    };
}();

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

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

 

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。 原文链接:https://www.cnblogs.com/lzpong/p/5166193.html