以下是小编通过整理后得到的在H5混合开发的IOS项目中经常遇到的坑：
1. ios系统手机无法自动播放BGM
这个是苹果系统限制，默认不允许自动播放音频，往往需要点一下触发play()事件才能播放。
那么我们在页面onload后触发播放事件：
|
1
|
document.getElementById('music').play(); |
到这里一般都可以播放音乐了，如果还不行，很有可能是微信的限制。这时需要调用微信接口。
页面先引入：
|
1
|
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> |
然后JS写入微信事件：
|
1
2
3
|
document.addEventListener("WeixinJSBridgeReady", function() {document.getElementById('music').play();}, false); |
这样利用微信接口调用play()事件，可以完美解决ios音频无法autoplay的问题。
2. ios系统摇一摇播放音效事件无效
在实现摇晃（引用了封装好的shake.js）手机触发某一音效这个需求时，发现在微信中，音效没有被触发。后面找到原因：在ios里并没有把自定义摇晃事件shake当成交互动作。而要播放音效，需要用户有交互动作。没有交互，音效就没被加载，那么我们先加载音效，结合上面的微信接口：
|
1
2
3
|
document.addEventListener("WeixinJSBridgeReady", function () {shakeMusic.load();}, false); |
load()过之后，再调用play()即可听到音效。
3. ios系统不支持动画暂停样式（animation-play-state）
H5页面一般都会有BGM，也会提供一个旋转的音乐图标供用户开启关闭音乐。我们希望当用户点击音乐按钮时图标停止旋转，再点图标顺着之前停止的位置继续跑动画。animation-play-state是最简便的方式，然而，ios不支持。
目前的解决方案是：音乐图标负责跑动画，图标父级元素负责记录停止时的转动值。
html
|
1
2
3
|
<div class="music"><img class="musicImg" src="/images/music.png"></div> |
sass
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
.music {position: absolute;width: rem(64px);height: rem(64px);top: rem(66px);left: rem(15px);z-index: 1000;img {width: 100%;}}.musicRun {-webkit-animation: music 2.5s infinite linear 0.5s;animation: music 2.5s infinite linear 0.5s;}@-webkit-keyframes music {0% {}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes music {0% {}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}} |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
var $img = $('.musicImg')var music = document.getElementById('music');var isPlaying = falserunning()$img.on('click', function() {!isPlaying ? running() : paused()})function running() {music.play();$img.addClass('musicRun')isPlaying = true}function paused() {music.pause();var siteImg = $img.css('transform') //获取当前元素的动画改变，transform的值var siteWp = $('.music').css('transform')$('.music').css('transform', siteWp === 'none' ? siteImg : siteImg.concat('', siteWp))//由于父元素没有动画，所以每次赋值的时候，需要将上次父元素的状态加上$img.removeClass('musicRun')isPlaying = false} |
原文链接：http://www.cnblogs.com/zjzhang/p/8027703.html
