H5页面添加背景音乐播放功能，可暂停

html：

    <span id="musicControl">
        <a id="mc_play" class="on">
            <audio id="musicfx" loop="loop" autoplay="autoplay">
                <source src="./music/music.mp3" type="audio/mpeg" id="hhh">
            </audio>
        </a>
    </span>

css

@-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('../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

    $('#mc_play').click(function () {
        var music = document.getElementById('musicfx');
        if (music.paused) {
            music.play();
            $('#mc_play').attr('class', 'on');
        } else {
            music.pause();
            $('#mc_play').attr('class', 'stop');
        }
    })

图片