由于摇一摇需要播放摇一摇的声音以及切换歌曲成功后的声音，但由于手机大部分是禁止音频的自动播放，必须需要用户真实点击才能播放音频。这里没有彻底的解决办法，只是换了一个思路，利用用户随时触摸屏幕的习惯，对document进行touchstart事件监听。当用户触摸到屏幕时，先播放一个1S的无声音频,接着将touchstart事件移除，然后摇一摇的时候切换声音源，播放摇一摇的声音，这样便可以达到类似的目的。代码如下所示：
document.addEventListener('touchstart',autoplay,!1); function autoplay(){ shaking.play(); found.play(); document.removeEventListener('touchstart',autoplay); }
2、PC端前端页面脚本逻辑实现
html文档
PC端界面也是仿的网上的一个html5音乐播放器的界面，效果如下所示：
HTML（shake_pc.html）布局代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随心听</title> <meta content="never"> <link href="https://www.jb51.net/reset2.0.css"> <link href="https://www.jb51.net/shake_pc.css"> </head> <body> <!-- 控制背景图效果 --> <div> </div> <div> <!-- 歌曲信息 --> <div> <div></div> <div>By <span></span></div> <!-- 播放进度 --> <div></div> </div> <!-- 歌曲控制 --> <div> <div>00:00</div> <div> <a href="javascript:;"> </a><a href="javascript:;"> </a><a href="javascript:;"></a> </div> <div> <a href="javascript:;"> </a><a href="javascript:;"> <span></span> </a><a href="javascript:;"></a> </div> </div> <!-- 歌曲播放 --> <audio controls></audio> </div> <script type="text/javascript" src="https://www.jb51.net/socket.io.js"></script> <script type="text/javascript" src="https://www.jb51.net/shake_pc.js"></script> </body> </html>
css样式
样式布局非常的简单，没什么好讲的。CSS样式代码(shake_pc.css)如下：
body{ font-family: 'Open Sans', sans-serif; overflow: hidden; } .bg{ position: absolute; left:0; right: 0;top:0; bottom: 0;margin:-30px; filter: blur(30px); -webkit-filter: blur(30px); background: url(./imgaes/bg.jpg) no-repeat; background-size: cover; } .music-player{ position: relative; width: 350px; height: 290px; margin: 150px auto; box-shadow: 0 0 60px rgba(0, 0, 0, 0.8); border-radius: 7px; background: #222; overflow: hidden; z-index: 0; } .info{ position: relative; width: 100%; height: 80px; padding-top: 20px; color:#585858; text-align: center; } .info .song-name{ height: 30px; font-size: 30px; font-weight: 300; } .info .author{ margin-top: 14px; font-size: 14px; } .progress{ position: absolute; left:0; bottom:0; width: 0; height: 3px; background-color: #ed553b; } .controls{ height: 190px; background-color:rgba(152, 46, 75, 0.6); text-align: center; } .controls .time{ font-size:48px; height: 84px; line-height: 84px; color:rgba(225, 225, 225, 0.4); } .play-controls .btn{ display: inline-block; width:95px; height: 40px; vertical-align: top; } .play-controls .btn.prev{ background:url(./imgaes/prev.png) no-repeat center center; } .play-controls .btn.play{ background:url(./imgaes/play.png) no-repeat center center; } .play-controls .btn.next{ background:url(./imgaes/next.png) no-repeat center center; } .volume-bar{ position: relative; width:250px; height: 2px; margin: 30px auto 0; } .volume-bar .vol-muted{ position:absolute; left:0; top:-6px; width: 10px; height:13px; background:url(./imgaes/muted.png) no-repeat center center; } .volume-bar .vol-slider{ position: absolute; left:14px; right:28px; top:0; height:100%; background-color:rgba(255,255,255,.3); } .volume-bar .vol-slider-inner{ display: block; width:50%; height: 100%; background-color:#ed553b; } .volume-bar .vol-max{ position:absolute; right:0; top:-8.5px; width: 22px; height: 18px; background: url(./imgaes/max.png) no-repeat center center; }
脚本逻辑