页面添加背景音乐以及注意事项

我们经常会在一些微信分享页面中看到页面的右上角，会有一个背景音乐的按钮。我们来看看，怎么来实现这样一个效果。

因为智能手机浏览器中多数都是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，背景音乐的添加。