在制作网页的时候，经常会遇到一些带音乐播放的场景，作品的右上角有一个音频按钮，会播放音乐，点击切换播放和暂停。下面就讲一讲如何在h5网页上添加音乐播放。
其实是很简单的，只需要简单几步就可以完成了
1、加入HTML代码，因为是绑定在每一页的右上方（或者其他位置），所以定位用了fixed，在页面底部/body之前加上html代码

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

这里的source 标签对应的音频链接换为自己的音频连接
2、接下来设置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;}

这里添加了1个反转图标的H5动画规则，图标如下

3、接下来加入