html5 audio 标签在ajax回掉中无法播放问题

html5在移动端开发时，我们经常会用到audio标签如下：

<audio id="audio" preload="auto" src="img/music.mp3"></audio>

播放,暂停:

document.getElementById('audio').play();
document.getElementById('audio').pause();

但是在ajax回掉中，你会发现执行document.getElementById('audio').play()竟然无法播放，但是在浏览器确却没有问题，研究发现：在移动端audio对象的第一次播放，必须是一个用户触发（click、touch）的行为。好了，原理我们也知道了，那么我 们只要保证，用户在有交互行为的时候，执行audio对象的第一次play方法， 后边在执行播放的时候，不管在哪里执行都没有问题了。代码如下：

$('#button').on('click',function(){
    document.getElementById('audio').play();//播放
	document.getElementById('audio').pause();//暂停
    ajaxMethod();//ajax请求
});
var ajaxMethod=function (){
       $.ajax({
       type: "GET",
       async: false,
       timeout:2222,
       url:'xxxxxxx',
       dataType: "jsonp",
       jsonp: "callback",
       success: function (result) {
         //如果对音频要求比较严格，这里再把播放时间置为0.audio.currentTime = 0;
         document.getElementById('audio').play();
       }
};

这样就可以完美的解决在移动端，html5标签在ajax回掉中无法播放问题了 。