简单几步在你的H5页面上添加音乐播放

文章分类:设计前沿 发布时间:2015-12-18 原文作者:推我一把 阅读( )

看了很多场景应用,或者叫LIVE APP,作品的右上角总是会有一个音频按钮,会播放音乐,想不想快速的在自己的WAP页面上快速的加上这个功能呢,看下我怎么做的吧。

只需简单几步哦:

 

  • 加入HTML代码,因为是绑定在每一页的右上方(或者其他位置),定位用了fixed,所以在页面底部/body之前加上html代码
<span id="musicControl">
        <a id="mc_play" class="stop" onclick="play_music();">
            <audio id="musicfx" loop="loop" autoplay="autoplay">
                <source src="./src/audio/audio.mp3" type="audio/mpeg">
            </audio>
        </a>
 </span>
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;}
这里添加了1个反转图标的H5动画规则,musicControl a 里的背景图在这里下载哦,http://pan.baidu.com/s/1dDqAWHb
  • 添加对应的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();
        }
    } 

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

简单三步已经把这个功能实现了哦。是不是很方便呢。

原文来自:tui518.com