1、问题又来了

曾做一个活动页，需要打开页面时自动播放一小段背景音乐。因为音乐持续时间非常短，所以设计这个页面时，没想要设置一个播放控制按钮。一开始我也以为确实没有必要。开发中，用我的老古董机器小米2S测了也没发现啥问题。 但是，用iOS机器测试时，问题就来了，有的平台中可以听到背景音乐（如iOS中的支付宝），有的则始终出不来（如iOS 中的Safari浏览器）。用JavaScript来load音频，再自动触发音频的play()方法，也没有效果。

2、定位问题、查找原因

Google一番发现原来是iOS 4.2.1之后，Safari浏览器中禁止了音频的自动播放，必须在得到用户手动允许（比如触摸屏幕，单击按钮等）的情况下，才能播放音频——也就是说，iOS 4.2.1之后的Safari中, 如果没有得到用户的手动允许，即便对audio标签设置了autoplay="autoplay"属性，也是不会自动播放音频的。参见：https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html。在进一步的测试中，我发现安卓5.0及以上的机器也存在iOS Safari中同样的问题。

大致是这些浏览器认为不经过用户允许的情况下播放音频，可能会在用户不知情的情况下给用户带来较大流量的消耗。这与我“好像经常在微信中见到带自动播放背景音乐的页面”的日常生活印象是背道而驰的。经过进一步了解原因，原来是在微信平台里，页面确实可以自动播放音频。

3、解决办法

清楚了问题，办法也就有了。在页面中加上一个按钮，点击按钮时，暂停背景音乐的播放，然后紧接着又播放它。

$('#playBtn').on('click',function(){
    var audio = $('#myAudio')[0];
    audio.pause();
    audio.play();
})

这样，在支持自动播放音频的平台中，背景音乐会自动播放，且点击播放按钮的话，声音也不会停掉；在不支持音频自动播放的平台中，点击声音播放按钮，也能进行背景音乐的播放。

当然，你可能希望这个声音播放按钮在声音播放的时候，显示为播放中状态，点击可以暂停；在声音不播放的时候，显示为暂停状态，点击可以开始播放。

我目前找到的最好的办法是：去掉audio的autoplay="autoplay"属性，让音频在所有平台下都不自动播放。在点击播放声音按钮的时候，才进行播放，并切换按钮的状态。这样就可以正确的切换按钮状态。

那为什么不保留autoplay="autoplay"属性，让能自动播放的平台就自动播，不能播放的平台就点击后再播放呢？事实上我尝试过，但因为对自动播放音频的支持与否不同，各个平台中按钮的初始状态是不一致的，而我无法正确地获取到这种初始状态——我试过用if( $('#myAudio')[0].paused)来进行页面加载后音频播放状态的获取，试验结果也是获取不到。因此，去掉audio的autoplay="autoplay"属性，手动点击按钮播放是经过考量后最合适的方法。