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

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

因为智能手机浏览器中多数都是webkit内核的，绝大部分的智能手机浏览器都是支持HTML5的；对于IOS和Android原生应用中的WebView控件也都是webkit内核且支持HTML5标准的。因此我们在添加背景音乐的时候，可以使用一个很方便的标签：<audio> 

在移动平台使用<audio>的时候，多数情况是不需要你处理UI的，因为移动浏览器不会像web端一样添加一个默认的UI，为了保险，你还是可以给你的<audio>添加  display:none;

接下来我们来做一个假的按钮，用来操作<audio>的API，这里要注意<audio>提供的API都是DOM方法，如果你用zepto时注意转化成DOM对象。

<audio src="music/xxx.mp3" id="music" autoplay="autoplay" loop="loop"></audio>

<a href="javascript:void(0)" id="audioBtn" class="audioBtn off"></a>

/*music*/
var audioO = document.getElementById('music');
  $('#audioBtn').on('touchstart',function(){
    var $this = $(this);
    if(audioO.paused){
      audioO.play();
      $this.removeClass('off').addClass('on')
    }else{
      audioO.pause();
      $this.removeClass('on').addClass('off')
    }
  });

这样，就实现了H5，背景音乐的添加。