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之类的 等...

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