【移动端】audio音频HTML5播放

第一种方式：音频可以播放可以停止关闭

HTML代码为：

<div class="pages">
  音频+可以关闭
</div>
<div class="musicPlay music-play rotate" play="closed"><img src="images/audios.png"></div>
<div class="invMusic"><audio id="playMusic" preload="load" autoplay="" loop="" src="mp3/FuzaaiqOdRXrzwJXLDUCHZRY6g0T.mp3"></audio></div>
<script>
$(function(){
  $(document).on('click','.musicPlay',function(){
    if($(this).attr('play')== 'opend'){
      $(this).addClass('rotate');
      $(this).attr('play','closed'); 
      document.querySelector('#playMusic').play();
    }else{
      $(this).removeClass('rotate');
      $(this).attr('play','opend');
      document.querySelector('#playMusic').pause();
    }
  })
})
</script>

本地效果为：app/plug/audio/audio_one.html

线上效果为：http://www.hunliji.com/p/wedding/index.php/home/APIInvation/displayCard?card_id=MjY5NzIxN2ZpcmVfY2xvdWQ&version=2&invation_code=RLRMMTG

 

第二种方式：在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式

注明：

iOS Safari 不允许自动播放 audio, 可能已经被坑过了, 但微信内嵌的浏览器应该是做了一些定制化, 允许自动播放 audio.

测试了以下机型在微信内嵌浏览器中仅需设置 audio autoplay 即可自动播放(audio)音乐, 无需特殊处理.
* iPhone5 iOS 7.0.6 WeChat 6.2
* iPhone5s iOS 8.1.2 WeChat 6.3.7
* iPhone6Plus iOS 8.1.3 WeChat 6.3.7
* MI1S Android 4.1.2 WeChat 6.3.7

但是当手机是 iPhone6s iOS 9.1 WeChat 6.3.7 时, 必须做如下特殊处理才能在微信中自动播放(audio)音乐, 我可以推测是 iOS 9 的兼容性问题么?

 

 

html代码为：

<div id="audio_btn" class="off rotate" style="display: block;">
     <audio loop="" src="/images/activity/Veronicas4ever.mp3" id="media" autoplay="true" preload="auto">Your browser does not support the audio tag.</audio>
</div>  

 本地效果为：http://svn.chenhua.cc/app/plug/screen_slide/h5_cantera.html

IOS微信浏览器自动播放效果参数：http://rawgit.com/ufologist/7c14837db642a6e916ce/raw/9be2c7663f7a99708e88a59f71e6b2cc86bd8ec8/autoplay-audio-ios.html