不经过悉心栽培,花儿开不出鲜艳的花朵;不经过时间的历练,幼苗长不成参天大树。

最简单最快的方法给H5页面添加背景音乐播放(css样式美化)

web 建伟 10974℃ 0评论

看了很多场景应用,右上角总是会有一个音频按钮,会播放音乐,现在通过简单几步就可以实现这个功能。

1.先上基础的html,定位用了fixed(source 标签里面对应的音频链接换为自己的音频连接)

<span id="musicControl">
 <a id="mc_play" class="on" onclick="play_music();">
 <audio id="musicfx" loop="loop" autoplay="autoplay">
 <source src="http://rrj.shangdee.com/bg.mp3" type="audio/mpeg">
 </audio>
 </a>
 </span>

2.添加css进行美化

*{margin:0px;padding:0px;}
body{background:#000;}
/* 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('./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;}

这里的css里面有个背景图,是个旋转的按钮,点击这里下载mcbg.png

3.添加JS(之前不要忘 )

	function play_music(){
		if(music.paused){
			music.play();
			 $('#mc_play').attr('class','on');
		}else{
			music.pause();
			 $('#mc_play').attr('class','stop');
		}
	}

这个时候基本就已经OK了,最后来一张效果图吧

转载请注明:Li Jianwei's Blog » 最简单最快的方法给H5页面添加背景音乐播放(css样式美化)

喜欢 (16)or分享 (0)
web技术交流群
22765697