涉及微信的相关问题

1. 摇一摇不够灵敏、摇动很多次没有响应的问题、

原来摇一摇代码是从网络Copy的，活动上线后，发现部分手机摇一摇监测效果不够灵敏，摇动很多次都没有响应，恨不得把手机砸了，于是优化。

原摇一摇代码：

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> SHAKE_THRESHOLD = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">800</span>;      <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> last_update = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> x = y = z = last_x = last_y = last_z = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">deviceMotionHandler</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(eventData)</span> {</span>           <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> acceleration = eventData.accelerationIncludingGravity;          <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> curTime = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Date</span>().getTime();         <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> ((curTime - last_update) > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">500</span>) {                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> diffTime = curTime - last_update;               last_update = curTime;              x = acceleration.x;             y = acceleration.y;             z = acceleration.z;             <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> speed = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.abs(x + y + z - last_x - last_y - last_z) / diffTime * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10000</span>;              <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> status = document.getElementById(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"status"</span>);             <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (speed > SHAKE_THRESHOLD) {            alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'摇一摇显示'</span>);        }        last_x = x;             last_y = y;             last_z = z;         }       }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(window.DeviceMotionEvent) {    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Mobile browser support motion sensing events</span>    window.addEventListener(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'devicemotion'</span>, deviceMotionHandler, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>);} <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Mobile browser does not support the motion sensing events</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li></ul>

于是开始研究起上面的代码不够灵敏的原因，发现：

The device motion event is a superset of the device orientation event; it returns data about the rotation information and also acceleration information about the device. The acceleration data is returned in three axes: x, y and z. They are measured in meters per second squared (m/s^2). Because some devices might not have the hardware to exclude the effect of gravity, the event returns two properties, accelerationIncludingGravity and acceleration, which excludes the effects of gravity, (when this is the case, the acceleration data will be null)

原来HTML5对设备移动有两个加速度相关的数据：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> // Grab the acceleration from the results  var acceleration = eventData<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.acceleration</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>  info = xyz<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.replace</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"X"</span>, acceleration<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.x</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>  info = info<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.replace</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Y"</span>, acceleration<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.y</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>  info = info<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.replace</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Z"</span>, acceleration<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.z</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>  document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"moAccel"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerHTML</span> = info<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>  // Grab the acceleration including gravity from the results  acceleration = eventData<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.accelerationIncludingGravity</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>  info = xyz<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.replace</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"X"</span>, acceleration<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.x</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>  info = info<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.replace</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Y"</span>, acceleration<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.y</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>  info = info<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.replace</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Z"</span>, acceleration<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.z</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>  document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"moAccelGrav"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerHTML</span> = info<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>

于是，优化后代码如下：

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> SHAKE_THRESHOLD <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>,        last_update <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,        x <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> y <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> z <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> last_x <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> last_y <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> last_z <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,function deviceMotionHandler(eventData) {    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> acceleration <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> eventData<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>accelerationIncludingGravity;    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> curTime <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Date</span>()<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>getTime();    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> ((curTime <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> last_update) <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">500</span>) {   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//多次移动事件中取两个点的事件间隔</span>        <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> diffTime <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> curTime <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> last_update;        last_update <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> curTime;        x <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> acceleration<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>x;        y <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> acceleration<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>y;        z <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> acceleration<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>z;        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//var speed = Math.abs(x + y + z - last_x - last_y - last_z) / (diffTime * 1000);</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//主要优化点1:原来的计算方式把x、y、z三方向的移动有可能会互相干扰。比如x往真方向，y往负方向，就互相抵消了。</span>        <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> dist <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Math<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>sqrt((x<span class="hljs-attribute" style="box-sizing: border-box;">-last_x</span>)<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">*</span>(x<span class="hljs-attribute" style="box-sizing: border-box;">-last_x</span>)<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">+</span>(y<span class="hljs-attribute" style="box-sizing: border-box;">-last_y</span>)<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">*</span>(y<span class="hljs-attribute" style="box-sizing: border-box;">-last_y</span>)<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">+</span>(z<span class="hljs-attribute" style="box-sizing: border-box;">-last_y</span>)<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">*</span>(z<span class="hljs-attribute" style="box-sizing: border-box;">-last_y</span>))        <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> speed <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> dist/diffTime<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">*</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10000</span>;        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//优化点2:摇动速度测试调整，达到最优</span>        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (speed <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span> SHAKE_THRESHOLD) {     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//摇一摇灵敏度</span>           alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'摇一摇显示'</span>);        }        last_x <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> x;        last_y <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> y;        last_z <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> z;    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li></ul>

参考链接：http://www.html5rocks.com/en/tutorials/device/orientation/

2.页面报WARNING:The devicemotion event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS.

上面的 devicemotion发现会报如上警告，查了一些资料，目前木有办法解决，除非切换到https。

3. ERROR: Uncaught (in promise) DOMException: The element has no supported sources.错误

原来的插入audio的源码如下, 播放音频的时候在浏览器和调试器的debug环境会报如上错误，但是不影响iPhone等手机的使用

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <audio  id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"audio"</span> src=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://awp.qq.com/act/a20160315live/shake_sound_male.mp3"</span>>    </audio>    <span class="hljs-reserved" style="box-sizing: border-box;">function</span> playOrPaused() {        <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> audio);        <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> audio.paused);        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (audio.paused) {            audio.play(); <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">ERROR</span>:Uncaught (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> promise) <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">DOMException</span>: The element has <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">no</span> supported sources.        }    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

查阅相关资料发现audio可以支持两种方式设置src，如下：

1. Permitted content: If the element has a src attribute: zero or more <track> elements, followed by transparent content that contains no media elements — that is, no <audio> or <video> elements.2. Else: zero or more <source> elements, followed by zero or more <track> elements, followed by transparent content that contains no media elements, that is no <audio> or <video> elements.

并且:src嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性；你可以在audio元素中使用 元素来替代该属性指定嵌入的音频。

于是改成第二种方案，解决问题，如下：

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <audio <span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"audio"</span>>         <source src=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://ossweb-img.qq.com/images/lol/m/act/a20160315live/shake_sound_male.mp3"</span> type=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"audio/mpeg"</span>>      Your browser <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">does</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">not</span> support <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> audio tag.    </audio></code>