html右上角播放器音乐媒体播放器

admin

撰写于 2023年 05月 12 日

直接上代码
HTML

<span id="musicControl">
        <a id="mc_play" class="on" οnclick="play_music();">
            <audio id="musicfx" loop="loop" autoplay="autoplay">
                <source src="mp3/Dreams.mp3" type="audio/mpeg">
            </audio>
        </a>
 </span>

如果不想自动播放就把 autoplay="autoplay"改成autostart="0"
CSS

/* music */
@-webkit-keyframes reverseRotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('../img/play.png') no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}

JS(此JS是经过修改过的，可以暂停并且没有任何错误，原来的JS是有错误的而且无法暂停音乐)

function playMusic() {
    var mcPlay = $('#mc_play');
    var audioElem = $('#mc_play audio').get(0);
    if (mcPlay.hasClass('on')) {
        audioElem.pause();
        mcPlay.removeClass('on').addClass('stop');
    } else {
        audioElem.play();
        mcPlay.removeClass('stop').addClass('on');
    }
    $('#music_play_filter').hide();
    event.stopPropagation();
}

function pauseMusic() {
    var mcPlay = $('#mc_play');
    var audioElem = $('#mc_play audio').get(0);
    audioElem.pause();
    mcPlay.removeClass('on').addClass('stop');
}

function justPlay(id) {
    var audioElem = $('#mc_play audio').get(0);
    audioElem.play();
    $('#mc_play').removeClass('stop').addClass('on');
    if (id === 1) {
        $('#music_play_filter').hide();
    }
    event.stopPropagation();
}

function isWeixin() {
    var ua = navigator.userAgent.toLowerCase();
    return ua.match(/MicroMessenger/i) === 'micromessenger';
}

$(document).ready(function() {
    var playFilter = $('#music_play_filter');
    playFilter.on({
        click: function() {
            justPlay(1);
        },
        touchstart: function() {
            justPlay(1);
        },
        touchend: function() {
            justPlay(1);
        },
        touchmove: function() {
            justPlay(1);
        },
        mousedown: function() {
            justPlay(1);
        },
        mouseup: function() {
            justPlay(1);
        },
        mousemove: function() {
            justPlay(1);
        }
    });

    var mcPlay = $('#mc_play');
    mcPlay.on({
        click: function() {
            if (mcPlay.hasClass('on')) {
                pauseMusic();
            } else {
                justPlay();
            }
        }
    });

    window.onload = function() {
        if (!isWeixin()) {
            justPlay();
        }
    };
});