标签：
我们经常会在一些微信分享页面中看到页面的右上角，会有一个背景音乐的按钮。我们来看看，怎么来实现这样一个效果。
因为智能手机浏览器中多数都是webkit内核的，绝大部分的智能手机浏览器都是支持HTML5的；对于IOS和Android原生应用中的WebView控件也都是webkit内核且支持HTML5标准的。因此我们在添加背景音乐的时候，可以使用一个很方便的标签：<audio>
在移动平台使用<audio>的时候，多数情况是不需要你处理UI的，因为移动浏览器不会像web端一样添加一个默认的UI，为了保险，你还是可以给你的<audio>添加 display:none;
接下来我们来做一个假的按钮，用来操作<audio>的API，这里要注意<audio>提供的API都是DOM方法，如果你用zepto时注意转化成DOM对象。
1 <audio src="music/xxx.mp3" id="music" autoplay="autoplay" loop="loop"></audio> 2 3 <a href="javascript:void(0)" id="audioBtn" class="audioBtn off"></a>
1 /*music*/ 2 var audioO = document.getElementById(‘music‘); 3 $(‘#audioBtn‘).on(‘touchstart‘,function(){ 4 var $this = $(this); 5 if(audioO.paused){ 6 audioO.play(); 7 $this.removeClass(‘off‘).addClass(‘on‘) 8 }else{ 9 audioO.pause(); 10 $this.removeClass(‘on‘).addClass(‘off‘) 11 } 12 });
这样，就实现了H5，背景音乐的添加。
标签：
原文地址：http://www.cnblogs.com/webARM/p/4265315.html
