当前位置： 移动技术网 > IT编程>网页制作>Html5 > h5添加音乐

h5添加音乐

2018年02月21日  | 移动技术网IT编程  | 我要评论
加入HTML代码，因为是绑定在每一页的右上方（或者其他位置），定位用了fixed，所以在页面底部/body之前加上html代码

　　source 标签里面对应的音频链接换为自己的音频连接哦。

网页头部加入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('./src/images/mcbg.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控制方法
function play_music(){
        if ($('#mc_play').hasClass('on')){
            $('#mc_play audio').get(0).pause();
            $('#mc_play').attr('class','stop');
        }else{
            $('#mc_play audio').get(0).play();
            $('#mc_play').attr('class','on');
        }
        $('#music_play_filter').hide();
        event.stopPropagation(); //阻止冒泡 
    }
    function just_play(id){
        $('#mc_play audio').get(0).play();
        $('#mc_play').attr('class','on');
        if (typeof(id)!='undefined'){
            $('#music_play_filter').hide();
        }
        event.stopPropagation(); //阻止冒泡 
    } 
    function is_weixn(){
        return false;
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    }
    var play_filter=document.getElementById('music_play_filter');
    play_filter.addEventListener('click', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchstart', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchend', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchmove', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousedown', function(){
        just_play(1);
    });
    play_filter.addEventListener('mouseup', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousemove',function(){
        just_play(1);
    });
    window.onload=function(){
        if (!is_weixn()){
            just_play();
        }
    }

这里还加入了一个方法判断是否是在微信内打开，如果不是在微信内就自动播放，在微信内部需要点击按钮才变换为播放状态。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网