在IOS中第一次調用play方法播放音頻會被阻止，必須得等用戶有交互動作，比如touchstart，click后才能正常調用，所以可以在搖一搖之前提醒用戶點擊一下開始游戲的按鈕或者給用戶一個彈窗，用戶點擊的時候播放一個超級短的無聲音文件，之后替換src，這樣再調用play方法就可以了。
代碼如下如：
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title></head><body> <button>開始游戲</button> <audio src="https://daoket.github.io/img/load.mp3" id="audio"></audio> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $('button').one('touchstart', function () { var audio = document.getElementById("audio"); audio.play(); audio.setAttribute('src', 'https://daoket.github.io/img/shake.mp3'); audio.load(); $(this).text('游戲進行中'); }) /** * 移動端搖一搖 * @params devicemotion 提供設備加速度信息 */ window.addEventListener('devicemotion', devicemotionHandler, false); var x, y, z, last_x, last_y, last_z, last_time = 0, SHAKE_SPEED = 4000; function devicemotionHandler (evet) { var acc = event.accelerationIncludingGravity, curTime = new Date().getTime(), diffTime = curTime - last_time; if (diffTime > 100) { last_time = curTime; x = acc.x; y = acc.y; z = acc.z; var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_SPEED) { document.getElementById("audio").play() } last_x = x; last_y = y; last_z = z; } } </script></body></html>在線查看
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
